From bdd0a6fcbd15b58ffacd794ca1f0adbd65a9cce0 Mon Sep 17 00:00:00 2001 From: Lucas Cumsille M Date: Tue, 1 Oct 2024 11:44:09 +0000 Subject: [PATCH] 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. --- classes/AlertView/Standard.php | 10 +- www/docs/js/main.js | 71 +++++ www/docs/style/sass/app.scss | 59 ++-- www/docs/style/sass/parts/_accordion.scss | 236 ++++++++++++++ .../templates/html/alert/index.php | 299 ++++++++++++++++-- 5 files changed, 623 insertions(+), 52 deletions(-) create mode 100644 www/docs/style/sass/parts/_accordion.scss diff --git a/classes/AlertView/Standard.php b/classes/AlertView/Standard.php index d55170d073..3a14cbccd9 100644 --- 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 index 6dd194a9f0..467482ce81 100644 --- a/www/docs/js/main.js +++ b/www/docs/js/main.js @@ -423,6 +423,77 @@ function wrap_error($message){ return ''; } +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 index d356a39cd9..511351cd8c 100644 --- 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"; diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss new file mode 100644 index 0000000000..8499959cc9 --- /dev/null +++ b/www/docs/style/sass/parts/_accordion.scss @@ -0,0 +1,236 @@ +.label { + background-color: #fff; + color: $primary-color; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + + &--primary-light { + background-color: $primary-color-200; + color: $body-font-color; + } + + &--red { + background-color: lighten($color-red, 40%); + color: $body-font-color; + } +} + +.alert-page-header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: end; + + h2 { + margin-bottom: 0.5rem; + } +} + +.accordion { + margin-top: 2rem; +} + +.accordion-button { + width: 100%; + display: flex; + justify-content: space-between; + text-align: left; + padding: 10px; + font-size: 1.2em; + cursor: pointer; + border: none; + + &[aria-expanded="true"] { + background-color: $primary-color-200; + color: $body-font-color; + & + .accordion-content{ + max-height: 1000px; + transition: max-height 0.3s ease; + } + + i { + transform: rotate(45deg); + } + } + +} + +.accordion-button--content { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + gap: 0.75rem; + + .content-subtitle { + @extend .label; + } +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + + .alert-controller-wrapper { + margin-bottom: 2rem; + button { + margin-bottom: 0; + span { + margin-right: 0.2rem; + } + } + + button.alert { + background-color: $color-red; + color: #fff; + } + } + + .add-remove-tool { + display: flex; + flex-direction: row; + + input { + margin: 0; + height: 40px; + } + + button { + max-width: 100px; + height: 40px; + } + } + + label { + font-size: inherit; + color: inherit; + } + + select { + max-width: 350px; + } +} + +.keyword-list { + ul { + list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 0; + + li { + font-weight: bold; + i { + margin-left: 0.25rem; + } + } + + } +} + +.heading-with-bold-word { + font-weight: 400; + + span { + font-weight: bold; + } +} + +.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; + } +} + +.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 { + display: none; +} + +.display-none { + display:none !important; +} diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php index 8f4deef191..7b15c82b40 100644 --- a/www/includes/easyparliament/templates/html/alert/index.php +++ b/www/includes/easyparliament/templates/html/alert/index.php @@ -250,38 +250,286 @@
-
- - - - - - - -

-
    -
  • - full_name()) ?>. -
    - - - -
    -
    • -
- - - +
+

join or sign in, you can suspend, resume and delete your email alerts from your profile page.'), '/user/?pg=join', '/user/login/?ret=%2Falert%2F') ?>

- -
+ +
+
+ + +
+
+ +
+
+

+ + +

+ +
+ + + + +
+ + + + +
+ $alert) { ?> +
+ + +
+ -
+
+ +
+
+

Representative alerts

+ +
    +
  • + full_name()) ?>. +
    + + + +
    +
    • +
+ + +
+

﹒ XXX

+ +

+
+ +
+ + + + + + + + +
+
+ + +

Alert when is mentioned

+
+ + + +
+
+ + + + + +
+

+ +

+

+ +
+ + + + + + + + +
+
+ + +

Alert when is mentioned

+
+ + + +
+
+ + +
+ + + + +
+
+

@@ -302,6 +550,7 @@

+