Reformat DAQI scale

Update the scale to include labels for the four groups and to move the scale onto the map.
dxw · Dec 17, 2024 · a3d48f0 · a3d48f0
1 parent fec7734
commit a3d48f0
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 19 deletions.
diff --git a/app/assets/stylesheets/forecast-page.scss b/app/assets/stylesheets/forecast-page.scss
@@ -100,23 +100,60 @@ a.primary-cta {
 
   #map-wrapper {
     display: flex;
+    position: relative;
 
     .map {
       width: 100%;
-      height: 20rem;
+      height: 80vh;
     }
 
     .daqi-scale {
       display: flex;
-      flex-direction: column-reverse;
+      flex-direction: column;
+      position: absolute;
+      right: 0;
+      z-index: 1000;
+      top: 50px; // 50px for the search box
+      height: calc(
+        100% - 50px - 20px
+      ); // 50px for the search box, 20px for the bottom padding
+
+      > div {
+        flex: 1;
+        display: grid;
+
+        span {
+          grid-column: 2;
+          grid-row: 1 / 4;
+          writing-mode: vertical-lr;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 50%;
+          background-color: var(--main-colour-lightest);
+          padding: 2px;
+          border-bottom: 0.5px solid black;
+        }
 
-      div {
-        display: flex;
-        padding: 0.25rem 0;
-        justify-content: center;
-        align-items: center;
-        width: 2rem;
-        height: 10%;
+        &:first-child {
+          span {
+            grid-row: 1 / 1;
+          }
+        }
+
+        &:last-child {
+          span {
+            border-bottom: 0;
+          }
+        }
+
+        > div {
+          grid-column: 1;
+          width: 2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
       }
     }
 

diff --git a/app/views/forecasts/_map.html.erb b/app/views/forecasts/_map.html.erb
@@ -1,16 +1,28 @@
 <div id="map-wrapper">
   <div id="map" class="map" data-maptiler-api-key="<%= @maptiler_api_key %>" data-map-target="map"></div>
   <div class="daqi-scale">
-    <div class="daqi-level-1">1</div>
-    <div class="daqi-level-2">2</div>
-    <div class="daqi-level-3">3</div>
-    <div class="daqi-level-4">4</div>
-    <div class="daqi-level-5">5</div>
-    <div class="daqi-level-6">6</div>
-    <div class="daqi-level-7">7</div>
-    <div class="daqi-level-8">8</div>
-    <div class="daqi-level-9">9</div>
-    <div class="daqi-level-10">10</div>
+    <div class="daqi-group-very-high">
+      <span>Very High</span>
+      <div class="daqi-level-10">10</div>
+    </div>
+    <div class="daqi-group-high">
+      <span>High</span>
+      <div class="daqi-level-9">9</div>
+      <div class="daqi-level-8">8</div>
+      <div class="daqi-level-7">7</div>
+    </div>
+    <div class="daqi-group-moderate">
+      <span>Moderate</span>
+      <div class="daqi-level-6">6</div>
+      <div class="daqi-level-5">5</div>
+      <div class="daqi-level-4">4</div>
+    </div>
+    <div class="daqi-group-low">
+      <span>Low</span>
+      <div class="daqi-level-3">3</div>
+      <div class="daqi-level-2">2</div>
+      <div class="daqi-level-1">1</div>
+    </div>
   </div>
 </div>
 <p class="mt-1"><%= link_to("Learn more about the colour scale", health_advice_path, class: "a") %></p>