WIP alerts

dxw · Dec 2, 2024 · 6aa57f4 · 6aa57f4
1 parent 3a45d1c
commit 6aa57f4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
@@ -21,3 +21,24 @@
   --main-colour-light: #dae7f7;
   --main-colour-lightest: #EDF4FB;;
 }
+
+.air-quality-alert {
+  background-color: var(--main-colour-lightest);
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.25rem;
+    stroke: black;
+    margin-bottom: 2px;
+    display: inline-block;
+  }
+
+  a {
+    color: black;
+    text-decoration: underline;
+  }
+}
diff --git a/app/assets/stylesheets/daqi-levels.scss b/app/assets/stylesheets/daqi-levels.scss
@@ -22,7 +22,7 @@
   --daqi-level-10-text: white;
 }
 
-.daqi-scale, .tabs, .daqi-table {
+.daqi-scale, .tabs, .daqi-table, .air-quality-alert {
   .daqi-level-1 {
     background-color: var(--daqi-level-1-bg);
     color: var(--daqi-level-1-text);
@@ -65,22 +65,22 @@
   }
 }
 
-.daqi-low-level {
+.daqi-level-low {
   color: var(--daqi-level-2-text);
   background-color: var(--daqi-level-2-bg);
 }
 
-.daqi-moderate-level {
+.daqi-level-moderate {
   color: var(--daqi-level-5-text);
   background-color: var(--daqi-level-5-bg);
 }
 
-.daqi-high-level {
+.daqi-level-high {
   color: var(--daqi-level-8-text);
   background-color: var(--daqi-level-8-bg);
 }
 
-.daqi-very-high-level {
+.daqi-level-very-high {
   color: var(--daqi-level-10-text);
   background-color: var(--daqi-level-10-bg);
 }

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
   <body class="">
     <div class="container mx-auto max-w-6xl">
       <%= render "shared/header" %>
+      <%= render "shared/alert" %>
       <main role="main">
         <%= render "layouts/messages" %>
         <%= yield %>

diff --git a/app/views/shared/_alert.html.erb b/app/views/shared/_alert.html.erb
@@ -0,0 +1,12 @@
+<%
+@alert = false
+@alert_level = "low"
+%>
+
+<div class="air-quality-alert <%= "daqi-level-#{@alert_level}" if @alert %>">
+  <div>
+    <%= render_svg "exclamation_triangle" if @alert %>
+    <strong>No air pollution alerts</strong>
+  </div>
+  <%= link_to "Learn more", alerts_path if @alert %>
+</div>