From b1144894a1e96e1910be5718d269c400ded4969a Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Tue, 17 Apr 2018 11:13:28 -0700 Subject: [PATCH 01/14] Fixes filename typo --- .../main/{_buildling-report.scss => _building-report.scss} | 0 src/styles/main/_index.scss | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/styles/main/{_buildling-report.scss => _building-report.scss} (100%) diff --git a/src/styles/main/_buildling-report.scss b/src/styles/main/_building-report.scss similarity index 100% rename from src/styles/main/_buildling-report.scss rename to src/styles/main/_building-report.scss diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss index 6c6602a8..ffeb4e8b 100644 --- a/src/styles/main/_index.scss +++ b/src/styles/main/_index.scss @@ -3,7 +3,7 @@ @import "search"; @import "category"; @import "filter"; -@import "buildling-report"; +@import "building-report"; @import "year-control"; @import "footer"; @import "building-info-map-popup"; From 8204c91d6fa9b75b66266f526f46c3483ccce860 Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Tue, 17 Apr 2018 11:50:36 -0700 Subject: [PATCH 02/14] Sets up SASS theming colors Turns out `#0047ba` is not actually orange. Abstracts out Seattle's blue and dark blue as semantically the "theme color" and the "theme color dark" outside of the variables file so these can be more generally understood. Removes `$normal-text` since this was only used in one place and replaced it with the `$base-font-color` (semantically the closest match). Sets the springfield theme to a bright red to make it simple to spot anywhere that's been missed. --- src/styles/bitters-seattle/_variables.scss | 7 ++++--- src/styles/bitters-springfield/_extra_variables.scss | 5 +++-- src/styles/main/_building-info-map-popup.scss | 4 ++-- src/styles/main/_building-report.scss | 6 +++--- src/styles/main/_category.scss | 8 ++++---- src/styles/main/_city_scorecard.scss | 2 +- src/styles/main/_common.scss | 4 ++-- src/styles/main/_compare_bar.scss | 4 ++-- src/styles/main/_footer.scss | 4 ++-- src/styles/main/_search.scss | 2 +- src/styles/main/_toolbar.scss | 2 +- src/styles/main/_year-control.scss | 6 +++--- 12 files changed, 28 insertions(+), 26 deletions(-) diff --git a/src/styles/bitters-seattle/_variables.scss b/src/styles/bitters-seattle/_variables.scss index e8edff55..753c4ab7 100644 --- a/src/styles/bitters-seattle/_variables.scss +++ b/src/styles/bitters-seattle/_variables.scss @@ -20,12 +20,13 @@ $dark-gray: #333; $medium-gray: darken(#d0d0d0,10%); $light-gray: #ddd; $spinner-gray: #666; -$orange: #0047ba; $blue: #0047ba; -$normal-text: $orange; +$navy-blue: #001488; $real-orange: #DE8F41; +$theme-color: $blue; +$theme-color-dark: $navy-blue; $metric-left-width: 30%; $metric-header-height: 6.5em; @@ -36,7 +37,7 @@ $footer-height: 2em; // Footer height // Font Colors $base-background-color: #f2f2f2; -$base-font-color: $orange; +$base-font-color: $theme-color; $action-color: white; $inverse-font-color: white; diff --git a/src/styles/bitters-springfield/_extra_variables.scss b/src/styles/bitters-springfield/_extra_variables.scss index f46f9ca5..9ddd7b9b 100644 --- a/src/styles/bitters-springfield/_extra_variables.scss +++ b/src/styles/bitters-springfield/_extra_variables.scss @@ -4,7 +4,9 @@ // $orange) or rely on an exiting Bitters 1.8 var that might not have been // around before. -$orange: #0047ba; +$theme-color: red; +$theme-color-dark: shade(red, 30%); + $base-background-color: #f2f2f2; $base-font-size: 1em; $footer-height: 2em; @@ -13,7 +15,6 @@ $inverse-font-color: white; $metric-footer-height: 4em; $metric-header-height: 6.5em; $metric-left-width: 30%; -$normal-text: $orange; $real-orange: #de8f41; $spinner-gray: #666; $toolbar-height: 3em; diff --git a/src/styles/main/_building-info-map-popup.scss b/src/styles/main/_building-info-map-popup.scss index 735dbdbc..681fd1a4 100644 --- a/src/styles/main/_building-info-map-popup.scss +++ b/src/styles/main/_building-info-map-popup.scss @@ -139,9 +139,9 @@ width: 100%; margin: 1rem 0 0; padding: 0.5em 1em; - border: 1px solid #0047ba; + border: 1px solid $theme-color; border-radius: 1em; - background: #0047ba; + background: $theme-color; color: white; font-size: 0.75rem; text-transform: uppercase; diff --git a/src/styles/main/_building-report.scss b/src/styles/main/_building-report.scss index d97682d6..62a4d231 100644 --- a/src/styles/main/_building-report.scss +++ b/src/styles/main/_building-report.scss @@ -101,12 +101,12 @@ .building-report { thead { - background-color: $orange; + background-color: $theme-color; color: #fff; } tbody { - color: $orange; + color: $theme-color; background-color: #fff; } @@ -129,7 +129,7 @@ label { background: #fff; border-radius: 1em; - color: $orange; + color: $theme-color; cursor: pointer; @extend %disable-user-select; } diff --git a/src/styles/main/_category.scss b/src/styles/main/_category.scss index 605ae111..e5a9d5b8 100644 --- a/src/styles/main/_category.scss +++ b/src/styles/main/_category.scss @@ -49,7 +49,7 @@ text-transform: uppercase; a { - color: #0047ba; + color: $theme-color; } } @@ -70,7 +70,7 @@ .map-category-control { .category-list-toggle { - background-color: $orange; + background-color: $theme-color; border: $base-border; border-radius: $base-border-radius; color: #fff; @@ -81,7 +81,7 @@ input[type="checkbox"]:checked + .category-list-toggle { background-color: white; - color: $orange; + color: $theme-color; } .categories { @@ -96,7 +96,7 @@ input[type=checkbox] { display: none; } input[type=checkbox]:checked + label .check { - background: $orange; + background: $theme-color; } .check { diff --git a/src/styles/main/_city_scorecard.scss b/src/styles/main/_city_scorecard.scss index 24f9863e..c91e1631 100644 --- a/src/styles/main/_city_scorecard.scss +++ b/src/styles/main/_city_scorecard.scss @@ -65,7 +65,7 @@ z-index: 2; button { - background-color: #001488; + background-color: $theme-color-dark; color: white; border: 0; padding: 0.4em 1.2em; diff --git a/src/styles/main/_common.scss b/src/styles/main/_common.scss index 7472bf5e..199f8fc8 100644 --- a/src/styles/main/_common.scss +++ b/src/styles/main/_common.scss @@ -1,6 +1,6 @@ %common-button-input{ -webkit-font-smoothing: antialiased; - background-color: $orange; + background-color: $theme-color; border: $base-border; border-radius: $base-border-radius; color: #fff; @@ -12,7 +12,7 @@ %common-button-input-inverse { @extend %common-button-input; background-color: $inverse-font-color; - color: $normal-text; + color: $base-font-color; } %disable-user-select { diff --git a/src/styles/main/_compare_bar.scss b/src/styles/main/_compare_bar.scss index 2ca97d2d..5b80e08a 100644 --- a/src/styles/main/_compare_bar.scss +++ b/src/styles/main/_compare_bar.scss @@ -4,7 +4,7 @@ top: 100%; width: 100% - $metric-left-width; height: $metric-footer-height; - background: $base-font-color; + background: $theme-color; z-index: 1000; cursor: pointer; font-size: 1em; @@ -74,7 +74,7 @@ } td.empty > div { - background: #001488; + background: $theme-color-dark; cursor: default; } diff --git a/src/styles/main/_footer.scss b/src/styles/main/_footer.scss index a02962e6..3155d2e9 100644 --- a/src/styles/main/_footer.scss +++ b/src/styles/main/_footer.scss @@ -26,7 +26,7 @@ position: relative; height: 100%; width: 100%; - border-top: 1px solid $blue; + border-top: 1px solid $theme-color; } .links { @@ -35,7 +35,7 @@ a { display: inline-block; - color: #0047ba; + color: $theme-color; text-decoration: none; vertical-align: middle; } diff --git a/src/styles/main/_search.scss b/src/styles/main/_search.scss index 4ed33096..cf04b715 100644 --- a/src/styles/main/_search.scss +++ b/src/styles/main/_search.scss @@ -44,7 +44,7 @@ } b { - color: #0047ba; + color: $theme-color; } } diff --git a/src/styles/main/_toolbar.scss b/src/styles/main/_toolbar.scss index cc301a94..13bba571 100644 --- a/src/styles/main/_toolbar.scss +++ b/src/styles/main/_toolbar.scss @@ -1,5 +1,5 @@ .toolbar { - background-color: $orange; + background-color: $theme-color; color: $inverse-font-color; .tbar-right { diff --git a/src/styles/main/_year-control.scss b/src/styles/main/_year-control.scss index 7edd8d4f..23dcbc55 100644 --- a/src/styles/main/_year-control.scss +++ b/src/styles/main/_year-control.scss @@ -35,7 +35,7 @@ .year-control { font-weight: 500; - border-bottom-color: rgba(darken($orange, 15), 0.7); + border-bottom-color: rgba(darken($theme-color, 15), 0.7); text-align: center; label { @@ -44,13 +44,13 @@ input + label { cursor: pointer; - color: darken($orange, 10); + color: darken($theme-color, 10); opacity: 0.85; margin-bottom: 0.4em; &::after { opacity: 0.6; - background-color: darken($orange, 15); + background-color: darken($theme-color, 15); } } From 2329af170700b2b0a48b2a2449041084674a15db Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Wed, 18 Apr 2018 11:14:48 -0700 Subject: [PATCH 03/14] Fixes some more border radius calls These should be $base-border-radius, not a specific number. --- src/styles/main/_building-info-map-popup.scss | 1 + src/styles/main/_building-report.scss | 2 +- src/styles/main/_compare_bar.scss | 2 +- src/styles/main/_layout.scss | 6 +++--- src/styles/main/_search.scss | 2 +- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/styles/main/_building-info-map-popup.scss b/src/styles/main/_building-info-map-popup.scss index 681fd1a4..05d011de 100644 --- a/src/styles/main/_building-info-map-popup.scss +++ b/src/styles/main/_building-info-map-popup.scss @@ -141,6 +141,7 @@ padding: 0.5em 1em; border: 1px solid $theme-color; border-radius: 1em; + border-radius: $base-border-radius; background: $theme-color; color: white; font-size: 0.75rem; diff --git a/src/styles/main/_building-report.scss b/src/styles/main/_building-report.scss index 62a4d231..f131d595 100644 --- a/src/styles/main/_building-report.scss +++ b/src/styles/main/_building-report.scss @@ -128,7 +128,7 @@ label { background: #fff; - border-radius: 1em; + border-radius: $base-border-radius; color: $theme-color; cursor: pointer; @extend %disable-user-select; diff --git a/src/styles/main/_compare_bar.scss b/src/styles/main/_compare_bar.scss index 5b80e08a..fac87df9 100644 --- a/src/styles/main/_compare_bar.scss +++ b/src/styles/main/_compare_bar.scss @@ -68,7 +68,7 @@ margin: 0 0.5em; padding: 0 0.5em; background: white; - border-radius: 1em; + border-radius: $base-border-radius; line-height: 2em; user-select: none; } diff --git a/src/styles/main/_layout.scss b/src/styles/main/_layout.scss index 63d821e4..f340dcf4 100644 --- a/src/styles/main/_layout.scss +++ b/src/styles/main/_layout.scss @@ -221,14 +221,14 @@ header { background: $base-font-color; color: #fff; border: 0; - border-radius: 18px; + border-radius: $base-border-radius; &:after { border-color: #fff transparent transparent; } &.dropdown-active { - border-radius: 18px 18px 0 0; + border-radius: $base-border-radius $base-border-radius 0 0; } &.dropdown-active:after { @@ -241,7 +241,7 @@ header { color: #fff; border: 0; white-space: nowrap; - border-radius: 0 0 18px 18px; + border-radius: 0 0 $base-border-radius $base-border-radius; } .selectize-dropdown .active { diff --git a/src/styles/main/_search.scss b/src/styles/main/_search.scss index cf04b715..23538d03 100644 --- a/src/styles/main/_search.scss +++ b/src/styles/main/_search.scss @@ -1,7 +1,7 @@ .search-wrapper { padding: $base-spacing/4 1em; border: 1px solid $base-border-color; - border-radius: 1em; + border-radius: $base-border-radius; margin: 0.5em 1em; .address-search:focus { From 3b758fae20ccc703ce3c268e90891ef616b54a64 Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Wed, 18 Apr 2018 11:16:18 -0700 Subject: [PATCH 04/14] Fixes colours in compare bar These should be the theme color, not the base font color. --- src/styles/main/_compare_bar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main/_compare_bar.scss b/src/styles/main/_compare_bar.scss index fac87df9..6d62f620 100644 --- a/src/styles/main/_compare_bar.scss +++ b/src/styles/main/_compare_bar.scss @@ -19,7 +19,7 @@ height: 0; border-style: solid; border-width: 0 10px 10px 10px; - border-color: transparent transparent $base-font-color transparent; + border-color: transparent transparent $theme-color transparent; } button { @@ -122,6 +122,6 @@ bottom: auto; top: 100%; border-width: 10px 10px 0 10px; - border-color: $base-font-color transparent transparent transparent; + border-color: $theme-color transparent transparent transparent; } } \ No newline at end of file From b94f35002c236324ca3de0e68381521cc430ad3c Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Wed, 18 Apr 2018 11:17:31 -0700 Subject: [PATCH 05/14] WIP responsive filters --- src/styles/main/_filter.scss | 9 ++++++- src/styles/main/_index.scss | 2 ++ src/styles/main/_layout.scss | 3 +-- src/styles/main/_responsive.scss | 40 ++++++++++++++++++++++++++++++++ 4 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 src/styles/main/_responsive.scss diff --git a/src/styles/main/_filter.scss b/src/styles/main/_filter.scss index 52f25942..cf6f3af9 100644 --- a/src/styles/main/_filter.scss +++ b/src/styles/main/_filter.scss @@ -6,13 +6,20 @@ width: 100%; } + #map-controls--toggle { + position: absolute; + left: 100%; + top: 0; + } + #map-controls-bk { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; - background: $base-background-color; + // background: $base-background-color; + background: blue; z-index: 0; } diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss index ffeb4e8b..eeee3bad 100644 --- a/src/styles/main/_index.scss +++ b/src/styles/main/_index.scss @@ -14,3 +14,5 @@ @import "city_scorecard"; @import "mobile-alert"; @import "modals"; + +@import "responsive"; diff --git a/src/styles/main/_layout.scss b/src/styles/main/_layout.scss index f340dcf4..a38d209a 100644 --- a/src/styles/main/_layout.scss +++ b/src/styles/main/_layout.scss @@ -131,9 +131,8 @@ header { position: absolute; height: 100%; width: 100%; - overflow: hidden; left: 0; - z-index: 10; + z-index: 4; .irs { height: 21px; diff --git a/src/styles/main/_responsive.scss b/src/styles/main/_responsive.scss new file mode 100644 index 00000000..b6fa9fd3 --- /dev/null +++ b/src/styles/main/_responsive.scss @@ -0,0 +1,40 @@ +// collecting all the mobile overrides in one place + +@mixin small { + outline: 3px dotted blue; +} + +@mixin medium { + outline: 3px dotted red; +} + +@mixin large { + outline: 3px dotted cyan; +} + +@mixin xlarge { + outline: 2px dotted magenta; +} + +#header.title, +#map-category-controls, +#year-select-container, +#map-controls-bar { + @include small; + + @include media($medium-screen-up) { + & { + @include medium; + } + } + @include media($large-screen-up) { + & { + @include large; + } + } + @include media($xlarge-screen-up) { + & { + @include xlarge; + } + } +} From 7081d6bde5415a201192208577622ef54b65a1b2 Mon Sep 17 00:00:00 2001 From: Ryan McCuaig Date: Thu, 19 Apr 2018 11:17:56 -0700 Subject: [PATCH 06/14] Makes filter bar hideable. Unlike the DC codebase, we're just showing the filter toggle at all sizes (it's arguably useful for big displays too). This commit adds a new Backbone view wrapper around the `#map-controls` and captures a click event to hide-show the sidebar via CSS. It also makes the mapview full-width under the sidebar to accommodate the closed state. This is a backbone-ish expansion of the ad-hoc [reach-across-the-view-hierarchy][1] situation in the DC codebase. [1]: https://github.com/cityenergyproject/dc/blob/8014c00a84c28e0e9fef10033688ce4be94e2abe/src/app/views/map/map.js#L29 --- src/app/router.mustache | 4 ++- src/app/views/map/map_controls.js | 40 ++++++++++++++++++++++ src/index.html | 1 + src/styles/bitters-seattle/_variables.scss | 4 +++ src/styles/main/_filter.scss | 35 +++++++++++++++++-- src/styles/main/_layout.scss | 10 +++--- 6 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 src/app/views/map/map_controls.js diff --git a/src/app/router.mustache b/src/app/router.mustache index 6cf971fb..c7478506 100644 --- a/src/app/router.mustache +++ b/src/app/router.mustache @@ -9,6 +9,7 @@ define([ 'models/scorecard', 'collections/city_buildings', 'views/map/map', + 'views/map/map_controls', 'views/map/address_search_autocomplete', 'views/map/year_control', 'views/layout/activity_indicator', @@ -21,7 +22,7 @@ define([ 'views/modals/modal', 'views/layout/footer' ], function($, deparam, _, Backbone, CityModel, ScorecardModel, - CityBuildings, MapView, AddressSearchView, + CityBuildings, MapView, MapControlsView, AddressSearchView, YearControlView, ActivityIndicator, BuildingCounts, CompareBar, ScorecardController, Button, MobileAlert, ModalModel, ModalController, FooterView) { @@ -167,6 +168,7 @@ define([ initialize: function(){ const activityIndicator = new ActivityIndicator({state: this.state}); const yearControlView = new YearControlView({state: this.state}); + const mapControls = new MapControlsView(); const mapView = new MapView({state: this.state}); const addressSearchView = new AddressSearchView({mapView: mapView, state: this.state}); diff --git a/src/app/views/map/map_controls.js b/src/app/views/map/map_controls.js new file mode 100644 index 00000000..44c01387 --- /dev/null +++ b/src/app/views/map/map_controls.js @@ -0,0 +1,40 @@ +define(["jquery", "backbone"], function($, Backbone) { + var closed = `
Filters
+ + + `; + + var open = ` + + + `; + + var MapControlsView = Backbone.View.extend({ + el: "#map-controls", + initialize: function(options) { + options = options || {}; + this.isOpen = options.isOpen || true; + this.render(); + }, + events: { + "click #map-controls--toggle": function(e) { + e.stopPropagation(); + this.isOpen = !this.isOpen; + this.render(); + } + }, + render: function() { + var $toggle = this.$("#map-controls--toggle"); + if (this.isOpen) { + $toggle.html(open); + this.$el.removeClass("closed"); + } else { + $toggle.html(closed); + this.$el.addClass("closed"); + } + return this; + } + }); + + return MapControlsView; +}); diff --git a/src/index.html b/src/index.html index 3545e26b..a95f89ff 100644 --- a/src/index.html +++ b/src/index.html @@ -33,6 +33,7 @@
+
diff --git a/src/styles/bitters-seattle/_variables.scss b/src/styles/bitters-seattle/_variables.scss index 753c4ab7..1d4a4f83 100644 --- a/src/styles/bitters-seattle/_variables.scss +++ b/src/styles/bitters-seattle/_variables.scss @@ -52,3 +52,7 @@ $form-box-shadow: inset 0 1px 3px rgba(#000, 0.06); $form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3); $header-height: 0em; + +// Animations +$base-duration: 150ms; +$base-timing: ease; diff --git a/src/styles/main/_filter.scss b/src/styles/main/_filter.scss index cf6f3af9..52c754b4 100644 --- a/src/styles/main/_filter.scss +++ b/src/styles/main/_filter.scss @@ -1,15 +1,44 @@ #map-controls { - width: 30%; + width: $metric-left-width; .compare-mode & { width: 100%; } #map-controls--toggle { - position: absolute; + background-color: $theme-color; + border-bottom-right-radius: $base-border-radius; + border-top-right-radius: $base-border-radius; + color: $base-background-color; + cursor: pointer; + display: flex; left: 100%; - top: 0; + opacity: 0.5; + padding: 0.5em; + position: absolute; + top: 0.1em; + transition: width $base-duration $base-timing; + width: 3em; + div, svg { + display: inline-block; + } + div { + text-align: right; + padding-right: 0.25em; + flex-grow: 1; + } + svg { + fill: $base-background-color; + } + &:hover { + background-color: shade($theme-color, 20%); + opacity: 1; + } + } + &.closed #map-controls--toggle { + opacity: 1; + width: 6em; } #map-controls-bk { diff --git a/src/styles/main/_layout.scss b/src/styles/main/_layout.scss index a38d209a..6f773c0e 100644 --- a/src/styles/main/_layout.scss +++ b/src/styles/main/_layout.scss @@ -133,6 +133,10 @@ header { width: 100%; left: 0; z-index: 4; + &.closed { + left: -$metric-left-width; + } + transition: left $base-duration $base-timing; .irs { height: 21px; @@ -143,14 +147,10 @@ header { #map-wrapper{ position: absolute; height: 100%; + left: 0; right: 0; overflow: hidden; - left: $nav-col-fixed-width; z-index: 1; - - @include media($large-screen-up) { - left: $large-nav-col-fixed-width; - } } #map { From e80a3a03dd8b8c29a09eca0a06fe007fe3353360 Mon Sep 17 00:00:00 2001 From: Greg Sugiyama Date: Tue, 24 Apr 2018 17:08:45 -0700 Subject: [PATCH 07/14] adds responsive design for year selector --- src/app/templates/map/year_control.html | 2 +- src/app/templates/map/year_dropdown.html | 4 + src/app/views/map/year_dropdown.js | 40 ++++++ src/index.html | 2 + src/styles/main/_year-control.scss | 151 +++++++++++++++-------- 5 files changed, 148 insertions(+), 51 deletions(-) create mode 100644 src/app/templates/map/year_dropdown.html create mode 100644 src/app/views/map/year_dropdown.js diff --git a/src/app/templates/map/year_control.html b/src/app/templates/map/year_control.html index 5ad94a26..eb421b95 100644 --- a/src/app/templates/map/year_control.html +++ b/src/app/templates/map/year_control.html @@ -2,4 +2,4 @@ <% _.each(years, function(year){ %>
  • />
  • <% }) %> - \ No newline at end of file + diff --git a/src/app/templates/map/year_dropdown.html b/src/app/templates/map/year_dropdown.html new file mode 100644 index 00000000..eb6e20a8 --- /dev/null +++ b/src/app/templates/map/year_dropdown.html @@ -0,0 +1,4 @@ + diff --git a/src/app/views/map/year_dropdown.js b/src/app/views/map/year_dropdown.js new file mode 100644 index 00000000..e547fab3 --- /dev/null +++ b/src/app/views/map/year_dropdown.js @@ -0,0 +1,40 @@ +define([ + 'jquery', + 'underscore', + 'backbone', + 'text!templates/map/year_dropdown.html', +], function ($, _, Backbone, YearDropdownTemplate) { + var YearDropdown = Backbone.View.extend({ + $container: $('#year-select-container'), + className: 'year-dropdown', + + initialize: function (options) { + this.state = options.state; + this.listenTo(this.state, 'change:city', this.onCityChange); + }, + + onCityChange: function () { + this.listenTo(this.state.get('city'), 'sync', this.onCitySync); + }, + + onCitySync: function () { + this.render(); + }, + + render: function () { + var city = this.state.get('city'); + + this.$el.appendTo(this.$container); + + var template = _.template(YearDropdownTemplate); + this.$el.html(template({ + years: _.keys(city.get('years')), + current_year: this.state.get('year'), + })); + + return this; + }, + }); + + return YearDropdown; +}); diff --git a/src/index.html b/src/index.html index a95f89ff..1f249555 100644 --- a/src/index.html +++ b/src/index.html @@ -14,6 +14,8 @@ + diff --git a/src/styles/main/_year-control.scss b/src/styles/main/_year-control.scss index 23dcbc55..afbbc3af 100644 --- a/src/styles/main/_year-control.scss +++ b/src/styles/main/_year-control.scss @@ -1,67 +1,118 @@ -.year-control { - border-bottom: 0.1em solid transparent; - line-height: 1; +// .year-control { +// border-bottom: 0.1em solid transparent; +// line-height: 1; - li { - position: relative; - display: inline-block; - } +// li { +// position: relative; +// display: inline-block; +// } - input { - display: none; - } +// input { +// display: none; +// } - label { - line-height: 1; +// label { +// line-height: 1; - &::after { - height: 0.5em; - width: 0.5em; - border-radius: 50%; - display: block; - content: " "; - position: absolute; - top: 100%; - left: 50%; - margin-top: -0.2em; - margin-left: -0.25em; - } - } +// &::after { +// height: 0.5em; +// width: 0.5em; +// border-radius: 50%; +// display: block; +// content: " "; +// position: absolute; +// top: 100%; +// left: 50%; +// margin-top: -0.2em; +// margin-left: -0.25em; +// } +// } - li + li { - margin-left: 0.75em; - } +// li + li { +// margin-left: 0.75em; +// } +// } + +// .year-control { +// font-weight: 500; +// border-bottom-color: rgba(darken($theme-color, 15), 0.7); +// text-align: center; + +// label { +// @extend %disable-user-select; +// } + +// input + label { +// cursor: pointer; +// color: darken($theme-color, 10); +// opacity: 0.85; +// margin-bottom: 0.4em; + +// &::after { +// opacity: 0.6; +// background-color: darken($theme-color, 15); +// } +// } + +// input:checked + label { +// color: white; +// opacity: 1; +// cursor: default; + +// &::after { +// opacity: 1; +// background-color: white; +// } +// } +// } + +.dropdown-container { + display: none; } -.year-control { - font-weight: 500; - border-bottom-color: rgba(darken($theme-color, 15), 0.7); - text-align: center; +@media only screen and (max-width: 850px) { - label { - @extend %disable-user-select; + #year-select-container { + cursor: pointer; + width: 100px; + height: 100%; } - input + label { - cursor: pointer; - color: darken($theme-color, 10); - opacity: 0.85; - margin-bottom: 0.4em; + .dropdown-container { + display: block; + } - &::after { - opacity: 0.6; - background-color: darken($theme-color, 15); - } + .current-year { + position: absolute; + font-size: 20px; + top: 17%; + left: 40%; } - input:checked + label { - color: white; - opacity: 1; - cursor: default; + .far { + position: absolute; + top: 20%; + left: 10%; + font-size: 25px; + } + .year-control { + display: none; + position: absolute; + border: 1px solid black; + border-top: none; + color: #0047ba; + background-color: #f2f2f2; + width: 100px; + padding: 11px 16px; + z-index: 1; + top: 100%; - &::after { - opacity: 1; - background-color: white; + input { + cursor: pointer; } } + + #year-select-container:hover .year-control { + display: block; + } } From b0a9684b6868d8ffb40c7934c9bbf185e5c48821 Mon Sep 17 00:00:00 2001 From: Greg Sugiyama Date: Wed, 25 Apr 2018 12:14:27 -0700 Subject: [PATCH 08/14] adds event listeners for responsive year selector --- src/app/router.mustache | 5 +- src/app/templates/map/year_dropdown.html | 17 ++- src/app/views/map/year_dropdown.js | 14 +- src/styles/main/_year-control.scss | 157 ++++++++++++----------- 4 files changed, 112 insertions(+), 81 deletions(-) diff --git a/src/app/router.mustache b/src/app/router.mustache index c7478506..24139bde 100644 --- a/src/app/router.mustache +++ b/src/app/router.mustache @@ -12,6 +12,7 @@ define([ 'views/map/map_controls', 'views/map/address_search_autocomplete', 'views/map/year_control', + 'views/map/year_dropdown', 'views/layout/activity_indicator', 'views/layout/building_counts', 'views/layout/compare_bar', @@ -23,7 +24,7 @@ define([ 'views/layout/footer' ], function($, deparam, _, Backbone, CityModel, ScorecardModel, CityBuildings, MapView, MapControlsView, AddressSearchView, - YearControlView, ActivityIndicator, + YearControlView, YearDropdownView, ActivityIndicator, BuildingCounts, CompareBar, ScorecardController, Button, MobileAlert, ModalModel, ModalController, FooterView) { @@ -168,10 +169,10 @@ define([ initialize: function(){ const activityIndicator = new ActivityIndicator({state: this.state}); const yearControlView = new YearControlView({state: this.state}); + const yearDropdownView = new YearDropdownView({state: this.state}); const mapControls = new MapControlsView(); const mapView = new MapView({state: this.state}); const addressSearchView = new AddressSearchView({mapView: mapView, state: this.state}); - const buildingCounts = new BuildingCounts({state: this.state}); const compareBar = new CompareBar({state: this.state}); const scorecardController = new ScorecardController({state: this.state, mapView: mapView}); diff --git a/src/app/templates/map/year_dropdown.html b/src/app/templates/map/year_dropdown.html index eb6e20a8..59915e8e 100644 --- a/src/app/templates/map/year_dropdown.html +++ b/src/app/templates/map/year_dropdown.html @@ -1,4 +1,15 @@ -