Merge pull request #136 from dxw/fixes-2

Design fixes

Gemfile

@@ -4,6 +4,7 @@ source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby "3.3.6"
 
+gem "active_link_to", "~> 1.0" # Active links with CSS classes
 gem "bootsnap", ">= 1.1.0", require: false
 gem "high_voltage"
 gem "jbuilder", "~> 2.11"

Gemfile.lock

@@ -45,6 +45,9 @@ GEM
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
+    active_link_to (1.0.5)
+      actionpack
+      addressable
     activejob (7.2.2)
       activesupport (= 7.2.2)
       globalid (>= 0.3.6)
@@ -452,6 +455,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  active_link_to (~> 1.0)
   better_errors
   binding_of_caller
   bootsnap (>= 1.1.0)

app/assets/config/manifest.js

@@ -1,7 +1,5 @@
 //= link_tree ../images
 
-// include our initial GOV.UK based stylesheets for now whilst
-//  migrating to ESBuild bundled assets...
-//= link_directory ../stylesheets .css
+//= link_directory ../builds .css
 
 //= link_tree ../builds

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

@@ -5,6 +5,8 @@
 @import "leaflet.scss"; /* stylelint-disable-line scss/load-partial-extension */
 @import "daqi-levels.scss"; /* stylelint-disable-line scss/load-partial-extension */
 @import "share.scss"; /* stylelint-disable-line scss/load-partial-extension */
+@import "header.scss"; /* stylelint-disable-line scss/load-partial-extension */
+@import "footer.scss"; /* stylelint-disable-line scss/load-partial-extension */
 
 @tailwind base;
 @tailwind components;
@@ -15,62 +17,28 @@
   --main-colour-light: #dae7f7;
 }
 
-header.site-header {
-  background-color: var(--main-colour);
-
-  @apply flex flex-row p-4;
-
-  .site-title {
-    @apply text-white flex-auto;
-
-    .site-name {
-      @apply text-2xl font-bold block;
-    }
-
-    .site-strapline {
-      @apply text-sm block;
-    }
-  }
-
-  nav {
-    @apply text-white flex-auto text-right;
-
-    button {
-      @apply text-5xl;
-    }
-
-    ul {
-      @apply text-sm;
-    }
-  }
-}
-
-main {
-  padding: 1rem;
-}
-
 .tabs {
-  @apply flex flex-row items-stretch border-b-[2px] border-black;
+  @apply flex flex-row items-stretch border-b-[1px] border-zinc-500 mx-4;
 
   border-radius: 10px 10px 0 0;
   gap: 0.5rem;
 }
 
 .tab {
-  @apply flex-1 px-1 py-4 text-xs text-center font-bold border-[2px];
+  @apply flex-1 px-1 py-4 text-xs text-center font-bold border-[1px] cursor-pointer;
 
   border-radius: 10px 10px 0 0;
 
   &.active {
-    @apply border-black border-solid border-b-0 -mb-[2px] bg-white;
+    @apply border-zinc-500 border-solid border-b-0 -mb-[1px];
   }
 
   &.inactive {
-    @apply border-gray-400 border-dashed border-b-0 text-gray-400;
+    @apply border-gray-400 border-dashed border-b-0 text-gray-400 bg-white;
   }
 
   .daqi-indicator {
-    @apply size-9 rounded-full mx-auto my-1 flex justify-center items-center;
+    @apply size-7 rounded-full mx-auto my-1 flex justify-center items-center p-[3px];
   }
 
   .daqi-label {
@@ -83,9 +51,8 @@ main {
 }
 
 .tab-contents {
-  padding: 0.5rem;
-  border: 2px solid black;
-  border-top: 0;
+  @apply p-4 mx-4 border-[1px] border-t-0 border-zinc-500;
+
   border-radius: 0 0 10px 10px;
 }
 
@@ -117,23 +84,23 @@ main {
   }
 }
 
+.forecast-timestamp {
+  @apply text-xs text-gray-500 text-center mt-2 block italic;
+}
+
 .sharing {
   button {
-    @apply flex mx-auto mt-6 px-8 py-2 rounded-md text-white justify-center;
+    @apply flex mx-auto mt-2 px-8 py-2 rounded-md text-white justify-center;
 
     background-color: var(--main-colour);
   }
 }
 
-.forecast-timestamp {
-  @apply text-sm text-center text-gray-500 mt-2 block;
-}
-
 .learning,
 .subscribe {
   background-color: var(--main-colour-light);
 
-  @apply p-8 mt-2 text-center;
+  @apply p-8 mt-4 text-center;
 
   header {
     @apply font-bold;
@@ -146,15 +113,9 @@ main {
   }
 }
 
-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;
-}
-
 .text-block {
+  @apply p-4;
+
   h1 {
     @apply text-2xl font-bold mt-5 mb-3;
   }
@@ -198,4 +159,49 @@ select {
       @apply px-2 py-1 border border-gray-400;
     }
   }
+
+  details {
+    summary {
+      cursor: pointer;
+
+      &::marker {
+        content: none; /* Hide the default marker */
+      }
+
+      h3 {
+        margin: 0;
+
+        &::after {
+          content: "\002B"; /* Unicode character for plus sign */
+          display: flex;
+          width: 1.5rem;
+          aspect-ratio: 1;
+          float: right;
+          align-items: center;
+          justify-content: center;
+          padding-bottom: 3px;
+          font-size: 1.3rem;
+          line-height: 0;
+          font-weight: normal;
+          color: black;
+          border: 1px solid black;
+          border-radius: 100%;
+        }
+      }
+    }
+
+    &[open] summary h3 {
+      margin-bottom: 1rem;
+
+      &::after {
+        content: "\2212"; /* Unicode character for minus sign */
+      }
+    }
+  }
+}
+
+.how-forecasts-are-made {
+  @apply py-8 px-4;
+
+  background-color: #eee;
 }

