Skip to content

Commit

Permalink
initial redesigned site, no early info added yet. WIP for codeforbost…
Browse files Browse the repository at this point in the history 
…on#35
  • Loading branch information
thecristen committed Oct 10, 2016
1 parent 1601fa9 commit 190281f
Show file tree
Hide file tree
Showing 15 changed files with 311 additions and 470 deletions.
174 changes: 107 additions & 67 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,83 +18,123 @@
<meta property="og:image" content="http://votecambridge.com/images/45b5ba8f.for_social_media.png">
</head>
<body>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<header>
<h1><img src="images/logo.png" class="logo" alt="Vote Cambridge"></h1>
</header>
<div class="input">
<h3 id="modalLabel">Find your polling place</h3>
<div id="notice"></div>
<div class="address">
<form class="clearfix">
<label for="address"><span class="icon-home"></span> Enter home address</label>
<input type="text" id="address" class="input-md form-control" placeholder="1234 Main St">
<button class="btn btn-default" type="submit"><span class="icon-search"></span> Find</button>
</form>
</div>
<main>
<nav class="navbar navbar-default navbar-cambridge">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="images/logo_small.png">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="http://www.cambridgema.gov/election"><span class="fa fa-fw fa-info-circle"></span> See election information</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www.meetup.com/Code-for-Boston" title="Built as a public technology service by Code for Boston">
Built by <img src="images/cfb_logo.png" alt="" class="logo">
</a></li><li><a href="http://www.github.com/codeforboston/cambridge_voting_locations"><span class="fa fa-fw fa-github"></span>
on Github</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-cambridge">
<div class="container-fluid">
<span class="label label-primary">Upcoming Election</span>
<h1>November 8 <small>State/Presidential Election</small></h1>
<p>🌎 Find your voting location below (Cambridge, Massachusetts only).</p>
</div>
</div>

<div class="separator">
Or
</div>
<ul class="nav nav-tabs cambridge-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#early-voting" aria-controls="early-voting" role="tab" data-toggle="tab">
<h2>Early Voting</h2>
October 24 - November 4
</a>
</li>
<li role="presentation">
<a href="#election-day" aria-controls="election-day" role="tab" data-toggle="tab">
<h2>Election Day</h2>
November 8
</a>
</li>
</ul>

<div class="location">
<a class="btn btn-default current-location">
<span class="icon-location"></span>
<span class="button-text">Use current location</span>
<span class="spinner">
<span class="double-bounce1"></span>
<span class="double-bounce2"></span>
</span>
</a>
<span class="clarification">Use current location only if you are at your place of residence.</span>
</div>
</div>
<footer>
<nav>
<a href="http://www.cambridgema.gov/election"><span class="icon-info-sign"></span> Election information</a>
</nav>
<div class="cfb">
<p>
Built as a public technology service by
<a href="http://www.meetup.com/Code-for-Boston">
<img src="images/cfb_logo.png" alt="" class="logo">
</a>
</p>
<ul class="list-inline">
<li><a href="https://twitter.com/CodeForBoston" target="_blank"><span class="fa fa-twitter"></span>@CodeForBoston</a></li>
<li class="divider"></li>
<li><a href="http://www.github.com/codeforboston/cambridge_voting_locations" target="_blank"><span class="fa fa-github"></span>
Source</a></li>
</ul>
</div>
</footer>
<div class="tab-content cambridge-tab-content">
<div role="tabpanel" class="tab-pane container-fluid active" id="early-voting">
<h3>Early Voting Information</h3>
<p class="lead">More to come</p>
</div>
<div role="tabpanel" class="tab-pane container-fluid" id="election-day">
<div class="row">
<div class="voting-search col-sm-9">
<h3>Find your polling location</h3>
<p class="lead">On election day, you must vote at the polling location associated with your home address.</p>
<div id="notice"></div>
<div class="location form-inline">
<div class="control-label">
<span class="fa fa-fw fa-location-arrow"></span>
My current location is home
</div>
<a class="btn btn-cambridge current-location">
<span class="icon-location"></span>
Find by current location
<span class="spinner">
<span class="double-bounce1"></span>
<span class="double-bounce2"></span>
</span>
</a>
</div>

<div class="divider text-center">
<hr class="pull-left">OR<hr class="pull-right">
</div>

<div class="address">
<form class="form-inline clearfix">
<label class="control-label" for="address">
<span class="fa fa-fw fa-home"></span>
Enter my home address
</label>
<input type="text" id="address" class="input-md form-control" placeholder="1234 Main St">
<button class="btn btn-cambridge" type="submit">
<span class="icon-search"></span>
Find by home address
</button>
</form>
</div>
</div>
</div>
</div>

