From b91f04faa12325c12c7d4f05ee0056fe254b8847 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Thu, 28 Mar 2024 11:02:35 -0400 Subject: [PATCH 1/7] Added button to minimize and expand left side menu --- app/controllers/application.js | 9 ++++++ app/styles/layouts/_l-default.scss | 45 ++++++++++++++++++++++++++++++ app/styles/layouts/_l-print.scss | 1 + app/templates/application.hbs | 36 ++++++++++++++++-------- 4 files changed, 79 insertions(+), 12 deletions(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index f42ae2e3..2fd1cc7b 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -4,6 +4,7 @@ import { computed, action } from '@ember/object'; import { inject as service } from '@ember/service'; import QueryParams from '@nycplanning/ember-parachute'; import config from 'labs-zola/config/environment'; +import { tracked } from '@glimmer/tracking'; const { defaultLayerGroupState, @@ -87,6 +88,8 @@ export default class ApplicationController extends Controller.extend( @service mainMap; + @tracked leftSideMenuVisibilty = true; + // this action extracts query-param-friendly state of layer groups // for various paramable layers @action @@ -112,4 +115,10 @@ export default class ApplicationController extends Controller.extend( const values = Object.values(state); return values.every(({ changed }) => changed === false); } + + @action + toggleLeftSideMenuVisibility() { + this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty; + console.log('new layer visibility', this.leftSideMenuVisibilty); + } } diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss index afddf475..605615ba 100644 --- a/app/styles/layouts/_l-default.scss +++ b/app/styles/layouts/_l-default.scss @@ -214,6 +214,51 @@ body.index { } } +.content-toggle-layer-palette-container { + position: relative; + z-index: 3; + box-shadow: 0 2px 0 rgba(0,0,0,0.1); + background-color: $white; + text-align: left; + + @include breakpoint(small down) { + display: none; + } + + @include breakpoint(medium down) { + @include xy-cell( + $size: full, + $output: (base size), + $gutters: 0 + ); + } + + & > .close-button { + position: relative; + margin: 0; + max-inline-size: max-content; + border: 2px solid rgba(0,0,0,0.25); + border-left: none; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + + @include breakpoint(large) { + display: block; + position: fixed; + z-index: 3; + top: 50%; + left: 18rem; + background-color: $white; + margin-left: -4px; + padding: 0 rem-calc(6) rem-calc(3); + // box-shadow: -4px 4px 0 rgba(0,0,0,0.1); + } + @include breakpoint(xxlarge) { + left: 18rem; + } + } +} + .content-is-closed { .navigation-area { diff --git a/app/styles/layouts/_l-print.scss b/app/styles/layouts/_l-print.scss index 5ddc940c..8a17104a 100644 --- a/app/styles/layouts/_l-print.scss +++ b/app/styles/layouts/_l-print.scss @@ -154,6 +154,7 @@ // -------------------------------------------------- .hide-for-print, // Hide everything that doesn't print .content-close-button-container, + .content-toggle-layer-palette-container, .layer-groups-container:not(.has-active-layer-groups), .layer-groups-container:not(.open), .layer-groups-container-title > .badge, diff --git a/app/templates/application.hbs b/app/templates/application.hbs index c929e8df..141ade0f 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -8,7 +8,17 @@ {{/if}}
- + + {{#if this.leftSideMenuVisibilty}} + + {{/if}} + +
+ +
+
- + {{#if this.leftSideMenuVisibilty}} + + {{/if}}
{{outlet}} From 680ba617c7e458d8850d8d39890b181ec217f6f1 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Tue, 2 Apr 2024 16:03:04 -0400 Subject: [PATCH 2/7] Added analytics, removed console.log --- app/controllers/application.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index 2fd1cc7b..f6e32593 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -88,6 +88,8 @@ export default class ApplicationController extends Controller.extend( @service mainMap; + @service metrics; + @tracked leftSideMenuVisibilty = true; // this action extracts query-param-friendly state of layer groups @@ -119,6 +121,16 @@ export default class ApplicationController extends Controller.extend( @action toggleLeftSideMenuVisibility() { this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty; - console.log('new layer visibility', this.leftSideMenuVisibilty); + + this.metrics.trackEvent('MatomoTagManager', { + category: 'Toggled Layer Menu Visibility', + action: 'Toggled Layer Menu Visibility', + name: `${this.leftSideMenuVisibilty ? 'Opened' : 'Closed'}`, + }); + + gtag('event', 'toggle_menu', { + event_category: 'Toggled Layer Menu Visibility', + event_action: `${this.leftSideMenuVisibilty ? 'Opened' : 'Closed'}`, + }); } } From f78870098d27d530246434707ada12f2454563ca Mon Sep 17 00:00:00 2001 From: Bryan Marchena Date: Thu, 25 Apr 2024 09:23:49 -0400 Subject: [PATCH 3/7] Update map width when toggling sidebar --- app/controllers/application.js | 6 ++++++ app/styles/layouts/_l-default.scss | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index f6e32593..61d6ae84 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -122,6 +122,12 @@ export default class ApplicationController extends Controller.extend( toggleLeftSideMenuVisibility() { this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty; + const mapContainer = document.querySelector('.map-container'); + + if (this.leftSideMenuVisibilty) + mapContainer.setAttribute('class', 'map-container'); + else mapContainer.setAttribute('class', 'map-container full-width'); + this.metrics.trackEvent('MatomoTagManager', { category: 'Toggled Layer Menu Visibility', action: 'Toggled Layer Menu Visibility', diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss index 605615ba..43d5f700 100644 --- a/app/styles/layouts/_l-default.scss +++ b/app/styles/layouts/_l-default.scss @@ -95,6 +95,11 @@ body { @include breakpoint(xlarge) { width: calc(100% - 18rem); } + + &.full-width { + width: 100%; + } + } body.index { @@ -193,7 +198,7 @@ body.index { ); } - & > .close-button { + & .close-button { position: relative; margin: 0; From b87c49a69f543175ca9ebd1f31203d44d7b2c0d8 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Wed, 1 May 2024 14:14:46 -0400 Subject: [PATCH 4/7] Removed duplicate import statement --- app/controllers/application.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index ff62a154..2745dd91 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -5,7 +5,6 @@ import { tracked } from '@glimmer/tracking'; import { inject as service } from '@ember/service'; import QueryParams from '@nycplanning/ember-parachute'; import config from 'labs-zola/config/environment'; -import { tracked } from '@glimmer/tracking'; const { defaultLayerGroupState, @@ -92,6 +91,7 @@ export default class ApplicationController extends Controller.extend( @service metrics; @tracked leftSideMenuVisibilty = true; + @tracked layerGroupsStorage; // this action extracts query-param-friendly state of layer groups From 7c60973168f147e6a8f59b21fd8397036ae36215 Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Mon, 6 May 2024 11:12:20 -0400 Subject: [PATCH 5/7] Window resizes when sidebar is hidden in order to elimenate the whitespace on the right when no info pane is visible --- app/controllers/application.js | 15 ++++++++++++++- app/styles/layouts/_l-default.scss | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/app/controllers/application.js b/app/controllers/application.js index 08d04f03..c437b6a6 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -94,6 +94,17 @@ export default class ApplicationController extends Controller.extend( @tracked layerGroupsStorage; + widowResize() { + return new Promise((resolve) => { + setTimeout(() => { + const resizeEvent = window.document.createEvent('UIEvents'); + resizeEvent.initUIEvent('resize', true, false, window, 0); + window.dispatchEvent(resizeEvent); + resolve(); + }, 1); + }); + } + // this action extracts query-param-friendly state of layer groups // for various paramable layers @action @@ -190,7 +201,7 @@ export default class ApplicationController extends Controller.extend( } @action - toggleLeftSideMenuVisibility() { + async toggleLeftSideMenuVisibility() { this.leftSideMenuVisibilty = !this.leftSideMenuVisibilty; const mapContainer = document.querySelector('.map-container'); @@ -199,6 +210,8 @@ export default class ApplicationController extends Controller.extend( mapContainer.setAttribute('class', 'map-container'); else mapContainer.setAttribute('class', 'map-container full-width'); + await this.widowResize(); + this.metrics.trackEvent('MatomoTagManager', { category: 'Toggled Layer Menu Visibility', action: 'Toggled Layer Menu Visibility', diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss index 43d5f700..9bd1c7ca 100644 --- a/app/styles/layouts/_l-default.scss +++ b/app/styles/layouts/_l-default.scss @@ -97,7 +97,7 @@ body { } &.full-width { - width: 100%; + width: 100% !important; } } From f855a203f1103207439de975313c02c0e961e73b Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Mon, 6 May 2024 11:22:18 -0400 Subject: [PATCH 6/7] Changed padding to vertically center the arrow --- app/styles/layouts/_l-default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss index 9bd1c7ca..23ae7dbe 100644 --- a/app/styles/layouts/_l-default.scss +++ b/app/styles/layouts/_l-default.scss @@ -255,7 +255,7 @@ body.index { left: 18rem; background-color: $white; margin-left: -4px; - padding: 0 rem-calc(6) rem-calc(3); + padding: 0 rem-calc(6) rem-calc(6); // box-shadow: -4px 4px 0 rgba(0,0,0,0.1); } @include breakpoint(xxlarge) { From 06a08c63526228cd409f83852c47d51f2b9654dd Mon Sep 17 00:00:00 2001 From: David Hochbaum Date: Wed, 8 May 2024 13:39:15 -0400 Subject: [PATCH 7/7] Corrected spelling error, removed !important and commented out code --- app/components/main-map.js | 4 ++-- app/components/print-view-controls.js | 6 +++--- app/controllers/application.js | 4 ++-- app/styles/layouts/_l-default.scss | 3 +-- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/components/main-map.js b/app/components/main-map.js index 35f646ac..f5c7dcb4 100644 --- a/app/components/main-map.js +++ b/app/components/main-map.js @@ -54,7 +54,7 @@ export default class MainMap extends Component { highlightedLayerId = null; - widowResize() { + windowResize() { return new Promise((resolve) => { setTimeout(() => { const resizeEvent = window.document.createEvent('UIEvents'); @@ -273,6 +273,6 @@ export default class MainMap extends Component { this.set('printSvc.enabled', true); - await this.widowResize(); + await this.windowResize(); } } diff --git a/app/components/print-view-controls.js b/app/components/print-view-controls.js index d25f486f..75acfe31 100644 --- a/app/components/print-view-controls.js +++ b/app/components/print-view-controls.js @@ -9,7 +9,7 @@ export default class PrintViewControls extends Component { @service metrics; - widowResize() { + windowResize() { return new Promise((resolve) => { setTimeout(() => { const resizeEvent = window.document.createEvent('UIEvents'); @@ -35,10 +35,10 @@ export default class PrintViewControls extends Component { this.set('printSvc.enabled', false); - await this.widowResize(); + await this.windowResize(); } async click() { - await this.widowResize(); + await this.windowResize(); } } diff --git a/app/controllers/application.js b/app/controllers/application.js index c437b6a6..84799092 100644 --- a/app/controllers/application.js +++ b/app/controllers/application.js @@ -94,7 +94,7 @@ export default class ApplicationController extends Controller.extend( @tracked layerGroupsStorage; - widowResize() { + windowResize() { return new Promise((resolve) => { setTimeout(() => { const resizeEvent = window.document.createEvent('UIEvents'); @@ -210,7 +210,7 @@ export default class ApplicationController extends Controller.extend( mapContainer.setAttribute('class', 'map-container'); else mapContainer.setAttribute('class', 'map-container full-width'); - await this.widowResize(); + await this.windowResize(); this.metrics.trackEvent('MatomoTagManager', { category: 'Toggled Layer Menu Visibility', diff --git a/app/styles/layouts/_l-default.scss b/app/styles/layouts/_l-default.scss index 23ae7dbe..b36cab4a 100644 --- a/app/styles/layouts/_l-default.scss +++ b/app/styles/layouts/_l-default.scss @@ -97,7 +97,7 @@ body { } &.full-width { - width: 100% !important; + width: 100%; } } @@ -256,7 +256,6 @@ body.index { background-color: $white; margin-left: -4px; padding: 0 rem-calc(6) rem-calc(6); - // box-shadow: -4px 4px 0 rgba(0,0,0,0.1); } @include breakpoint(xxlarge) { left: 18rem;