Second commit

mysociety · Oct 3, 2024 · 0c50407 · 0c50407
1 parent 59c69a7
commit 0c50407
Show file tree

Hide file tree

Showing 4 changed files with 626 additions and 150 deletions.
diff --git a/www/docs/js/main.js b/www/docs/js/main.js
@@ -464,6 +464,36 @@ document.addEventListener('DOMContentLoaded', function() {
   createAccordion('.accordion-button', '.accordion-content');
 });
 
+// Create alert form
+$(document).ready(function() {
+  let currentStep = 0;
+  let steps = $(".alert-step");
+
+  // Show the first step
+  $(steps[currentStep]).show();
+
+  // Focus management: Set focus to the first input on each step change
+  function focusFirstInput(stepIndex) {
+    $(steps[stepIndex]).find('input, button').first().focus();
+  }
+
+  // Next button click
+  $(".next").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep++;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+
+  // Previous button click
+  $(".prev").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep--;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+});
+
 $(function() {
 
   $('#how-often-annually').click(function() {

diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
@@ -80,7 +80,8 @@
 .fi-pause:before,
 .fi-trash:before,
 .fi-page-edit:before,
-.fi-x:before
+.fi-x:before,
+.fi-save:before
 {
     font-family: "foundation-icons";
     font-style: normal;
@@ -107,6 +108,7 @@
 .fi-trash:before { content: "\f204"; }
 .fi-page-edit:before { content: "\f184"; }
 .fi-x:before { content: "\f217"; }
+.fi-save:before { content: "\f1ac"; }
 
 html,
 body {

diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss
@@ -21,7 +21,15 @@
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    align-items: center;
+    align-items: end;
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+}
+
+.accordion {
+    margin-top: 2rem;
 }
 
 .accordion-button {
@@ -47,16 +55,17 @@
         }
     }
 
-    .accordion-button--content {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        align-items: center;
-        gap: 0.75rem;
+}
 
-        .content-subtitle {
-            @extend .label;
-        }
+.accordion-button--content {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    gap: 0.75rem;
+
+    .content-subtitle {
+        @extend .label;
     }
 }
 
@@ -73,23 +82,10 @@
                 margin-right: 0.2rem;
             }
         }
-    }
-
-    .accordion-section {
-        margin-bottom: 2rem;
-    }
-
-    dl {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        column-gap: 4rem;
-        row-gap: 1rem;
-        align-items: center;
 
-        dt { 
-            color: $light-text;
-            font-size: 0.9rem;
+        button.alert {
+            background-color: $color-red;
+            color: #fff;
         }
     }
 
@@ -145,19 +141,92 @@
     }
 }
 
+.alert-meta-info {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 4rem;
+    row-gap: 1rem;
+    align-items: center;
+
+    dt { 
+        color: $light-text;
+        font-size: 0.9rem;
+    }
+}
+
 button {
     i {
         margin-left: 0.25rem;
     }
 }
 
-.internal-comment {
+.alert-page-section {
+    margin-bottom: 3rem;
+}
+
+.alert-page-subsection {
+    margin-bottom: 2rem;
+
+    .alert-page-subsection--subtitle {
+        margin-bottom: 0.5rem;
+    }
+
+}
+
+.button.red {
+    background-color: $color-red;
+    color: #fff;
+
+    &:hover {
+        background-color: darken($color-red, 15%);
+    }
+}
+
+// FORM
+.alert-step {
+    display: none;
+}
+
+.alert-step.active {
+    display: block;
+}
+
+#create-alert-form {
+    label {
+        color: $body-font-color;
+        font-size: 1rem;
+        margin-bottom: 1rem;
+    }
+    input[type="text"], select {
+        max-width: 400px;
+        height: 40px;
+        border-color: $body-font-color;
+    }
+
+    fieldset {
+        column-count: 2;
+    }
+}
+
+
+.mockup-internal-comment {
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     font-size: 0.8rem;
     color: rgb(114, 8, 8);
     background-color: rgb(230, 170, 170);
     padding: 1rem;
     border-radius: 1rem;
+    h4 {
+        color: inherit;
+    }
+    margin-bottom: 3rem;
+}
+
+
+
+.mockup-divider {
+    margin-top: 30rem;
 }
 
 .fi-x {