Skip to content

Commit

Permalink
Redesign to support tabbed early voting view (#50)
Browse files Browse the repository at this point in the history 
* use OFFICIAL bootstrap sass instead of whatever this buggy one was. Updates bootstrap from 3.0.0 to 3.3.7.

* initial redesigned site, no early info added yet. WIP for #35

* fix jquery, map resize fix for tabs

* pin down jquery version (the updated bootstrap will upgrade it otherwise)

* make it usable on mobile

* adjust spinner position and make it not bigger than the button text
  • Loading branch information
@thecristen @carpeliam
thecristen authored and carpeliam committed Oct 13, 2016
1 parent 078fdea commit dc27e50
Show file tree
Hide file tree
Showing 27 changed files with 657 additions and 717 deletions.
2 changes: 1 addition & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ module.exports = function (grunt) {
'.htaccess',
'images/*',
'styles/fonts/{,*/}*.*',
'bower_components/sass-bootstrap/fonts/*.*',
'bower_components/bootstrap-sass/assets/fonts/bootstrap/*.*',
'bower_components/font-awesome/fonts/*.*'
]
}]
Expand Down
175 changes: 107 additions & 68 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,86 +18,125 @@
<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>
Oct 24 - Nov 4
</a>
</li>
<li role="presentation">
<a href="#election-day" aria-controls="election-day" role="tab" data-toggle="tab">
<h2>Election Day</h2>
Nov 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-12">
<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>
<span class="spinner">
<span class="double-bounce1"></span>
<span class="double-bounce2"></span>
</span>
Find by current location
</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="bower_components/jquery/jquery.js"></script>
<script src="scripts/vendor/maps.google.polygon.containsLatLng.js"></script>
<!-- endbower -->
<!-- endbuild -->
Expand Down
38 changes: 22 additions & 16 deletions app/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
bootstrapAffix: '../bower_components/sass-bootstrap/js/affix',
bootstrapAlert: '../bower_components/sass-bootstrap/js/alert',
bootstrapButton: '../bower_components/sass-bootstrap/js/button',
bootstrapCarousel: '../bower_components/sass-bootstrap/js/carousel',
bootstrapCollapse: '../bower_components/sass-bootstrap/js/collapse',
bootstrapDropdown: '../bower_components/sass-bootstrap/js/dropdown',
bootstrapModal: '../bower_components/sass-bootstrap/js/modal',
bootstrapPopover: '../bower_components/sass-bootstrap/js/popover',
bootstrapScrollspy: '../bower_components/sass-bootstrap/js/scrollspy',
bootstrapTab: '../bower_components/sass-bootstrap/js/tab',
bootstrapTooltip: '../bower_components/sass-bootstrap/js/tooltip',
bootstrapTransition: '../bower_components/sass-bootstrap/js/transition',
bootstrapAffix: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix',
bootstrapAlert: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert',
bootstrapButton: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/button',
bootstrapCarousel: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel',
bootstrapCollapse: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse',
bootstrapDropdown: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown',
bootstrapModal: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal',
bootstrapPopover: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover',
bootstrapScrollspy: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy',
bootstrapTab: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab',
bootstrapTooltip: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip',
bootstrapTransition: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition',
text: '../bower_components/requirejs-text/text',
geojson: '../bower_components/geojson-google-maps/GeoJSON',
json: 'vendor/json'
Expand Down 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 @@ -129,6 +129,7 @@ require(['jquery', 'polling_location_finder', 'bootstrapModal'], function($, fin
$btn.attr('disabled', false);
$btn.html(initialText);
$btn.removeClass('loading');
google.maps.event.trigger(map, 'resize');
});
}, geolocationErrorDisplay);
} else {
Expand All @@ -137,6 +138,8 @@ require(['jquery', 'polling_location_finder', 'bootstrapModal'], function($, fin
$btn.attr('disabled', false);
$btn.html(initialText);
$btn.removeClass('loading');
google.maps.event.trigger(map, 'resize');

}
});

Expand Down Expand Up @@ -180,15 +183,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 All @@ -212,10 +215,13 @@ require(['jquery', 'polling_location_finder', 'bootstrapModal'], function($, fin
.html($('#noLocation').text());
} else {
displaySearchResults(results);
google.maps.event.trigger(map, 'resize');
}
});
} else {
displaySearchResults(results);
google.maps.event.trigger(map, 'resize');

}
});
}
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
3 changes: 3 additions & 0 deletions app/styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,6 @@ $dark_blue: #0c5c92;
$med_blue: #246ada;
$light_blue: #509fd4;
$extra_light_blue: #b1d4eb;

$cambridgeLightBlue: #eff7fc;
$cambridgeBorder: darken($cambridgeLightBlue, 40%);
33 changes: 33 additions & 0 deletions app/styles/_navbar.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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);
}
}

.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;
// }


4 changes: 2 additions & 2 deletions app/styles/_spinner.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.spinner {
width: 1.5rem;
height: 1.5rem;
width: 1em;
height: 1em;
position: relative;
margin: auto;
display: none;
Expand Down
Loading

1 comment on commit dc27e50

@moczka
Copy link
Member

@moczka moczka commented on dc27e50 Oct 13, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sweet, I will fetch these new changes to my fork and merge :3

Please sign in to comment.