WIP: tip for dragging marker and KYH legend

UPRI-NOAH · Mar 15, 2023 · 5f5ed5c · 5f5ed5c
1 parent 4dbabe1
commit 5f5ed5c
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 1 deletion.
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html
@@ -5,3 +5,95 @@
   [selectedStyle]="mapStyle"
   (selectedStyleChange)="switchMapStyle($event)"
 ></noah-change-style-button>
+
+<button
+  class="
+    opacity-80
+    bg-white
+    text-gray-800
+    font-bold
+    py-1
+    px-1
+    ml-2
+    flex
+    items-end
+    absolute
+    justify-end
+    bottom-8
+    right-0
+    rounded
+    hover:bg-gray-200
+    focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50
+    mr-2
+    sm:text-sm
+    text-xs
+  "
+  (click)="openLegend()"
+  *ngIf="btnLegend"
+>
+  Legend
+</button>
+
+<div class="absolute bottom-8 mr-2 items-end right-0" *ngIf="kyhLegend">
+  <div class="flex items-center justify-center">
+    <div class="rounded shadow-lg py-3 px-4 bg-white bg-opacity-80">
+      <div
+        class="
+          cursor-pointer
+          absolute
+          -top-3.5
+          -right-3
+          mt-2
+          mr-2
+          dark:text-gray-100
+          text-black
+          transition
+          duration-150
+          ease-in-out
+          rounded-xl
+          bg-gray-200
+          hover:bg-gray-400
+        "
+        (click)="openLegend()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          class="icon icon-tabler icon-tabler-x pt-0.5"
+          viewBox="0 0 700 700"
+          stroke-width="2.5"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M490 294H210a14 14 0 0 1 0-28h280a14 14 0 0 1 0 28z" />
+        </svg>
+      </div>
+      <h1 class="text-sm font-bold leading-3 mt-2 text-gray-800">
+        Hazard Level
+      </h1>
+      <div class="">
+        <div class="flex items-center justify-between pt-3">
+          <div class="flex items-center">
+            <div class="xl:w-6 xl:h-6 h-2 w-2 bg-low"></div>
+            <p class="text-xs leading-3 text-low pl-2">Low</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between pt-3">
+          <div class="flex items-center">
+            <div class="xl:w-6 xl:h-6 h-2 w-2 bg-medium"></div>
+
+            <p class="text-xs leading-3 text-medium pl-2">Medium</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between pt-3">
+          <div class="flex items-center">
+            <div class="xl:w-6 xl:h-6 h-2 w-2 bg-high"></div>
+            <p class="text-xs leading-3 text-high pl-2">High</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts
@@ -30,6 +30,9 @@ export class MapKyhComponent implements OnInit {
   centerMarker!: Marker;
   mapStyle: MapStyle = 'terrain';
 
+  kyhLegend: boolean = true;
+  btnLegend: boolean = false;
+
   private _unsub = new Subject();
   private _changeStyle = new Subject();
 
@@ -349,6 +352,11 @@ export class MapKyhComponent implements OnInit {
       });
   }
 
+  openLegend() {
+    this.btnLegend = !this.btnLegend;
+    this.kyhLegend = !this.kyhLegend;
+  }
+
   showCurrentHazardLayer(currentHazard: HazardType) {
     if (!this.kyhService.isHazardLayer(currentHazard)) return;
 

diff --git a/src/app/features/know-your-hazards/pages/base/base.component.html b/src/app/features/know-your-hazards/pages/base/base.component.html
@@ -37,9 +37,16 @@
 >
 </noah-search>
 
+<!-- DRAGGABLE NOTE -->
+<section class="px-6 md:px-8 py-0">
+  <p class="mt-3 italic text-xs tracking-wide">
+    <span class="font-bold">Tip:</span> You may drag the pin to change the
+    location.
+  </p>
+</section>
 <!-- KYH -->
 <section class="px-6 md:px-8">
-  <header class="text-xl font-bold leading-tight mt-6 pb-2">
+  <header class="text-xl font-bold leading-tight mt-2 pb-2">
     Hazard Levels In Your Area
   </header>