diff --git a/www/docs/js/main.js b/www/docs/js/main.js index 52e992880d..467482ce81 100644 --- 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 index 39c3b186b4..5fe8d4a056 100644 --- 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 index d0a6091418..e66fa52309 100644 --- 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 { diff --git a/www/includes/easyparliament/templates/html/alert/alert-mockup.php b/www/includes/easyparliament/templates/html/alert/alert-mockup.php index ce40c7fd8a..ae76b88f43 100644 --- a/www/includes/easyparliament/templates/html/alert/alert-mockup.php +++ b/www/includes/easyparliament/templates/html/alert/alert-mockup.php @@ -1,5 +1,9 @@ -

Initial view for alert page. This assumes the user has already created some group alerts

+
+

/alert

+ Initial view for alert page. This assumes the user has already created some group alerts +
+

Keywords alerts

- + - - - -
-
Date of last mention
-
30 May 2024
-
+
- - See results for this alert - -
+
+

/alert

+ +
-
- -
-

Keywords included in this alert:

- - -
+
+
+

Keywords alerts

+

You haven't created any keyword alert.

+
+ +
-
-

Keywords excluded in this alert:

- - -
+
-
- - -

Which section should this alert apply to:

-
-
- - + +
+ +
+
+

MP Alerts

+
+ + +
+

Your MP ﹒ Janne Doe

+ +

Alert when Janne Doe speaks

+
+ + +
+ +

Alert when Janne Doe is mentioned

+
+ +
+

Keir Starmer

+ +

Alert when Keir Starmer speaks

+
+ + +
+ +

Alert when Keir Starmer is mentioned

+ +
+
-
- -