update alerts page to use new look for displaying alerts

Move things from the sidebar to the main section and update the look to split out alerts into keyword and representative alerts. Generally improve the look of them.
mysociety · Oct 10, 2024 · bdd0a6f · bdd0a6f
1 parent 52e68d8
commit bdd0a6f
Show file tree

Hide file tree

Showing 5 changed files with 623 additions and 52 deletions.
diff --git a/classes/AlertView/Standard.php b/classes/AlertView/Standard.php
@@ -320,13 +320,13 @@ private function setUserData() {
             }
             $this->data['alerts'] = \MySociety\TheyWorkForYou\Utility\Alert::forUser($this->data['email']);
             foreach ($this->data['alerts'] as $alert) {
-                if (array_key_exists('words', $alert)) {
-                    $this->data['all_keywords'][] = implode(' ', $alert['words']);
-                    $this->data['keyword_alerts'][] = $alert;
-                } elseif (array_key_exists('spokenby', $alert) and sizeof($alert['spokenby']) == 1 and $alert['spokenby'][0] == $own_mp_criteria) {
+                if (array_key_exists('spokenby', $alert) and sizeof($alert['spokenby']) == 1 and $alert['spokenby'][0] == $own_mp_criteria) {
                     $this->data['own_member_alerts'][] = $alert;
-                } else {
+                } elseif (array_key_exists('spokenby', $alert)) {
                     $this->data['spoken_alerts'][] = $alert;
+                } else {
+                    $this->data['all_keywords'][] = implode(' ', $alert['words']);
+                    $this->data['keyword_alerts'][] = $alert;
                 }
             }
         }

diff --git a/www/docs/js/main.js b/www/docs/js/main.js
@@ -423,6 +423,77 @@ function wrap_error($message){
   return '<div class="donate-form__error-wrapper"><p class="donate-form__error">' + $message + '</p></div>';
 }
 
+function createAccordion(triggerSelector, contentSelector) {
+  var triggers = document.querySelectorAll(triggerSelector);
+
+  triggers.forEach(function(trigger) {
+    var content = document.querySelector(trigger.getAttribute('href'));
+
+    var openAccordion = function() {
+      content.style.maxHeight = content.scrollHeight + "px"; // Dynamically calculate height
+      content.setAttribute('aria-hidden', 'false');
+      trigger.setAttribute('aria-expanded', 'true');
+    };
+
+    var closeAccordion = function() {
+      content.style.maxHeight = null; // Collapse
+      content.setAttribute('aria-hidden', 'true');
+      trigger.setAttribute('aria-expanded', 'false');
+    };
+
+    trigger.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      if (content.style.maxHeight) {
+        closeAccordion();
+      } else {
+        openAccordion();
+      }
+    });
+
+    // Accessibility
+    trigger.setAttribute('aria-controls', content.getAttribute('id'));
+    trigger.setAttribute('aria-expanded', 'false');
+    content.setAttribute('aria-hidden', 'true');
+    content.style.maxHeight = null;
+  });
+}
+
+// Initialize accordion when DOM is loaded
+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
@@ -62,10 +62,10 @@
 @import url(https://fonts.googleapis.com/css2?family=Manrope:wght@700&family=Merriweather:wght@400;700&display=swap);
 /* Foundation Icons v 3.0 MIT License */
 @font-face {
-  font-family: "foundation-icons";
-  src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
+    font-family: "foundation-icons";
+    src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
 }
 
 .fi-social-facebook:before,
@@ -75,17 +75,24 @@
 .fi-megaphone:before,
 .fi-pound:before,
 .fi-magnifying-glass:before,
-.fi-heart:before
+.fi-heart:before,
+.fi-plus:before,
+.fi-play:before,
+.fi-pause:before,
+.fi-trash:before,
+.fi-page-edit:before,
+.fi-x:before,
+.fi-save:before
 {
-  font-family: "foundation-icons";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  text-decoration: inherit;
+    font-family: "foundation-icons";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    text-decoration: inherit;
 }
 
 // https://github.com/zurb/foundation-icon-fonts/blob/master/_foundation-icons.scss
@@ -97,6 +104,13 @@
 .fi-pound:before {content: "\f19a"}
 .fi-magnifying-glass:before {content: "\f16c"}
 .fi-heart:before { content: "\f159"; }
+.fi-plus:before { content: "\f199"; }
+.fi-play:before { content: "\f198"; }
+.fi-pause:before { content: "\f191"; }
+.fi-trash:before { content: "\f204"; }
+.fi-page-edit:before { content: "\f184"; }
+.fi-x:before { content: "\f217"; }
+.fi-save:before { content: "\f1ac"; }
 
 html,
 body {
@@ -129,13 +143,13 @@ h3 {
 }
 
 .pull-right {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: right;
         margin-left: 1em;
     }
 }
 .pull-left {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: left;
         margin-left: 1em;
     }
@@ -166,12 +180,12 @@ ul {
 a {
     overflow-wrap: break-word;
     word-wrap: break-word;
-
+    
     -webkit-hyphens: auto;
-       -moz-hyphens: auto;
-        -ms-hyphens: auto;
-            hyphens: auto;
-
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    
     color: $links;
 }
 
@@ -198,7 +212,7 @@ a:focus {
         // for .button elements!!
         vertical-align: -0.4em;
     }
-
+    
     &.tertiary {
         @include button-style($bg: $links);
     }
@@ -231,6 +245,7 @@ form {
 
 @import "parts/panels";
 @import "parts/promo-banner";
+@import "parts/accordion";
 
 @import "pages/mp";
 @import "pages/topics";