<div class="result row">
<nav>
<a href="#" class="back btn btn-default"><span class="icon-circle-arrow-left"></span> Back</a>
<img src="images/logo_small.png" class="logo_small" alt="Vote Cambridge" />
</nav>
<div id="map" class="col-sm-8"></div>
<div class="location-data col-sm-4">
<div id="info">
<header>
<h4 class="location"></h4>
<p class="notes"></p>
<a id="view_directions" class="btn"><span class="icon-info-sign"></span> View directions</a>
<a id="directions-link" class="btn" target="_blank" title="Open navigation"><span class="icon-compass"></span> View in Map app</a>
</header>
<div id="directions"></div>
<div class="voting-result row">
<hr>
<div id="map" class="col-sm-8"></div>
<div class="location-data col-sm-4">
<div id="info">
<header>
<h4 class="location"></h4>
<p class="notes"></p>
<a id="view_directions" class="btn"><span class="icon-info-sign"></span> View directions</a>
<a id="directions-link" class="btn" target="_blank" title="Open navigation"><span class="icon-compass"></span> View in Map app</a>
</header>
<div id="directions"></div>
</div>
</div>
</div>
</div>
</div>


</main>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="scripts/vendor/maps.google.polygon.containsLatLng.js"></script>
Expand Down
8 changes: 4 additions & 4 deletions app/scripts/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ require.config({
});


require(['jquery', 'polling_location_finder', 'bootstrapModal'], function($, findPollingLocationFor) {
require(['jquery', 'polling_location_finder', 'bootstrapCollapse', 'bootstrapTab'], function($, findPollingLocationFor) {
//'use strict';

$('.modal').modal('show');
// $('.modal').modal('show');
// //attach autocomplete

var $address = $('#address');
Expand Down Expand Up @@ -180,15 +180,15 @@ require(['jquery', 'polling_location_finder', 'bootstrapModal'], function($, fin
zip_index = i;
}
}

var zipCodeComponent = addr_components[zip_index],
zipCode = zipCodeComponent && zipCodeComponent.short_name;

var isInCambridge = ($.inArray(zipCode, ['02138', '02139', '02140', '02141', '02142', '02238'])) > -1,
isStreetAddress = ($.inArray('street_address', address.types)) > -1;

return isInCambridge && isStreetAddress;

}

geocoder.geocode({
Expand Down
9 changes: 1 addition & 8 deletions app/scripts/polling_location_finder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,9 @@ define(['jquery', 'geojson', 'json!vendor/ELECTIONS_WardsPrecincts.geojson', 'js
// TODO move UI interaction into its own module

function showResults() {
$('.modal').modal('hide');
$('.voting-result').show();
}

function hideResults(e) {
e.preventDefault();
$('.modal').modal('show');
}

$('.back').on('click', hideResults);

// keep track of user precinct across calls so we can erase previous precincts if necessary
var userPrecinct;

Expand Down
2 changes: 2 additions & 0 deletions app/styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ $dark_blue: #0c5c92;
$med_blue: #246ada;
$light_blue: #509fd4;
$extra_light_blue: #b1d4eb;

$cambridgeLightBlue: #eff7fc;
67 changes: 67 additions & 0 deletions app/styles/_navbar.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
$navbarLogoHeight: 28px;
$cambridgeBorder: darken($cambridgeLightBlue, 40%);

main {
background-color: $cambridgeLightBlue;
}

.navbar-cambridge {
border-radius: 0;
border: 0;
border-bottom: 3px solid $cambridgeBorder;
background-color: $cambridgeLightBlue;
margin-bottom: 0;

img {
height: $navbarLogoHeight;
}
.navbar-nav li a {
line-height: $navbarLogoHeight;
color: darken($cambridgeLightBlue, 60%);
}
}

.jumbotron-cambridge {
margin-bottom: 0;
padding: 3rem;
background: inherit;

h1 {
font-size: calc(1rem + 4vw);
}
}

.cambridge-tabs {
padding-left: 3em;
border-color: $cambridgeBorder;

li a {
text-transform: uppercase;
font-weight: 600;
padding: .75em 1.5em;
border: 0;

span {
display: block;
font-size: 2em;
}

&:hover {
background-color: darken($cambridgeLightBlue, 10%);
}
}

li.active a, li.active a:hover, li.active a:focus {
border: 1px solid $cambridgeBorder;
border-bottom-color: transparent;
}
}

.cambridge-tab-content {
background: $body-bg;
padding: 3em;
}

.voting-result {
display: none;
}
12 changes: 2 additions & 10 deletions app/styles/_screens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,14 @@
100% { transform: translateX(100%); }
}

html, body {
min-width: 100%;
min-height: 100%;
overflow-x: hidden;
}

.screen {
position: absolute;
top: 0;
top: 0;
left: 0;
right: 0;
padding-top: 50px;
min-height: 100%;

&.left.inactive {
animation: currentToLeft 0.4s forwards;
}
Expand All @@ -57,5 +51,3 @@ html, body {
// left: 0;
// right: 0;
// }


Loading

0 comments on commit 190281f

Please sign in to comment.