Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated design #50

Merged
merged 7 commits into from
Oct 13, 2016
Merged

updated design #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1601fa9
use OFFICIAL bootstrap sass instead of whatever this buggy one was. U…
Oct 9, 2016
190281f
initial redesigned site, no early info added yet. WIP for codeforbost…
Oct 10, 2016
0a70004
fix jquery, map resize fix for tabs
thadk Oct 12, 2016
1c740aa
Merge pull request #1 from thadk/redesign
thecristen Oct 13, 2016
d4bc3b7
pin down jquery version (the updated bootstrap will upgrade it otherw…
Oct 13, 2016
fc5eaf2
make it usable on mobile
Oct 13, 2016
cb422fe
adjust spinner position and make it not bigger than the button text
Oct 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gruntfile.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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