From e6b3435d3a465c45e4a8e9d56e9d3340d56f88a2 Mon Sep 17 00:00:00 2001 From: arsforza Date: Wed, 15 May 2024 18:58:05 +0200 Subject: [PATCH 01/13] feat: layer menu to custom div and move it to bottom right AB#28019 AB#28019 --- .../components/matrix/matrix.component.html | 159 ++++++++-------- .../components/matrix/matrix.component.scss | 170 +++++++++--------- .../app/components/matrix/matrix.component.ts | 16 ++ 3 files changed, 167 insertions(+), 178 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index 2e8971b0a..24fd24f90 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -1,92 +1,73 @@ -
- + Layers +
- - - - - - Layers - - - - - - - - - - - {{ - 'layers-menu.menu-toggle-label' | translate - }} - - - - - - - - -
- - - -
-
- + + + +
+ - {{ layer.label }} - - - - - - - - - + + +
+
+ + {{ layer.label }} + + + + + + + +
diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index bf7fc80c2..f2aa47a1b 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -1,105 +1,97 @@ -.ibf-map-layer-control { - position: absolute; - top: 10px; - bottom: 0; - right: 0; - width: 28%; - - ion-menu { - --width: 100%; - --background: transparent; - - ion-content { - --background: transparent; - } - - ion-content::part(scroll), - ion-content::part(background) { - height: max-content; - } +$z-index: 900; +$menu-width: 13vw; +$line-height: 2.26rem; +$toggle-button-bottom: 1rem; +$toggle-button-right: 0.5vW; + + +#layer-menu-container { + position: fixed; + z-index: $z-index; + bottom: $toggle-button-bottom; + right: $toggle-button-right; + width: $menu-width; + height: $line-height; + display: flex; + flex-direction: column; + + #layer-menu-toggle-button { + width: 100%; + height: $line-height;; + --border-radius: 0; } - ion-menu::part(backdrop) { - display: none; - background: transparent; - } + #layer-menu { + width: $menu-width; + bottom: 0px; - ion-menu-toggle { - cursor: pointer; + ion-row { + min-height: 36px; + border: 1px solid var(--ion-color-ibf-no-alert-primary); + border-top: none; + } - ion-toolbar { + ion-item { + width: 100%; --min-height: 36px; - - ion-title { - font-size: 12px; + --padding-bottom: 0; + --padding-top: 0; + --padding-start: 4px; + --padding-end: 4px; + --inner-padding-start: 0; + --inner-padding-end: 0; + + ion-spinner { + width: 18px; + height: 18px; } - } - } - ion-row { - min-height: 36px; - border: 1px solid var(--ion-color-ibf-no-alert-primary); - border-top: none; - } - ion-item { - width: 100%; - --min-height: 36px; - --padding-bottom: 0; - --padding-top: 0; - --padding-start: 4px; - --padding-end: 4px; - --inner-padding-start: 0; - --inner-padding-end: 0; - - ion-spinner { - width: 18px; - height: 18px; - } - - .matrix-toggler { - width: 18px; - height: 18px; - background-color: #fff; - border: 2px solid var(--ion-color-ibf-no-alert-primary); - cursor: pointer; - - &.matrix-check { - border-radius: 2px; + .matrix-toggler { + width: 18px; + height: 18px; + background-color: #fff; + border: 2px solid var(--ion-color-ibf-no-alert-primary); + cursor: pointer; + + &.matrix-check { + border-radius: 2px; + } + + &.matrix-radio { + border-radius: 50%; + } + + .matrix-check-mark { + width: 16px; + height: 16px; + background-color: var(--ion-color-ibf-no-alert-primary); + stroke: #fff; + stroke-width: 4px; + } + .matrix-radio-circle { + width: 14px; + height: 14px; + background-color: var(--ion-color-ibf-no-alert-primary); + border: 2px solid #fff; + border-radius: 50%; + } } - &.matrix-radio { - border-radius: 50%; + ion-label { + width: 80%; + font-size: 12px; } - .matrix-check-mark { - width: 16px; - height: 16px; - background-color: var(--ion-color-ibf-no-alert-primary); - stroke: #fff; - stroke-width: 4px; - } - .matrix-radio-circle { - width: 14px; - height: 14px; - background-color: var(--ion-color-ibf-no-alert-primary); - border: 2px solid #fff; - border-radius: 50%; + .info-button { + --background-hover: #fff; + --ripple-color: #fff; } - } + .info-icon { + font-size: 24px; - ion-label { - width: 80%; - font-size: 12px; - } - - .info-button { - --background-hover: #fff; - --ripple-color: #fff; - } - .info-icon { - font-size: 24px; - - cursor: pointer; + cursor: pointer; + } } } } + diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts index 437d053d3..b9c69b627 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts @@ -29,6 +29,10 @@ export class MatrixComponent implements OnDestroy { public IbfLayerGroup = IbfLayerGroup; public hideLayerControlToggleButton = false; + private LINE_HEIGHT = 2.26; + + public isLayerMenuOpen = false; + constructor( private analyticsService: AnalyticsService, public eventService: EventService, @@ -57,6 +61,7 @@ export class MatrixComponent implements OnDestroy { if (newLayerIndex >= 0) { this.layers.splice(newLayerIndex, 1, newLayer); } else { + this.isLayerMenuOpen = false; if (newLayer.group !== IbfLayerGroup.adminRegions) { this.layers.push(newLayer); } @@ -128,4 +133,15 @@ export class MatrixComponent implements OnDestroy { layerGroup, ); } + + public toggleLayerMenu(): void { + this.isLayerMenuOpen = !this.isLayerMenuOpen; + } + + public getLayerMenuContainerHeightInRem = (): number => { + if (!this.isLayerMenuOpen) { + return this.LINE_HEIGHT; + } + return (this.getLayersInOrder().length + 1) * this.LINE_HEIGHT + 0.625; + }; } From 776a46e85d3f933b0bf242515ced2be8464c84ed Mon Sep 17 00:00:00 2001 From: arsforza Date: Wed, 15 May 2024 19:01:45 +0200 Subject: [PATCH 02/13] fix: prettier --- .../src/app/components/matrix/matrix.component.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index f2aa47a1b..9cdd0f4d5 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -2,8 +2,7 @@ $z-index: 900; $menu-width: 13vw; $line-height: 2.26rem; $toggle-button-bottom: 1rem; -$toggle-button-right: 0.5vW; - +$toggle-button-right: 0.5vw; #layer-menu-container { position: fixed; @@ -17,7 +16,7 @@ $toggle-button-right: 0.5vW; #layer-menu-toggle-button { width: 100%; - height: $line-height;; + height: $line-height; --border-radius: 0; } @@ -94,4 +93,3 @@ $toggle-button-right: 0.5vW; } } } - From 158c8b4427345d8a7aa08db2d50568362266b7ab Mon Sep 17 00:00:00 2001 From: arsforza Date: Wed, 15 May 2024 19:07:35 +0200 Subject: [PATCH 03/13] fix: rm breadcrumbs max-width AB#28119 --- .../app/components/map-controls/map-controls.component.html | 4 +--- .../app/components/map-controls/map-controls.component.scss | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html index 3bca916e2..904b111e2 100644 --- a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html +++ b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html @@ -1,3 +1 @@ -
- -
+ diff --git a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss index dfa04dc36..ba5f20823 100644 --- a/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.scss @@ -1,7 +1,6 @@ -div { +app-admin-level { position: absolute; top: -10px; left: 45px; z-index: 500; - max-width: 60%; } From 3464205bdbead9eb96e514951c51a13f51752a73 Mon Sep 17 00:00:00 2001 From: arsforza Date: Wed, 15 May 2024 19:13:33 +0200 Subject: [PATCH 04/13] fix: rm visibility control AB#28019 --- .../src/app/components/matrix/matrix.component.html | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index 24fd24f90..3ffafaaf0 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -12,11 +12,7 @@ [name]="isLayerMenuOpen ? 'chevron-down-outline' : 'chevron-up-outline'" > -
+
Date: Thu, 16 May 2024 09:50:46 +0200 Subject: [PATCH 05/13] fix: limit menu height + add scroll AB#28123 --- .../src/app/components/matrix/matrix.component.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index 9cdd0f4d5..38dedbd7c 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -13,6 +13,7 @@ $toggle-button-right: 0.5vw; height: $line-height; display: flex; flex-direction: column; + max-height: calc(0.625rem + $line-height * 10); #layer-menu-toggle-button { width: 100%; @@ -22,8 +23,9 @@ $toggle-button-right: 0.5vw; #layer-menu { width: $menu-width; + max-height: calc(0.625rem + $line-height * 9); bottom: 0px; - + overflow-y: auto; ion-row { min-height: 36px; border: 1px solid var(--ion-color-ibf-no-alert-primary); @@ -31,7 +33,7 @@ $toggle-button-right: 0.5vw; } ion-item { - width: 100%; + width: 98%; --min-height: 36px; --padding-bottom: 0; --padding-top: 0; From 20401437ded1bbcd97b294a0093f7b04e0e9de61 Mon Sep 17 00:00:00 2001 From: arsforza Date: Thu, 16 May 2024 10:30:52 +0200 Subject: [PATCH 06/13] feat: make toggle text translatable AB#28126 --- .../src/app/components/matrix/matrix.component.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index 3ffafaaf0..d083d1bc4 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -7,7 +7,9 @@ color="ibf-no-alert-primary " id="layer-menu-toggle-button" (click)="toggleLayerMenu()" - >Layers{{ + 'layers-menu.menu-toggle-label' | translate + }} Date: Tue, 21 May 2024 14:05:27 +0200 Subject: [PATCH 07/13] fix: make menu wider on narrower screens AB#28127 --- .../src/app/components/matrix/matrix.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index 38dedbd7c..47f53eae1 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -1,5 +1,6 @@ $z-index: 900; $menu-width: 13vw; +$menu-width-small-res: 16vw; $line-height: 2.26rem; $toggle-button-bottom: 1rem; $toggle-button-right: 0.5vw; @@ -14,6 +15,9 @@ $toggle-button-right: 0.5vw; display: flex; flex-direction: column; max-height: calc(0.625rem + $line-height * 10); + @media (max-width: 1280px) { + width: $menu-width-small-res; + } #layer-menu-toggle-button { width: 100%; From 3e3b4081722359b0fd87e7dfb4c2927875c9c332 Mon Sep 17 00:00:00 2001 From: arsforza Date: Tue, 21 May 2024 16:12:06 +0200 Subject: [PATCH 08/13] fix: add space between to toggle AB#28128 --- .../app/components/matrix/matrix.component.html | 17 +++++++++-------- .../app/components/matrix/matrix.component.scss | 10 ++++++++++ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index d083d1bc4..783076dac 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -3,17 +3,18 @@ [ngStyle]="{ height: getLayerMenuContainerHeightInRem() + 'rem' }" > {{ - 'layers-menu.menu-toggle-label' | translate - }} + > +
+ {{ 'layers-menu.menu-toggle-label' | translate }} +
+
Date: Mon, 3 Jun 2024 09:59:56 +0200 Subject: [PATCH 09/13] feat: move btn right + left corner radius AB#28127 --- .../src/app/components/matrix/matrix.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index eb4a87370..823d66a86 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -3,7 +3,7 @@ $menu-width: 13vw; $menu-width-small-res: 16vw; $line-height: 2.26rem; $toggle-button-bottom: 1rem; -$toggle-button-right: 0.5vw; +$toggle-button-right: 0; #layer-menu-container { position: fixed; @@ -22,7 +22,7 @@ $toggle-button-right: 0.5vw; #layer-menu-toggle-button { width: 100%; height: $line-height; - --border-radius: 0; + --border-radius: 0.25rem 0 0 0; div { width: 100%; display: flex; From f0800109d9c3fc5ca38928cd70511bb0f079f3cd Mon Sep 17 00:00:00 2001 From: arsforza Date: Mon, 3 Jun 2024 11:45:47 +0200 Subject: [PATCH 10/13] feat: lower line height AB#28138 --- .../app/components/matrix/matrix.component.scss | 16 ++++++++-------- .../app/components/matrix/matrix.component.ts | 7 ++++--- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index 823d66a86..8486206cc 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -1,9 +1,10 @@ $z-index: 900; $menu-width: 13vw; $menu-width-small-res: 16vw; -$line-height: 2.26rem; -$toggle-button-bottom: 1rem; +$toggle-button-bottom: 1.5rem; $toggle-button-right: 0; +$toggle-button-height: 2.26rem; +$line-height: 1.5rem; #layer-menu-container { position: fixed; @@ -14,14 +15,14 @@ $toggle-button-right: 0; height: $line-height; display: flex; flex-direction: column; - max-height: calc(0.625rem + $line-height * 10); + max-height: calc($toggle-button-height + ($line-height * 10)); @media (max-width: 1280px) { width: $menu-width-small-res; } #layer-menu-toggle-button { width: 100%; - height: $line-height; + height: $toggle-button-height; --border-radius: 0.25rem 0 0 0; div { width: 100%; @@ -36,19 +37,18 @@ $toggle-button-right: 0; } #layer-menu { - width: $menu-width; - max-height: calc(0.625rem + $line-height * 9); bottom: 0px; overflow-y: auto; + ion-row { - min-height: 36px; + min-height: $line-height; border: 1px solid var(--ion-color-ibf-no-alert-primary); border-top: none; } ion-item { width: 98%; - --min-height: 36px; + --min-height: $line-height; --padding-bottom: 0; --padding-top: 0; --padding-start: 4px; diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts index b9c69b627..977f2b750 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts @@ -29,7 +29,8 @@ export class MatrixComponent implements OnDestroy { public IbfLayerGroup = IbfLayerGroup; public hideLayerControlToggleButton = false; - private LINE_HEIGHT = 2.26; + private BUTTON_HEIGHT = 2.26; + private LINE_HEIGHT = 1.5; public isLayerMenuOpen = false; @@ -140,8 +141,8 @@ export class MatrixComponent implements OnDestroy { public getLayerMenuContainerHeightInRem = (): number => { if (!this.isLayerMenuOpen) { - return this.LINE_HEIGHT; + return this.BUTTON_HEIGHT; } - return (this.getLayersInOrder().length + 1) * this.LINE_HEIGHT + 0.625; + return this.getLayersInOrder().length * (this.LINE_HEIGHT + 1); }; } From efd457c5398480e95d538927efdc76908e13e423 Mon Sep 17 00:00:00 2001 From: arsforza Date: Mon, 3 Jun 2024 15:04:31 +0200 Subject: [PATCH 11/13] fix: simplify code for layer toggles AB#28138 --- .../components/matrix/matrix.component.html | 39 +++++++++---------- .../components/matrix/matrix.component.scss | 37 +++--------------- 2 files changed, 24 insertions(+), 52 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index 783076dac..cfd3893f8 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -23,27 +23,24 @@ > -
- - - -
-
+ + + + Date: Mon, 3 Jun 2024 15:09:12 +0200 Subject: [PATCH 12/13] feat: resize layer rows AB#28138 --- .../src/app/components/matrix/matrix.component.scss | 7 ++++--- .../src/app/components/matrix/matrix.component.ts | 5 ++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss index 4a63c920c..79a087bea 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss @@ -23,6 +23,7 @@ $line-height: 1.5rem; #layer-menu-toggle-button { width: 100%; height: $toggle-button-height; + min-height: $toggle-button-height; --border-radius: 0.25rem 0 0 0; div { width: 100%; @@ -57,8 +58,8 @@ $line-height: 1.5rem; --inner-padding-end: 0; ion-spinner { - width: 18px; - height: 18px; + width: 1rem; + height: 1rem; } .single-layer-toggler { @@ -77,7 +78,7 @@ $line-height: 1.5rem; --ripple-color: #fff; } .info-icon { - font-size: 24px; + font-size: 1.3rem; cursor: pointer; } diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts index 977f2b750..9e9042431 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.ts @@ -143,6 +143,9 @@ export class MatrixComponent implements OnDestroy { if (!this.isLayerMenuOpen) { return this.BUTTON_HEIGHT; } - return this.getLayersInOrder().length * (this.LINE_HEIGHT + 1); + return ( + (this.getLayersInOrder().length + 1) * this.LINE_HEIGHT + + this.BUTTON_HEIGHT + ); }; } From 90b00373836576a6a1d2f83fc90b095996902e2a Mon Sep 17 00:00:00 2001 From: arsforza Date: Mon, 10 Jun 2024 14:34:04 +0200 Subject: [PATCH 13/13] feat: make legend collapsible AB#28499 --- .../src/app/components/map/map.component.ts | 10 ++++-- .../src/app/services/map-legend.service.ts | 8 ++--- interfaces/IBF-dashboard/src/global.scss | 35 +++++++++++++++++-- 3 files changed, 44 insertions(+), 9 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/map/map.component.ts b/interfaces/IBF-dashboard/src/app/components/map/map.component.ts index 0d8420ae7..2dbeb8967 100644 --- a/interfaces/IBF-dashboard/src/app/components/map/map.component.ts +++ b/interfaces/IBF-dashboard/src/app/components/map/map.component.ts @@ -330,7 +330,10 @@ export class MapComponent implements AfterViewInit, OnDestroy { index === self.findIndex((t) => t.name === value.name), ); // deduplicate based on name (for e.g. waterpoints_internal) - this.legendDiv.innerHTML = this.mapLegendService.getLegendTitle(); + let detailsString = `
${this.mapLegendService.getLegendTitle()} + +
+ `; for (const layer of layersToShow.sort(this.sortLayers)) { const elements = []; switch (layer.type) { @@ -372,9 +375,12 @@ export class MapComponent implements AfterViewInit, OnDestroy { } for (const element of elements) { - this.legendDiv.innerHTML += element; + detailsString += element; } } + detailsString += '
'; + + this.legendDiv.innerHTML = detailsString; } private isMultiLinePointLayer(layerName: IbfLayerName): boolean { diff --git a/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts b/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts index 0bb4aa7ba..65eee9e81 100644 --- a/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts +++ b/interfaces/IBF-dashboard/src/app/services/map-legend.service.ts @@ -25,7 +25,7 @@ enum SingleRowLegendType { providedIn: 'root', }) export class MapLegendService { - private legendDivTitle = `
Map Legend
`; + private legendDivTitle = `
Map Legend
`; public eventState: EventState; private country: Country; @@ -364,13 +364,13 @@ export class MapLegendService { const labelStyle = type === SingleRowLegendType.pin && label !== IbfLayerLabel.typhoonTrack - ? 'style="padding-top: 2px"' + ? 'style="padding-top: 2px;"' : ''; return ` - +
${pinImg}
- ${label} + ${label} `; }; diff --git a/interfaces/IBF-dashboard/src/global.scss b/interfaces/IBF-dashboard/src/global.scss index 7a17c23fe..c43b3f729 100644 --- a/interfaces/IBF-dashboard/src/global.scss +++ b/interfaces/IBF-dashboard/src/global.scss @@ -63,10 +63,39 @@ .info { padding: 6px 8px; - font: 12px Arial, Helvetica, sans-serif; + font: 0.75rem Arial, Helvetica, sans-serif; background: white; - box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); - border-radius: 5px; + box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.2); + border-radius: 0.3125rem; + width: 13vw; + + details { + summary { + list-style-type: none; + + .legend-header { + display: flex; + flex-direction: row; + justify-content: space-between; + cursor: pointer; + + .icon-up { + display: block; + } + .icon-down { + display: none; + } + } + } + &[open] summary { + .icon-down { + display: block; + } + .icon-up { + display: none; + } + } + } } .leaflet-popup-content-wrapper {