From b3d3d6f19de726514fd6fb53b5cd7fdd2bfb1f6f Mon Sep 17 00:00:00 2001
From: "joseph@dxw.com" <joseph@dxw.com>
Date: Mon, 18 Nov 2024 17:21:02 +0000
Subject: [PATCH] Format map and DAQI scale

DAQI scale
---
 app/assets/stylesheets/application.tailwind.css.scss | 12 ++++++++----
 app/views/forecasts/_map.html.erb                    |  6 +++---
 app/views/forecasts/_pollutant_selector.html.erb     |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
index f22e55c6..18ab787c 100644
--- 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
index 153a82aa..cd5cea71 100644
--- 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") %>
\ No newline at end of file
+<%= link_to("Learn more about the colour scale", health_advice_path, class: "text-sm text-blue-600 underline") %>
+<%= render "pollutant_selector" %>
\ No newline at end of file
diff --git a/app/views/forecasts/_pollutant_selector.html.erb b/app/views/forecasts/_pollutant_selector.html.erb
index 2d21d207..6a8f2e6d 100644
--- 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 %>