app/assets/stylesheets/footer.scss

@@ -0,0 +1,33 @@
+.site-footer {
+  @apply text-white py-8 px-6;
+
+  background-color: var(--main-colour);
+
+  nav {
+    li {
+      @apply py-2;
+
+      a.active {
+        @apply font-bold underline;
+      }
+    }
+  }
+
+  .terms-and-conditions {
+    @apply mt-6;
+
+    font-size: 0; /* Remove whitespace between inline-block elements */
+
+    li {
+      @apply text-xs inline-block border-r-white border-r px-2;
+
+      &:first-child {
+        @apply pl-0;
+      }
+
+      &:last-child {
+        @apply border-0;
+      }
+    }
+  }
+}

app/assets/stylesheets/header.scss

@@ -0,0 +1,55 @@
+.site-header {
+  background-color: var(--main-colour);
+
+  @apply flex flex-row flex-wrap p-4;
+
+  .site-title {
+    @apply text-white text-center;
+
+    .site-name {
+      @apply text-4xl font-bold block;
+    }
+
+    .site-strapline {
+      @apply text-xs block;
+    }
+  }
+
+  button {
+    @apply text-5xl flex-auto text-white text-right;
+
+    line-height: 0;
+
+    &::before {
+      content: "☰";
+      font-size: 4rem;
+      bottom: 0.25rem;
+      position: relative;
+    }
+
+    &.menu-open {
+      &::before {
+        content: "✕";
+        font-size: 3.25rem;
+        bottom: 0;
+        right: 8px;
+      }
+    }
+  }
+
+  nav {
+    @apply text-white w-full;
+
+    ul {
+      @apply text-xl my-4;
+
+      li {
+        @apply pt-4;
+
+        a.active {
+          @apply font-bold underline;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/leaflet.scss

@@ -20,3 +20,41 @@
   /* From node_modules/leaflet.fullscreen/icon-fullscreen.svg */
   background-image: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 26 52" xmlns="http://www.w3.org/2000/svg"><path d="M20.6 36.7H16a.9.9 0 0 1-.8-.8v-4.5c0-.2.2-.4.4-.4h1.4c.3 0 .5.2.5.4v3h3c.2 0 .4.2.4.5v1.4c0 .2-.2.4-.4.4zm-9.9-.8v-4.5c0-.2-.2-.4-.4-.4H8.9c-.3 0-.5.2-.5.4v3h-3c-.2 0-.4.2-.4.5v1.4c0 .2.2.4.4.4H10c.4 0 .8-.4.8-.8zm0 10.7V42c0-.4-.4-.8-.8-.8H5.4c-.2 0-.4.2-.4.4v1.4c0 .3.2.5.4.5h3v3c0 .2.2.4.5.4h1.4c.2 0 .4-.2.4-.4zm6.9 0v-3h3c.2 0 .4-.2.4-.5v-1.4c0-.2-.2-.4-.4-.4H16c-.4 0-.8.4-.8.8v4.5c0 .2.2.4.4.4h1.4c.3 0 .5-.2.5-.4zM5 10.3V5.9c0-.5.4-.9.9-.9h4.4c.2 0 .4.2.4.4V7c0 .2-.2.4-.4.4h-3v3c0 .2-.2.4-.4.4H5.4a.4.4 0 0 1-.4-.4zm10.3-4.9V7c0 .2.2.4.4.4h3v3c0 .2.2.4.4.4h1.5c.2 0 .4-.2.4-.4V5.9c0-.5-.4-.9-.9-.9h-4.4c-.2 0-.4.2-.4.4zm5.3 9.9H19c-.2 0-.4.2-.4.4v3h-3c-.2 0-.4.2-.4.4v1.5c0 .2.2.4.4.4h4.4c.5 0 .9-.4.9-.9v-4.4c0-.2-.2-.4-.4-.4zm-9.9 5.3V19c0-.2-.2-.4-.4-.4h-3v-3c0-.2-.2-.4-.4-.4H5.4c-.2 0-.4.2-.4.4v4.4c0 .5.4.9.9.9h4.4c.2 0 .4-.2.4-.4z" fill="currentColor"/></svg>');
 }
+
+.leaflet-pane {
+  .maplibregl-ctrl-attrib {
+    display: none; /* Hide duplicate attributions */
+  }
+}
+
+.leaflet-container {
+  a {
+    left: 2px !important;
+
+    img {
+      width: 50px; /* Make the Maptiler logo smaller to fit on mobile */
+    }
+  }
+}
+
+.leaflet-control:not(.leaflet-control-attribution) {
+  border: 2px solid rgb(0 0 0 / 20%);
+  box-shadow: none;
+  border-radius: 4px;
+}
+
+.leaflet-top:has(.leaflet-ctrl-geocoder) {
+  max-width: calc(100% - 60px);
+
+  .leaflet-ctrl-geocoder {
+    max-width: 100%;
+
+    form {
+      max-width: 100%;
+
+      input {
+        height: 30px;
+      }
+    }
+  }
+}

app/components/day_tab_component.html.erb

@@ -1,4 +1,4 @@
-<%= tag.div class: "tab #{@day} #{@active ? 'active' : 'inactive'}",
+<%= tag.div class: "tab #{@day} #{@active ? 'active' : 'inactive'} #{@forecast.air_pollution.label == 'LOW' ? 'bg-white' : daqi_indicator_colour_class}",
   data: {
     date: @forecast.date.to_s,
     day: @day,

app/components/day_tab_component.rb

@@ -10,6 +10,6 @@ def daqi_indicator_colour_class
   end
 
   def icon_stroke_colour_class
-    (@forecast.air_pollution.label == "HIGH") ? "stroke-white" : "stroke-black"
+    ["High", "Very high"].include?(@forecast.air_pollution.daqi_label) ? "stroke-white" : "stroke-black"
   end
 end

app/controllers/forecasts_controller.rb

@@ -16,8 +16,10 @@ def show
     respond_to do |format|
       format.turbo_stream do
         render turbo_stream: [
-          turbo_stream.replace("forecasts-frame-top", partial: "forecasts/top"),
-          turbo_stream.replace("forecasts-frame-bottom", partial: "forecasts/bottom")
+          turbo_stream.replace("forecast-tabs-frame", partial: "forecasts/forecast_tabs"),
+          turbo_stream.replace("alert-guidance-frame", partial: "forecasts/alert_guidance"),
+          turbo_stream.replace("predictions-frame", partial: "forecasts/predictions"),
+          turbo_stream.replace("sharing-frame", partial: "forecasts/sharing")
         ]
       end
       format.html

app/javascript/controllers/map_controller.js

@@ -59,7 +59,7 @@ export default class MapController extends Controller {
       zoomControl: false,
       fullscreenControl: true,
       fullscreenControlOptions: {
-        position: "topright",
+        position: "bottomright",
       },
     });
 
@@ -165,7 +165,7 @@ export default class MapController extends Controller {
 
   addGeolocationControl() {
     new LocateControl({
-      position: "bottomright",
+      position: "topright",
     }).addTo(this.map);
   }