diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss index 87a10495..6994541b 100644 --- a/app/assets/stylesheets/application.tailwind.css.scss +++ b/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 { 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/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/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/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/application.js b/app/javascript/controllers/application.js deleted file mode 100644 index d6fe5ebe..00000000 --- a/app/javascript/controllers/application.js +++ /dev/null @@ -1,9 +0,0 @@ -import { Application } from "@hotwired/stimulus"; - -const application = Application.start(); - -// Configure Stimulus development experience -application.debug = false; -window.Stimulus = application; - -export { application }; diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index de130520..461971b4 100644 --- a/app/javascript/controllers/index.js +++ b/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); 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/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/_details.html.erb b/app/views/forecasts/_details.html.erb deleted file mode 100644 index ad664a82..00000000 --- a/app/views/forecasts/_details.html.erb +++ /dev/null @@ -1,9 +0,0 @@ -
- Index 4/10 -
-
- Protection required -
-
- Close windows and avoid going outdoors if possible. In particular avoid grassy open spaces. Consider wearing wrap-around sunglasses to stop pollen getting in your eyes when outdoors. -
diff --git a/app/views/forecasts/_forecast_tabs.html.erb b/app/views/forecasts/_forecast_tabs.html.erb index 78be7fe7..ad81273c 100644 --- a/app/views/forecasts/_forecast_tabs.html.erb +++ b/app/views/forecasts/_forecast_tabs.html.erb @@ -3,7 +3,7 @@ Air pollution
@@ -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/_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.html.erb b/app/views/forecasts/_location.html.erb deleted file mode 100644 index c42ed2f4..00000000 --- a/app/views/forecasts/_location.html.erb +++ /dev/null @@ -1,7 +0,0 @@ - -
- <%= render partial: "location_selector" %> - - Change location - -
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/_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/_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/_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/_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 @@ 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/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 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 @@ -
- -