Merge pull request #1499 from rodekruis/fix.breadcrumb-space

fix: prevent breadcrumbs truncation AB#24806

interfaces/IBF-dashboard/src/app/components/map-controls/map-controls.component.html

@@ -1,3 +1 @@
-<div>
-  <app-admin-level></app-admin-level>
-</div>
+<app-admin-level></app-admin-level>

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%;
 }

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 = `<details open><summary><div class="legend-header">${this.mapLegendService.getLegendTitle()}
+    <ion-icon class="icon-down" name="chevron-down-outline"></ion-icon>
+    <ion-icon class="icon-up" name="chevron-up-outline"></ion-icon></div>
+    </summary>`;
     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 += '</details>';
+
+    this.legendDiv.innerHTML = detailsString;
   }
 
   private isMultiLinePointLayer(layerName: IbfLayerName): boolean {

interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html

@@ -1,92 +1,69 @@
-<div class="ibf-map-layer-control">
-  <ion-menu-toggle
-    menu="layer-control"
-    [class.ion-hide]="hideLayerControlToggleButton"
+<div
+  id="layer-menu-container"
+  [ngStyle]="{ height: getLayerMenuContainerHeightInRem() + 'rem' }"
+>
+  <ion-button
+    class="ion-no-margin ion-justify-content-between"
+    color="ibf-no-alert-primary "
+    id="layer-menu-toggle-button"
+    (click)="toggleLayerMenu()"
   >
-    <ion-header>
-      <ion-toolbar color="ibf-no-alert-primary">
-        <ion-buttons slot="end">
-          <ion-icon name="chevron-down-outline"></ion-icon>
-        </ion-buttons>
-        <ion-title data-test="layers-toggle">Layers</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-menu-toggle>
-  <ion-menu
-    side="end"
-    type="overlay"
-    contentId="ibf-dashboard-map"
-    menuId="layer-control"
-    (ionDidOpen)="isLayerControlMenuOpen()"
-    (ionDidClose)="isLayerControlMenuOpen()"
-    data-test="layers-control-menu"
-    swipeGesture="false"
-  >
-    <ion-menu-toggle menu="layer-control">
-      <ion-header>
-        <ion-toolbar color="ibf-no-alert-primary">
-          <ion-buttons slot="end">
-            <ion-icon name="chevron-up-outline"></ion-icon>
-          </ion-buttons>
-          <ion-title>{{
-            'layers-menu.menu-toggle-label' | translate
-          }}</ion-title>
-        </ion-toolbar>
-      </ion-header>
-    </ion-menu-toggle>
-    <ion-content>
-      <ion-list class="ion-no-padding">
-        <ion-row
-          *ngFor="let layer of getLayersInOrder()"
-          class="ion-justify-content-between ion-nowrap"
-        >
-          <ion-item lines="none">
-            <ion-spinner *ngIf="layer.isLoading"></ion-spinner>
-            <div
-              *ngIf="!layer.isLoading"
+    <div>
+      <ion-text> {{ 'layers-menu.menu-toggle-label' | translate }}</ion-text
+      ><ion-icon
+        [name]="isLayerMenuOpen ? 'chevron-down-outline' : 'chevron-up-outline'"
+      ></ion-icon>
+    </div>
+  </ion-button>
+  <div *ngIf="isLayerMenuOpen" id="layer-menu">
+    <ion-list class="ion-no-padding">
+      <ion-row
+        *ngFor="let layer of getLayersInOrder()"
+        class="ion-justify-content-between ion-nowrap"
+      >
+        <ion-item lines="none">
+          <ion-spinner *ngIf="layer.isLoading"></ion-spinner>
+          <ng-container *ngIf="!layer.isLoading">
+            <ion-icon
+              *ngIf="isCheckBox(layer.group)"
+              [name]="layer.active ? 'checkbox' : 'square-outline'"
+              (click)="toggleLayer(layer)"
+              class="single-layer-toggler"
+            ></ion-icon>
+            <ion-icon
+              *ngIf="isRadioButton(layer.group)"
+              [name]="
+                layer.active
+                  ? 'radio-button-on-outline'
+                  : 'radio-button-off-outline'
+              "
               (click)="toggleLayer(layer)"
-              class="matrix-toggler ion-no-margin"
-              [class.matrix-check]="isCheckBox(layer.group)"
-              [class.matrix-radio]="isRadioButton(layer.group)"
-              slot="start"
-            >
-              <svg
-                *ngIf="isCheckBox(layer.group) && layer.active"
-                class="matrix-check-mark"
-                viewBox="-4 -4 35 35"
-                part="container"
-              >
-                <path d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
-              </svg>
-              <div
-                *ngIf="isRadioButton(layer.group) && layer.active"
-                class="matrix-radio-circle"
-              ></div>
-            </div>
-            <ion-label
-              class="ion-text-wrap ion-no-margin"
-              [title]="layer.label"
-              style="margin-left: 8px"
-            >
-              {{ layer.label }}
-            </ion-label>
-            <ion-button
-              slot="end"
-              fill="clear"
-              class="ion-no-margin info-button"
-              (click)="presentPopover($event, layer)"
-              [title]="'aggregates-component.more-information' | translate"
-            >
-              <ion-icon
-                color="ibf-no-alert-primary"
-                name="information-circle-outline"
-                data-test="matrix-icon"
-                class="info-icon"
-              ></ion-icon>
-            </ion-button>
-          </ion-item>
-        </ion-row>
-      </ion-list>
-    </ion-content>
-  </ion-menu>
+              class="single-layer-toggler"
+            ></ion-icon>
+          </ng-container>
+          <ion-label
+            class="ion-text-wrap ion-no-margin"
+            [title]="layer.label"
+            style="margin-left: 8px"
+          >
+            {{ layer.label }}
+          </ion-label>
+          <ion-button
+            slot="end"
+            fill="clear"
+            class="ion-no-margin info-button"
+            (click)="presentPopover($event, layer)"
+            [title]="'aggregates-component.more-information' | translate"
+          >
+            <ion-icon
+              color="ibf-no-alert-primary"
+              name="information-circle-outline"
+              data-test="matrix-icon"
+              class="info-icon"
+            ></ion-icon>
+          </ion-button>
+        </ion-item>
+      </ion-row>
+    </ion-list>
+  </div>
 </div>

interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.scss

@@ -1,105 +1,87 @@
-.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;
+$menu-width-small-res: 16vw;
+$toggle-button-bottom: 1.5rem;
+$toggle-button-right: 0;
+$toggle-button-height: 2.26rem;
+$line-height: 1.5rem;
+
+#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;
+  max-height: calc($toggle-button-height + ($line-height * 10));
+  @media (max-width: 1280px) {
+    width: $menu-width-small-res;
   }
 
-  ion-menu::part(backdrop) {
-    display: none;
-    background: transparent;
-  }
-
-  ion-menu-toggle {
-    cursor: pointer;
-
-    ion-toolbar {
-      --min-height: 36px;
-
-      ion-title {
-        font-size: 12px;
+  #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%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      ion-icon {
+        font-size: 1rem;
       }
     }
   }
-  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;
+  #layer-menu {
+    bottom: 0px;
+    overflow-y: auto;
 
-    ion-spinner {
-      width: 18px;
-      height: 18px;
+    ion-row {
+      min-height: $line-height;
+      border: 1px solid var(--ion-color-ibf-no-alert-primary);
+      border-top: none;
     }
 
-    .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;
+    ion-item {
+      width: 98%;
+      --min-height: $line-height;
+      --padding-bottom: 0;
+      --padding-top: 0;
+      --padding-start: 0.25rem;
+      --padding-end: 0.25rem;
+      --inner-padding-start: 0;
+      --inner-padding-end: 0;
+
+      ion-spinner {
+        width: 1rem;
+        height: 1rem;
       }
 
-      &.matrix-radio {
-        border-radius: 50%;
+      .single-layer-toggler {
+        font-size: 1.3rem;
+        cursor: pointer;
+        color: var(--ion-color-ibf-no-alert-primary);
       }
 
-      .matrix-check-mark {
-        width: 16px;
-        height: 16px;
-        background-color: var(--ion-color-ibf-no-alert-primary);
-        stroke: #fff;
-        stroke-width: 4px;
+      ion-label {
+        width: 80%;
+        font-size: 0.75rem;
       }
-      .matrix-radio-circle {
-        width: 14px;
-        height: 14px;
-        background-color: var(--ion-color-ibf-no-alert-primary);
-        border: 2px solid #fff;
-        border-radius: 50%;
-      }
-    }
 
-    ion-label {
-      width: 80%;
-      font-size: 12px;
-    }
-
-    .info-button {
-      --background-hover: #fff;
-      --ripple-color: #fff;
-    }
-    .info-icon {
-      font-size: 24px;
+      .info-button {
+        --background-hover: #fff;
+        --ripple-color: #fff;
+      }
+      .info-icon {
+        font-size: 1.3rem;
 
-      cursor: pointer;
+        cursor: pointer;
+      }
     }
   }
 }