diff --git a/www/docs/style/sass/pages/_alert.scss b/www/docs/style/sass/pages/_alert.scss index cf865b5b35..bab7197d39 100644 --- a/www/docs/style/sass/pages/_alert.scss +++ b/www/docs/style/sass/pages/_alert.scss @@ -87,48 +87,34 @@ } } -.alerts-form { - max-width: 14em; - margin: 0 auto; - - label { - width: 100%; - text-align: left; - color: inherit; - font-size: 0.8em; - margin-bottom: 0.4em; - } - - .button { - margin: 0; - } - - input[type="text"] { - border-color: #999; - margin: 0; - height: auto; // allow input to be sized by content's default height - font-size: 1.4em; - line-height: 1em; - padding: 0.2em 0.4em; - border-radius: 3px; +// Alert form +.alert-form__section { + margin-bottom: 2.5rem; + :last-child { + margin-bottom: 0; } +} - @media (min-width: $medium-screen) { - max-width: none; // let the form fill the whole width of the parent +.alert-form__subtitle { + margin-bottom: 0.5rem; +} - p { - display: inline-block; - vertical-align: bottom; // line up the bottom of the three inputs - margin: 0; - } +.alert-form__label { + display: inline; + margin-left: 0.5em; +} - p + p { - margin-left: 1em; - } +.alert__controls { + margin-bottom: 2rem; + form { + display: inline; + } - .button { - vertical-align: bottom; // line up with bottom of parent - } + button { + margin-bottom: 0; + span { + margin-right: 0.2rem; + } } } @@ -187,6 +173,51 @@ padding: 2em 0; } +.alerts-form { + label { + color: $body-font-color; + font-size: 1.1rem; + line-height: 1.2; + margin-bottom: 0.75rem; + } + + input[type="checkbox"], input[type="radio"] { + display: inline-block; + height: 1.5rem; + width: 1.5rem; + margin: 0 0.25rem 0 0; + vertical-align: middle; + + + label { + display: inline-block; + margin-bottom: 0; + line-height: 1.5rem; + vertical-align: middle; + } + } + + input[type="text"], select { + max-width: 400px; + height: 40px; + border-color: $body-font-color; + } + + .checkbox-wrapper { + display: flex; + flex-direction: row; + + input[type="checkbox"], input[type="radio"] { + flex-shrink: 0; + } + } + + .checkbox-group { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + } +} + // If browser supports background-size, // and we have space, give the message an icon @media (min-width: $medium-screen) { @@ -224,6 +255,25 @@ background-color: white; } +.alert-section__header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; + + button, h2 { + margin-bottom: 0; + margin-top: 0; + } +} + +.alert-section__message { + background-color: #FFFCD9; // very light yellow + padding: 1rem; +} + .alert-section__primary { @include grid-column(12, $collapse: true); padding: 1.5em; @@ -283,11 +333,6 @@ } } -.alert-section--message { - background-color: #FFFCD9; // very light yellow - padding: 1rem; -} - .alert-section--disambiguation { li { margin: 1em 0; @@ -305,54 +350,6 @@ } } -.alert-page-main-inputs { - font-size: 1.2em; - @include clearfix(); - margin: 0.5em 0; - - input[type="text"], - input[type="email"] { - width: 100%; - height: 2.49em; - padding-left: 0.8em; - padding-right: 0.8em; - } - - input[type="text"] { - float: left; - width: 60%; - @include border-radius(3px 0 0 3px); - } - - .button { - float: left; - height: 2.8em; - width: 40%; - @include border-radius(0 3px 3px 0); - margin-bottom: 0; - padding-left: 0; - padding-right: 0; - } - - @media (min-width: 24em) { - input[type="text"] { - width: 70%; - } - .button { - width: 30%; - } - } - - @media (min-width: 36em) { - input[type="text"] { - width: 80%; - } - .button { - width: 20%; - } - } -} - .alert-page-error { display: block; color: $colour_pale_red; @@ -407,20 +404,6 @@ } } -.alert-section__page-header { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; - - button, h2 { - margin-bottom: 0; - margin-top: 0; - } -} - .alert-meta { .alert-meta__results { display: flex; @@ -477,7 +460,7 @@ } .keyword-alert-accordion__keyword-list, -.alert-creation-steps { +.keyword-list { margin-bottom: 2.5rem; ul { list-style: none; diff --git a/www/includes/easyparliament/templates/html/alert/_alert_form.php b/www/includes/easyparliament/templates/html/alert/_alert_form.php index 01625b2ced..2f57c86ff8 100644 --- a/www/includes/easyparliament/templates/html/alert/_alert_form.php +++ b/www/includes/easyparliament/templates/html/alert/_alert_form.php @@ -1,311 +1,308 @@
-
-

- - - - -

+

+ + + + +

-
- - + + + - -
-

+ +
+

- -
- - - - - -
+ +
+ + + + +
+ -
- - - - - - $word) { ?> - - - - - - -
+
+ + + + + + $word) { ?> + + + + + + +
-
-
- > - -
+
+
+ > +
+
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - 0) { ?> - - $member) { - $name = member_full_name($member['house'], $member['title'], $member['given_name'], $member['family_name'], $member['lordofname']); - if ($member['constituency']) { - $name .= ' (' . gettext($member['constituency']) . ')'; - } ?> - -
- +
+ + + 0) { ?> + + $member) { + $name = member_full_name($member['house'], $member['title'], $member['given_name'], $member['family_name'], $member['lordofname']); + if ($member['constituency']) { + $name .= ' (' . gettext($member['constituency']) . ')'; + } ?> + +
-

- -
- > - -
-
+

+ + +
+ > + +
+
- - + + +
+ + + + + + + + + + + + + +
+

+
+

+
    + +
  • + +
- - - - - - - - - - - - -
-

-
-

-
    - -
  • - -
+

+ +
+ +
+ + + + +
+
-

+
+ 0) { ?> +
+
+
+
+ -
- -
- - - - - + +
+
+
30 May 2024
-
+ -
- 0) { ?> -
-
-
-
- + +
- -
-
-
30 May 2024
-
+ + + +
+ + + + + + + + + + + + + + + + + +
+

+ +
+ +

:

+ +

:

+ +
    + +
  • - - - - - - - +
- - - - - - + +
+

:

+
    + +
  • + +
+
- - - - - - - - - -
-

-
- -

:

- -

:

- +
+ 0) { ?> +

:

    - +
  • - -
-
- - -
-

:

-
    - -
  • - +
-
- + +

+ +
-
- 0) { ?> -

:

-
    - -
  • - -
- -

- -
+ 0) { ?> +
+

+
    + +
  • + +
+
+ - 0) { ?> -
-

-
    - -
  • + 0 || isset($lastmention)) { ?> +
    +
    +

    See mentions for this alert

    + +
    + 0) { ?> +
    +
    +
    +
    -
-
- - 0 || isset($lastmention)) { ?> -
-
-

See mentions for this alert

- -
- 0) { ?> -
-
-
-
- - - -
-
-
30 May 2024
-
- -
- - -
- + +
+
+
30 May 2024
+
+ +
-
- - - - - - -
+ + - -
+
+ + + + + + +
+ +
diff --git a/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php b/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php index 7fb75f3046..eba980bd0a 100644 --- a/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php +++ b/www/includes/easyparliament/templates/html/alert/_keyword_alert_list.php @@ -12,7 +12,7 @@