From 2127de0838310bea8b1c18a5a1d53c02446e6e74 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 13:44:14 +0000 Subject: [PATCH 1/9] Move hamburger nav show/hide logic to Stimulus controller We've used Stimulus for other JS, and this makes functionality clearer. --- app/javascript/application.js | 8 -------- app/javascript/controllers/index.js | 3 +++ app/javascript/controllers/navigation_controller.js | 9 +++++++++ app/views/shared/_hamburger_menu.html.erb | 6 +++--- 4 files changed, 15 insertions(+), 11 deletions(-) create mode 100644 app/javascript/controllers/navigation_controller.js diff --git a/app/javascript/application.js b/app/javascript/application.js index 70ce59d1..554ca3e6 100644 --- a/app/javascript/application.js +++ b/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"; diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index de130520..9f3751b0 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -12,3 +12,6 @@ application.register("prediction", PredictionController); import TabController from "./tab_controller"; application.register("tab", TabController); + +import NavigationController from "./navigation_controller"; +application.register("navigation", NavigationController); diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js new file mode 100644 index 00000000..42b5b541 --- /dev/null +++ b/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"); + } +} diff --git a/app/views/shared/_hamburger_menu.html.erb b/app/views/shared/_hamburger_menu.html.erb index 97d20f9f..63986d96 100644 --- a/app/views/shared/_hamburger_menu.html.erb +++ b/app/views/shared/_hamburger_menu.html.erb @@ -1,8 +1,8 @@ -
- -
- <%= render partial: "forecasts/location" %> + <%= render partial: "forecasts/location_selector" %> <%= render partial: "forecasts/forecast_tabs", cerc_forecasts: @forecasts %> <%= render partial: "forecasts/map" %> <%= render partial: "forecasts/predictions", locals: { forecast: @day_forecast } %> From b66bd9cdcbb5f427952f6ef6dc9cd593684f8dcb Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 13:52:35 +0000 Subject: [PATCH 5/9] Simplify partial rendering calls We can take advantage of Rails' defaults to write the rendering calls for partials more succinctly. --- app/components/prediction_component.html.erb | 4 ++-- app/views/forecasts/_alert_guidance.html.erb | 8 ++++---- app/views/forecasts/_forecast_tabs.html.erb | 2 +- app/views/forecasts/_map.html.erb | 2 +- app/views/forecasts/_predictions.html.erb | 6 +++--- app/views/forecasts/show.html.erb | 14 +++++++------- app/views/layouts/application.html.erb | 4 ++-- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/app/components/prediction_component.html.erb b/app/components/prediction_component.html.erb index db7d567c..07bcefbd 100644 --- a/app/components/prediction_component.html.erb +++ b/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" %> diff --git a/app/views/forecasts/_alert_guidance.html.erb b/app/views/forecasts/_alert_guidance.html.erb index 174f4a76..e8d74388 100644 --- a/app/views/forecasts/_alert_guidance.html.erb +++ b/app/views/forecasts/_alert_guidance.html.erb @@ -1,10 +1,10 @@ -<% if air_pollution_prediction.air_quality_alert %> -
+<% if @day_forecast.air_quality_alert %> +

- <%= 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") %>

