Format map and DAQI scale

DAQI scale
dxw · Nov 18, 2024 · b3d3d6f · b3d3d6f
1 parent 857ec5b
commit b3d3d6f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
@@ -86,17 +86,21 @@ main {
   border-radius: 0 0 10px 10px;
 }
 
+.map {
+  @apply w-full h-80;
+}
+
 .daqi-scale {
-  @apply w-full h-10 flex flex-row text-center;
+  @apply flex flex-row;
 
   div {
-    @apply py-2 grow;
+    @apply flex aspect-square justify-center items-center;
+
+    width: 10%;
   }
 }
 
 .predictions {
-  @apply mb-2;
-
   > * {
     @apply py-2 border-b border-gray-300;
   }

diff --git a/app/views/forecasts/_map.html.erb b/app/views/forecasts/_map.html.erb
@@ -1,4 +1,4 @@
-<%= render "pollutant_selector" %>
-<div id="map" class="map w-full h-80" data-maptiler-api-key="<%= @maptiler_api_key %>" data-map-target="map"></div>
+<div id="map" class="map" data-maptiler-api-key="<%= @maptiler_api_key %>" data-map-target="map"></div>
 <%= render "shared/daqi_scale" %>
-<%= link_to("Learn more about the colour scale", health_advice_path, class: "text-sm text-blue-600 underline") %>
+<%= link_to("Learn more about the colour scale", health_advice_path, class: "text-sm text-blue-600 underline") %>
+<%= render "pollutant_selector" %>
diff --git a/app/views/forecasts/_pollutant_selector.html.erb b/app/views/forecasts/_pollutant_selector.html.erb
@@ -7,7 +7,7 @@
     "Particles < 10µm" => 'PM10',
     "Ozone" => 'O3',
   }),
-  class: "my-4",
+  class: "mt-5",
   data: { action: "map#updateMap", "map-target": "pollutantSelector" }
   %>
 <% end %>