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

DH3 Hide Sidebar #1186

Merged
merged 9 commits into from
May 8, 2024
Merged

DH3 Hide Sidebar #1186

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b91f04f
Added button to minimize and expand left side menu
dhochbaum-dcp Mar 28, 2024
680ba61
Added analytics, removed console.log
dhochbaum-dcp Apr 2, 2024
f788700
Update map width when toggling sidebar
bmarchena Apr 25, 2024
a07b39f
Merge branch 'develop' into DH3-collapse-sidebar
dhochbaum-dcp May 1, 2024
b87c49a
Removed duplicate import statement
dhochbaum-dcp May 1, 2024
6ac3532
Merge branch 'DH3-collapse-sidebar' of github.com:NYCPlanning/labs-zo…
bmarchena May 1, 2024
7c60973
Window resizes when sidebar is hidden in order to elimenate the white…
dhochbaum-dcp May 6, 2024
f855a20
Changed padding to vertically center the arrow
dhochbaum-dcp May 6, 2024
06a08c6
Corrected spelling error, removed !important and commented out code
dhochbaum-dcp May 8, 2024
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
37 changes: 37 additions & 0 deletions app/controllers/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,21 @@ export default class ApplicationController extends Controller.extend(

@service metrics;

@tracked leftSideMenuVisibilty = true;

@tracked layerGroupsStorage;

widowResize() {
dhochbaum-dcp marked this conversation as resolved.
Show resolved Hide resolved
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
Expand Down Expand Up @@ -186,4 +199,28 @@ export default class ApplicationController extends Controller.extend(
const values = Object.values(state);
return values.every(({ changed }) => changed === false);
}

@action
async 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');

await this.widowResize();

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'}`,
});
}
}
52 changes: 51 additions & 1 deletion app/styles/layouts/_l-default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@ body {
@include breakpoint(xlarge) {
width: calc(100% - 18rem);
}

&.full-width {
width: 100% !important;
dhochbaum-dcp marked this conversation as resolved.
Show resolved Hide resolved
}

}

body.index {
Expand Down Expand Up @@ -193,7 +198,7 @@ body.index {
);
}

& > .close-button {
& .close-button {
position: relative;
margin: 0;

Expand All @@ -214,6 +219,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(6);
// box-shadow: -4px 4px 0 rgba(0,0,0,0.1);
dhochbaum-dcp marked this conversation as resolved.
Show resolved Hide resolved
}
@include breakpoint(xxlarge) {
left: 18rem;
}
}
}

.content-is-closed {

.navigation-area {
Expand Down
1 change: 1 addition & 0 deletions app/styles/layouts/_l-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
42 changes: 27 additions & 15 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,17 @@
{{/if}}
<div class="site-main grid-x {{this.printSvc.printViewClasses}}">
<div class="navigation-area cell large-auto">
<MapResourceSearch />

{{#if this.leftSideMenuVisibilty}}
<MapResourceSearch />
{{/if}}

<div class="content-toggle-layer-palette-container">
<span aria-hidden="true" class="close-button" onclick={{action this.toggleLeftSideMenuVisibility}} style={{if this.leftSideMenuVisibilty "" "left: 0;"}}>
{{#if this.leftSideMenuVisibilty}}&lt;{{else}}&gt;{{/if}}
</span>
</div>

<div class="map-grid">
<Mapbox::LoadSpinner
@map={{this.mainMap.mapInstance}}
Expand All @@ -21,20 +31,22 @@
@onPrint={{action (mut this.printSvc.enabled) true}}
/>

<LayerPalette
@selectedZoning={{this.selectedZoning}}
@selectedOverlays={{this.selectedOverlays}}
@selectedFirm={{this.selectedFirm}}
@selectedPfirm={{this.selectedPfirm}}
@selectedCouncilDistricts={{this.selectedCouncilDistricts}}
@layerGroups={{this.model.layerGroupsObject}}
@isDefault={{this.isDefault}}
@resetQueryParams={{action this.setModelsToDefault}}
@setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}}
@undoSetAllLayerVisibilityToFalse={{action this.undoSetAllLayerVisibilityToFalse}}
@handleLayerGroupChange={{action this.handleLayerGroupChange}}
@showToggleLayersBackOn={{this.showToggleLayersBackOn}}
/>
{{#if this.leftSideMenuVisibilty}}
<LayerPalette
@selectedZoning={{this.selectedZoning}}
@selectedOverlays={{this.selectedOverlays}}
@selectedFirm={{this.selectedFirm}}
@selectedPfirm={{this.selectedPfirm}}
@selectedCouncilDistricts={{this.selectedCouncilDistricts}}
@layerGroups={{this.model.layerGroupsObject}}
@isDefault={{this.isDefault}}
@resetQueryParams={{action this.setModelsToDefault}}
@setAllLayerVisibilityToFalse={{action this.setAllLayerVisibilityToFalse}}
@undoSetAllLayerVisibilityToFalse={{action this.undoSetAllLayerVisibilityToFalse}}
@handleLayerGroupChange={{action this.handleLayerGroupChange}}
@showToggleLayersBackOn={{this.showToggleLayersBackOn}}
/>
{{/if}}
</div>
</div>
{{outlet}}
Expand Down
Loading