- <%= 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") %>
<% end %> diff --git a/app/views/forecasts/_forecast_tabs.html.erb b/app/views/forecasts/_forecast_tabs.html.erb index 78be7fe7..a017fa28 100644 --- a/app/views/forecasts/_forecast_tabs.html.erb +++ b/app/views/forecasts/_forecast_tabs.html.erb @@ -11,5 +11,5 @@ <%= 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')) %>
- <%= render partial: "alert_guidance", locals: {air_pollution_prediction: @day_forecast} %> + <%= render "alert_guidance" %> diff --git a/app/views/forecasts/_map.html.erb b/app/views/forecasts/_map.html.erb index 91804c3b..6ee3f0e0 100644 --- a/app/views/forecasts/_map.html.erb +++ b/app/views/forecasts/_map.html.erb @@ -1,5 +1,5 @@
- <%= render partial: "pollutant_selector" %> + <%= render "pollutant_selector" %>
<%= render "shared/daqi_scale" %> diff --git a/app/views/forecasts/_predictions.html.erb b/app/views/forecasts/_predictions.html.erb index 26c2c440..797d234f 100644 --- a/app/views/forecasts/_predictions.html.erb +++ b/app/views/forecasts/_predictions.html.erb @@ -1,5 +1,5 @@
- <%= render(PredictionComponent.new(prediction: forecast.uv)) %> - <%= render(PredictionComponent.new(prediction: forecast.pollen)) if forecast.pollen.valid? %> - <%= render "temperature_prediction", prediction: forecast.temperature %> + <%= render(PredictionComponent.new(prediction: @day_forecast.uv)) %> + <%= render(PredictionComponent.new(prediction: @day_forecast.pollen)) if @day_forecast.pollen.valid? %> + <%= render "temperature_prediction", prediction: @day_forecast.temperature %>
diff --git a/app/views/forecasts/show.html.erb b/app/views/forecasts/show.html.erb index 53bb9bbb..4444bab0 100644 --- a/app/views/forecasts/show.html.erb +++ b/app/views/forecasts/show.html.erb @@ -5,11 +5,11 @@
- <%= render partial: "forecasts/location_selector" %> - <%= render partial: "forecasts/forecast_tabs", cerc_forecasts: @forecasts %> - <%= render partial: "forecasts/map" %> - <%= render partial: "forecasts/predictions", locals: { forecast: @day_forecast } %> - <%= render partial: "sharing" %> + <%= render "location_selector" %> + <%= render "forecast_tabs" %> + <%= render "map" %> + <%= render "predictions" %> + <%= render "sharing" %> -<%= render partial: "learning" %> -<%= render partial: "subscribe" %> +<%= render "learning" %> +<%= render "subscribe" %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2a24e71a..ad61c671 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -18,8 +18,8 @@ <%= yield %>
- <%= render partial: "shared/navigation" %> - <%= render partial: "shared/terms_and_conditions" %> + <%= render "shared/navigation" %> + <%= render "shared/terms_and_conditions" %>
From 19f57bb6d2b550adbd52399f960796447de13474 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 13:50:45 +0000 Subject: [PATCH 6/9] Rename footer navigation partial for clarity The footer navigation was just called 'navigation' which made it easy to confuse with the header navigation --- app/views/layouts/application.html.erb | 2 +- .../{_navigation.html.erb => _footer_navigation.html.erb} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename app/views/shared/{_navigation.html.erb => _footer_navigation.html.erb} (100%) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ad61c671..8ec36422 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -18,7 +18,7 @@ <%= yield %>
- <%= render "shared/navigation" %> + <%= render "shared/footer_navigation" %> <%= render "shared/terms_and_conditions" %>
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_footer_navigation.html.erb similarity index 100% rename from app/views/shared/_navigation.html.erb rename to app/views/shared/_footer_navigation.html.erb From 53d739bad8e601c1f620dbeea90bb8f90c490b08 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 16:23:11 +0000 Subject: [PATCH 7/9] Standardise DAQI styling Rather than specifying the colours in the forecast tabs and the colours in the DAQI scale separately, we can define them all in CSS and then apply the same styles in both cases. This will make them easier to update in future. --- .../stylesheets/application.tailwind.css.scss | 58 +------------------ app/assets/stylesheets/daqi_levels.scss | 55 ++++++++++++++++++ app/views/shared/_daqi_scale.html.erb | 20 +++---- spec/components/day_tab_component_spec.rb | 42 +++++++------- 4 files changed, 87 insertions(+), 88 deletions(-) create mode 100644 app/assets/stylesheets/daqi_levels.scss diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss index 87a10495..8f22046a 100644 --- a/app/assets/stylesheets/application.tailwind.css.scss +++ b/app/assets/stylesheets/application.tailwind.css.scss @@ -1,6 +1,7 @@ @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; @@ -14,67 +15,10 @@ @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; -} - -.high-level { - @apply text-white bg-red-500; -} - -.very-high-level { - @apply text-white bg-red-800; -} - -.daqi-level-4-today, -.daqi-alert-after-today-selected-level-4 { - @apply text-black bg-yellow-300; -} - -.daqi-level-5-today, -.daqi-alert-after-today-selected-level-5 { - @apply text-black bg-amber-200; -} - -.daqi-level-6-today, -.daqi-alert-after-today-selected-level-6 { - @apply text-black bg-yellow-500; -} - -.daqi-level-7-today, -.daqi-alert-after-today-selected-level-7 { - @apply text-white bg-orange-500; -} - -.daqi-level-8-today, -.daqi-alert-after-today-selected-level-8 { - @apply text-white bg-red-500; -} - -.daqi-level-9-today, -.daqi-alert-after-today-selected-level-9 { - @apply text-white bg-red-800; -} - -.daqi-level-10-today, -.daqi-alert-after-today-selected-level-10 { - @apply text-white bg-stone-700; -} - .home-page-link { color: revert; } diff --git a/app/assets/stylesheets/daqi_levels.scss b/app/assets/stylesheets/daqi_levels.scss new file mode 100644 index 00000000..3e53d3c4 --- /dev/null +++ b/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; +} diff --git a/app/views/shared/_daqi_scale.html.erb b/app/views/shared/_daqi_scale.html.erb index 8a2ac827..00d3f14b 100644 --- a/app/views/shared/_daqi_scale.html.erb +++ b/app/views/shared/_daqi_scale.html.erb @@ -1,12 +1,12 @@
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
diff --git a/spec/components/day_tab_component_spec.rb b/spec/components/day_tab_component_spec.rb index 0963690d..0b6a2579 100644 --- a/spec/components/day_tab_component_spec.rb +++ b/spec/components/day_tab_component_spec.rb @@ -9,8 +9,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 1), day: :today) } - it "returns _bg-lime-400_" do - expect(component.daqi_indicator_colour_class).to eq("bg-lime-400") + it "returns _daqi-level-1_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-1") end end @@ -19,8 +19,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 2), day: :today) } - it "returns _bg-green-400_" do - expect(component.daqi_indicator_colour_class).to eq("bg-green-400") + it "returns _daqi-level-2_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-2") end end @@ -29,8 +29,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 3), day: :today) } - it "returns _bg-lime-600_" do - expect(component.daqi_indicator_colour_class).to eq("bg-lime-600") + it "returns _daqi-level-3_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-3") end end @@ -39,8 +39,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 4), day: :today) } - it "returns _bg-yellow-300_" do - expect(component.daqi_indicator_colour_class).to eq("bg-yellow-300") + it "returns _daqi-level-4_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-4") end end @@ -49,8 +49,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 5), day: :today) } - it "returns _bg-amber-200_" do - expect(component.daqi_indicator_colour_class).to eq("bg-amber-200") + it "returns _daqi-level-5_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-5") end end @@ -59,8 +59,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 6), day: :today) } - it "returns _bg-yellow-500_" do - expect(component.daqi_indicator_colour_class).to eq("bg-yellow-500") + it "returns _daqi-level-6_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-6") end end @@ -69,8 +69,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 7), day: :today) } - it "returns _bg-orange-500_" do - expect(component.daqi_indicator_colour_class).to eq("bg-orange-500") + it "returns _daqi-level-7_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-7") end end @@ -79,8 +79,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 8), day: :today) } - it "returns _bg-red-500_" do - expect(component.daqi_indicator_colour_class).to eq("bg-red-500") + it "returns _daqi-level-8_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-8") end end @@ -89,8 +89,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 9), day: :today) } - it "returns _bg-red-800_" do - expect(component.daqi_indicator_colour_class).to eq("bg-red-800") + it "returns _daqi-level-9_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-9") end end @@ -99,8 +99,8 @@ DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 10), day: :today) } - it "returns _bg-stone-700_" do - expect(component.daqi_indicator_colour_class).to eq("bg-stone-700") + it "returns _daqi-level-10_" do + expect(component.daqi_indicator_colour_class).to eq("daqi-level-10") end end end @@ -112,7 +112,7 @@ } it "returns the classes for today's tab" do - expect(component.classes).to eq("active daqi-level-1-today") + expect(component.classes).to eq("active daqi-level-1") end end From 380c1d1476c0c7fb77c83f58cde088dd80cca21d Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 16:24:25 +0000 Subject: [PATCH 8/9] Simplify tab component CSS classes We can simplify the tab component quite a bit to make it easier to manage. --- .../stylesheets/application.tailwind.css.scss | 16 +++++++------ app/components/day_tab_component.html.erb | 4 ++-- app/components/day_tab_component.rb | 23 +------------------ app/views/forecasts/_forecast_tabs.html.erb | 2 +- spec/components/day_tab_component_spec.rb | 22 ------------------ 5 files changed, 13 insertions(+), 54 deletions(-) diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss index 8f22046a..3bd32f64 100644 --- a/app/assets/stylesheets/application.tailwind.css.scss +++ b/app/assets/stylesheets/application.tailwind.css.scss @@ -7,16 +7,18 @@ @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; -} +.tab { + &.active { + @apply border-[3px] border-black border-solid border-b-0 -mb-[3px] bg-white; + } -.inactive { - @apply border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed text-gray-400; + &.inactive { + @apply border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed text-gray-400; + } } .home-page-link { diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb index 33bedf4a..c4c3be92 100644 --- a/app/components/day_tab_component.html.erb +++ b/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 @@
<%= @forecast.date.strftime("%d %B") %>
-
+
<% if @forecast.air_pollution.value > 3 %> <%= render partial: "shared/icons/exclamation_triangle", locals: {forecast: @forecast} %> diff --git a/app/components/day_tab_component.rb b/app/components/day_tab_component.rb index d81516a5..1c1b6156 100644 --- a/app/components/day_tab_component.rb +++ b/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 diff --git a/app/views/forecasts/_forecast_tabs.html.erb b/app/views/forecasts/_forecast_tabs.html.erb index a017fa28..ad81273c 100644 --- a/app/views/forecasts/_forecast_tabs.html.erb +++ b/app/views/forecasts/_forecast_tabs.html.erb @@ -3,7 +3,7 @@ Air pollution
diff --git a/spec/components/day_tab_component_spec.rb b/spec/components/day_tab_component_spec.rb index 0b6a2579..76f2121b 100644 --- a/spec/components/day_tab_component_spec.rb +++ b/spec/components/day_tab_component_spec.rb @@ -104,26 +104,4 @@ end end end - - describe "classes" do - context "when the day is today" do - let(:component) { - DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 1), day: :today, active: true) - } - - it "returns the classes for today's tab" do - expect(component.classes).to eq("active daqi-level-1") - end - end - - context "when the day is not today" do - let(:component) { - DayTabComponent.new(forecast: FactoryBot.build(:forecast, air_pollution_level: 1), day: :tomorrow) - } - - it "returns the classes for the after today tabs" do - expect(component.classes).to eq("inactive after-today") - end - end - end end From 6d1f890ddf21f4e7a62412676021388024ac19b9 Mon Sep 17 00:00:00 2001 From: "joseph@dxw.com" Date: Mon, 18 Nov 2024 16:21:23 +0000 Subject: [PATCH 9/9] Move styles to stylesheet Move the Tailwind class styles from individual elements to the stylesheet. This makes the HTML easier to understand. Eventually we may replace Tailwind entirely. --- .../stylesheets/application.tailwind.css.scss | 34 +++++++++++++++++++ app/views/forecasts/_learning.html.erb | 6 ++-- .../forecasts/_location_selector.html.erb | 17 ++++------ .../forecasts/_pollutant_selector.html.erb | 28 +++++++-------- app/views/forecasts/_sharing.html.erb | 2 +- app/views/forecasts/_subscribe.html.erb | 6 ++-- 6 files changed, 61 insertions(+), 32 deletions(-) diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss index 3bd32f64..6994541b 100644 --- a/app/assets/stylesheets/application.tailwind.css.scss +++ b/app/assets/stylesheets/application.tailwind.css.scss @@ -21,6 +21,40 @@ } } +.sharing { + button { + @apply inline-flex px-8 py-2 rounded-md bg-slate-800 text-slate-50 w-full; + } +} + +.learning { + @apply bg-gray-100 p-8 mt-12; + + header { + @apply text-xl font-bold text-center w-full mb-8; + } + + 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; + } +} + +.subscribe { + @apply bg-gray-100 p-8 mt-1; + + header { + @apply text-xl font-bold text-center w-full mb-8; + } + + 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; + } +} + +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 { color: revert; } diff --git a/app/views/forecasts/_learning.html.erb b/app/views/forecasts/_learning.html.erb index 66610d1c..194604e3 100644 --- a/app/views/forecasts/_learning.html.erb +++ b/app/views/forecasts/_learning.html.erb @@ -1,8 +1,8 @@ -
-
+
+
Do you know how you can protect yourself and others in your community?
- + Learn more about health effects
diff --git a/app/views/forecasts/_location_selector.html.erb b/app/views/forecasts/_location_selector.html.erb index 24a213f0..f541f36e 100644 --- a/app/views/forecasts/_location_selector.html.erb +++ b/app/views/forecasts/_location_selector.html.erb @@ -1,10 +1,7 @@ -
- <%= 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 %> -
+<%= 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 %> diff --git a/app/views/forecasts/_pollutant_selector.html.erb b/app/views/forecasts/_pollutant_selector.html.erb index 195c5489..2d21d207 100644 --- a/app/views/forecasts/_pollutant_selector.html.erb +++ b/app/views/forecasts/_pollutant_selector.html.erb @@ -1,15 +1,13 @@ -
- <%= 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 %> -
+<%= 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 %> diff --git a/app/views/forecasts/_sharing.html.erb b/app/views/forecasts/_sharing.html.erb index 96e3b685..12bd22d8 100644 --- a/app/views/forecasts/_sharing.html.erb +++ b/app/views/forecasts/_sharing.html.erb @@ -1,5 +1,5 @@