Cleanup 2

app/assets/stylesheets/application.tailwind.css.scss

@@ -1,78 +1,58 @@
 @import "leaflet/dist/leaflet.css";
 @import "@maptiler/geocoding-control/style.css";
 @import "leaflet.scss"; /* stylelint-disable-line scss/load-partial-extension */
+@import "daqi_levels.scss"; /* stylelint-disable-line scss/load-partial-extension */
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-.active {
-  @apply border-[3px] border-black border-solid border-b-0 -mb-[3px] bg-white;
+.tabs {
+  @apply flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black;
 }
 
-.after-today {
-  @apply text-black bg-white;
-}
-
-.daqi-level-1-today,
-.daqi-level-2-today,
-.daqi-level-3-today {
-  @apply text-black bg-white;
-}
-
-.inactive {
-  @apply border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed text-gray-400;
-}
-
-.low-level {
-  @apply text-black bg-lime-400;
-}
-
-.moderate-level {
-  @apply text-black bg-yellow-300;
-}
+.tab {
+  &.active {
+    @apply border-[3px] border-black border-solid border-b-0 -mb-[3px] bg-white;
+  }
 
-.high-level {
-  @apply text-white bg-red-500;
+  &.inactive {
+    @apply border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed text-gray-400;
+  }
 }
 
-.very-high-level {
-  @apply text-white bg-red-800;
+.sharing {
+  button {
+    @apply inline-flex px-8 py-2 rounded-md bg-slate-800 text-slate-50 w-full;
+  }
 }
 
-.daqi-level-4-today,
-.daqi-alert-after-today-selected-level-4 {
-  @apply text-black bg-yellow-300;
-}
+.learning {
+  @apply bg-gray-100 p-8 mt-12;
 
-.daqi-level-5-today,
-.daqi-alert-after-today-selected-level-5 {
-  @apply text-black bg-amber-200;
-}
+  header {
+    @apply text-xl font-bold text-center w-full mb-8;
+  }
 
-.daqi-level-6-today,
-.daqi-alert-after-today-selected-level-6 {
-  @apply text-black bg-yellow-500;
+  a {
+    @apply block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4;
+  }
 }
 
-.daqi-level-7-today,
-.daqi-alert-after-today-selected-level-7 {
-  @apply text-white bg-orange-500;
-}
+.subscribe {
+  @apply bg-gray-100 p-8 mt-1;
 
-.daqi-level-8-today,
-.daqi-alert-after-today-selected-level-8 {
-  @apply text-white bg-red-500;
-}
+  header {
+    @apply text-xl font-bold text-center w-full mb-8;
+  }
 
-.daqi-level-9-today,
-.daqi-alert-after-today-selected-level-9 {
-  @apply text-white bg-red-800;
+  a {
+    @apply block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4;
+  }
 }
 
-.daqi-level-10-today,
-.daqi-alert-after-today-selected-level-10 {
-  @apply text-white bg-stone-700;
+select {
+  @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
 }
 
 .home-page-link {

app/assets/stylesheets/daqi_levels.scss

@@ -0,0 +1,55 @@
+.daqi-low-level {
+  @apply text-black bg-lime-400;
+}
+
+.daqi-moderate-level {
+  @apply text-black bg-yellow-300;
+}
+
+.daqi-high-level {
+  @apply text-white bg-red-500;
+}
+
+.daqi-very-high-level {
+  @apply text-white bg-red-800;
+}
+
+.daqi-level-1 {
+  @apply text-black bg-lime-400;
+}
+
+.daqi-level-2 {
+  @apply text-black bg-green-400;
+}
+
+.daqi-level-3 {
+  @apply text-black bg-lime-600;
+}
+
+.daqi-level-4 {
+  @apply text-black bg-yellow-300;
+}
+
+.daqi-level-5 {
+  @apply text-black bg-amber-200;
+}
+
+.daqi-level-6 {
+  @apply text-black bg-yellow-500;
+}
+
+.daqi-level-7 {
+  @apply text-white bg-orange-500;
+}
+
+.daqi-level-8 {
+  @apply text-white bg-red-500;
+}
+
+.daqi-level-9 {
+  @apply text-white bg-red-800;
+}
+
+.daqi-level-10 {
+  @apply text-white bg-stone-700;
+}

app/components/day_tab_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: "tab py-4 flex-1 #{@day} mx-2 px-1 text-center #{classes}",
+<%= tag.div class: "tab py-4 flex-1 #{@day} mx-2 px-1 text-center #{@active ? 'active' : 'inactive'}",
   data: {
     date: @forecast.date.to_s,
     day: @day,
@@ -12,7 +12,7 @@
   <div class="date">
     <%= @forecast.date.strftime("%d %B") %>
   </div>
-  <div class="daqi-symbol flex justify-center items-center daqi-marker text-4xl py-2 h-14">
+  <div class="daqi-indicator flex justify-center items-center text-4xl py-2 h-14">
     <div class="size-9 rounded-full <%= daqi_indicator_colour_class %>"></div>
     <% if @forecast.air_pollution.value > 3 %>
       <%= render partial: "shared/icons/exclamation_triangle", locals: {forecast: @forecast} %>

app/components/day_tab_component.rb

@@ -5,28 +5,7 @@ def initialize(forecast:, day:, active: false)
     @active = active
   end
 
-  TAG_COLOURS = {
-    1 => "bg-lime-400",
-    2 => "bg-green-400",
-    3 => "bg-lime-600",
-    4 => "bg-yellow-300",
-    5 => "bg-amber-200",
-    6 => "bg-yellow-500",
-    7 => "bg-orange-500",
-    8 => "bg-red-500",
-    9 => "bg-red-800",
-    10 => "bg-stone-700"
-  }
-
   def daqi_indicator_colour_class
-    TAG_COLOURS.fetch(@forecast.air_pollution.value)
-  end
-
-  def classes
-    if @active
-      "active daqi-level-#{@forecast.air_pollution.value}-today"
-    else
-      "inactive after-today"
-    end
+    "daqi-level-#{@forecast.air_pollution.value}"
   end
 end

app/components/prediction_component.html.erb

@@ -19,13 +19,13 @@
           class="<%= guidance_visible? ? "hidden" : "visible" %>"
           data-prediction-target="showButton"
         >
-          <%= render partial: "shared/icons/chevron_down" %>
+          <%= render "shared/icons/chevron_down" %>
         </button>
         <button
           class="<%= !guidance_visible? ? "hidden" : "visible" %>"
           data-prediction-target="hideButton"
         >
-          <%= render partial: "shared/icons/chevron_up" %>
+          <%= render "shared/icons/chevron_up" %>
         </button>
       </div>
     </dd>

app/javascript/application.js

@@ -1,12 +1,4 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails";
 
-document.addEventListener("DOMContentLoaded", function () {
-  const hamburgerMenu = document.getElementById("hamburger-menu");
-  const menuList = document.getElementById("menu-list");
-
-  hamburgerMenu.addEventListener("click", function () {
-    menuList.classList.toggle("hidden");
-  });
-});
 import "./controllers";

app/javascript/controllers/index.js

@@ -2,7 +2,13 @@
 // Run that command whenever you add a new controller or create them with
 // ./bin/rails generate stimulus controllerName
 
-import { application } from "./application";
+import { Application } from "@hotwired/stimulus";
+
+const application = Application.start();
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus = application;
 
 import MapController from "./map_controller";
 application.register("map", MapController);
@@ -12,3 +18,6 @@ application.register("prediction", PredictionController);
 
 import TabController from "./tab_controller";
 application.register("tab", TabController);
+
+import NavigationController from "./navigation_controller";
+application.register("navigation", NavigationController);

app/javascript/controllers/navigation_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class NavigationController extends Controller {
+  static targets = ["menuList"];
+
+  toggleMenu() {
+    this.menuListTarget.classList.toggle("hidden");
+  }
+}

app/views/forecasts/_alert_guidance.html.erb

@@ -1,10 +1,10 @@
-<% if air_pollution_prediction.air_quality_alert %>
-  <div class="alert-guidance bg-<%= air_pollution_prediction.air_quality_alert.daqi_label.parameterize %>-alert-guidance-panel m-5 p-10">
+<% if @day_forecast.air_quality_alert %>
+  <div class="alert-guidance bg-<%= @day_forecast.air_quality_alert.daqi_label.parameterize %>-alert-guidance-panel m-5 p-10">
     <p class="font-semibold mb-4">
-      <%= t("air_quality_alert.#{air_pollution_prediction.air_quality_alert.daqi_level}.guidance.title") %>
+      <%= t("air_quality_alert.#{@day_forecast.air_quality_alert.daqi_level}.guidance.title") %>
     </p>
     <div class="text-xs">
-      <%= t("air_quality_alert.#{air_pollution_prediction.air_quality_alert.daqi_level}.guidance.detail_html") %>
+      <%= t("air_quality_alert.#{@day_forecast.air_quality_alert.daqi_level}.guidance.detail_html") %>
     </div>
   </div>
 <% end %>

app/views/forecasts/_forecast_tabs.html.erb

@@ -3,13 +3,13 @@
     Air pollution
   </header>
   <div
-    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black"
+    class="tabs"
     data-turbo-prefetch="false"
     data-map-target="daySelector"
     >
     <%= render(DayTabComponent.new(forecast: @forecasts.first, day: 'today', active: @day == 'today')) %>
     <%= render(DayTabComponent.new(forecast: @forecasts.second, day: 'tomorrow', active: @day == 'tomorrow')) %>
     <%= render(DayTabComponent.new(forecast: @forecasts.third, day: 'day_after_tomorrow', active: @day == 'day_after_tomorrow')) %>
   </div>
-  <%= render partial: "alert_guidance", locals: {air_pollution_prediction: @day_forecast} %>
+  <%= render "alert_guidance" %>
 </div>

app/views/forecasts/_learning.html.erb

@@ -1,8 +1,8 @@
-<div class="learning bg-gray-100 p-8 mt-12">
-  <header class="text-xl font-bold text-center w-full mb-8">
+<div class="learning">
+  <header>
     Do you know how you can protect yourself and others in your community?
   </header>
-  <a href="health_advice" class="block w-full py-4 px-8 rounded-md text-lg font-bold bg-gray-200 border border-gray-700 text-center mb-4">
+  <a href="health_advice">
     Learn more about health effects
   </a>
 </div>

app/views/forecasts/_location_selector.html.erb

@@ -1,10 +1,7 @@
-<div class="relative inline-block w-full text-left p-4">
-  <%= form_tag(false, method: :get) do %>
-    <%= select_tag :zone, 
-    options_for_select(Zone.all.order(:name).map(&:name), @zone.name),
-    class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
-    data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
-    %>
-    <%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
-  <% end %>
-</div>
+<%= form_tag(false, method: :get) do %>
+  <%= select_tag :zone, 
+  options_for_select(Zone.all.order(:name).map(&:name), @zone.name),
+  data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
+  %>
+  <%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
+<% end %>

app/views/forecasts/_map.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= render partial: "pollutant_selector" %>
+  <%= 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 class="w-full h-10">
     <%= render "shared/daqi_scale" %>

app/views/forecasts/_pollutant_selector.html.erb

@@ -1,15 +1,13 @@
-<div class="relative inline-block w-full text-left p-4">
-  <%= form_tag do %>
-    <%= select_tag :pollutant, 
-    options_for_select({
-      "All pollutants" => 'Total',
-      "Nitrogen Dioxide" => 'NO2',
-      "Particles < 2.5µm" => 'PM25',
-      "Particles < 10µm" => 'PM10',
-      "Ozone" => 'O3',
-    }),
-    data:{ action: "map#updateMap", "map-target": "pollutantSelector" },
-    class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-    %>
-  <% end %>
-</div>
+<%= form_tag do %>
+  <%= select_tag :pollutant, 
+  options_for_select({
+    "All pollutants" => 'Total',
+    "Nitrogen Dioxide" => 'NO2',
+    "Particles < 2.5µm" => 'PM25',
+    "Particles < 10µm" => 'PM10',
+    "Ozone" => 'O3',
+  }),
+  class: "my-4",
+  data: { action: "map#updateMap", "map-target": "pollutantSelector" }
+  %>
+<% end %>