From cbcac14e7cd0c1b4197208aebf24e6dba71f44be Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 25 Feb 2022 12:14:46 +0000 Subject: [PATCH 1/3] Remove grid from alerts file-list Having a grid in the click target stops the hint and status text being clickable. This removes it in favour using flexbox to position the elements in a similar way. Includes fallback styles for browsers that don't support flexbox that positions the child elements inline, laid out justified, to mimic the flexbox positioning of justify-content: space-between. Note: display is overriden on child items under flexbox so setting display: inline-block is ignored. --- app/assets/stylesheets/views/dashboard.scss | 49 +++++++++++++++++-- .../broadcast/partials/dashboard-table.html | 48 ++++++++---------- 2 files changed, 67 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index a63d728ef..90749bc85 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -44,6 +44,49 @@ .file-list { + // for file-lists with section-like content and a single item + &--sectioned { + display: flex; + flex-wrap: wrap; + text-align: justify; // fallback for browsers that don't support flexbox + justify-content: space-between; + + // note: first-child of a section should be a heading + & > :first-child, + & > .area-list { + width: 100%; + } + + & > .file-list-hint-large, + & > .file-list-status { + // fallback for browsers that don't support flexbox - let `text-align: justify` on parent + // and making children inline mimic `justify-content: space-between` + display: inline-block; + + // simulate govuk-grid-column-one-half spacing - smaller screens + width: 100%; + flex-grow: 1; + + // simulate govuk-grid-column-one-half spacing - larger screens + @include govuk-media-query($from: tablet) { + width: calc(50% - #{$govuk-gutter-half}); + } + } + + & > .file-list-status { + overflow: hidden; // old IE hack to make it vertically line up with the hint + margin-bottom: 0; // cancel margin-bottom from .govuk-hint class + + @include govuk-media-query($from: tablet) { + margin-bottom: 10px; // match margin-bottom on hint + } + } + + & > .file-list-hint-large { + text-align: left; // reset for text-align fallback on parent + } + } + &-hint, &-hint-large, &-status { @@ -136,10 +179,10 @@ // Note: this selector should use the :has() pseudo-class in the future when it is supported // which will remove the need for JS -.file-list .js-child-has-focus + .govuk-grid-row { +.file-list .js-child-has-focus { - & .file-list-hint-large, - & .file-list-status > .govuk-hint { + & + .file-list-hint-large, + & ~ .file-list-status { color: $govuk-focus-text-colour; } diff --git a/app/templates/views/broadcast/partials/dashboard-table.html b/app/templates/views/broadcast/partials/dashboard-table.html index bc56788cc..b95bf5e6d 100644 --- a/app/templates/views/broadcast/partials/dashboard-table.html +++ b/app/templates/views/broadcast/partials/dashboard-table.html @@ -3,36 +3,30 @@
{% for item in broadcasts|sort|reverse|list %}
-
+

{{ item.template.name }}

-
-
- - {{ item.content }} - -
-
- {% if item.status == 'pending-approval' %} -

- Waiting for approval -

- {% elif item.status == 'rejected' %} -

- {{ item.updated_at|format_date_human|title }} at {{ item.updated_at|format_time }} -

- {% elif item.status == 'broadcasting' %} -

- Live since {{ item.starts_at|format_datetime_relative }} -

- {% else %} -

- {{ item.starts_at|format_date_human|title }} at {{ item.starts_at|format_time }} -

- {% endif %} -
-
+ + {{ item.content }} + + {% if item.status == 'pending-approval' %} +

+ Waiting for approval +

+ {% elif item.status == 'rejected' %} +

+ {{ item.updated_at|format_date_human|title }} at {{ item.updated_at|format_time }} +

+ {% elif item.status == 'broadcasting' %} +

+ Live since {{ item.starts_at|format_datetime_relative }} +

+ {% else %} +

+ {{ item.starts_at|format_date_human|title }} at {{ item.starts_at|format_time }} +

+ {% endif %}
    {% for area in item.areas %}
  • {{ area.name }}
    • From 9d32316a67b245db37a02cc3db84733213f6ef01 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 8 Mar 2022 14:24:54 +0000 Subject: [PATCH 2/3] Fix spacing for alert description and status Using `width` doesn't work for flex-items with flex-grow set above 0 because they will expand to fill the space, whatever its value. The intention for this line was always to constrain how much these ones can grow to half the space minus the gap between. `max-width`, which is still honored by flex-items with `flex-grow` above 0, meaning they will expand up to that size. --- app/assets/stylesheets/views/dashboard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 90749bc85..44d9ce713 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -69,7 +69,7 @@ // simulate govuk-grid-column-one-half spacing - larger screens @include govuk-media-query($from: tablet) { - width: calc(50% - #{$govuk-gutter-half}); + max-width: calc(50% - #{$govuk-gutter-half}); } } From e28d7cbb052947a5fec7345603be08eeecc95e6b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 10 Mar 2022 10:35:02 +0000 Subject: [PATCH 3/3] Fix comments, remove flex-grow and unused margin Based on comments on the associated pull request, (and my realisation that I was using flexbox wrong): https://github.com/alphagov/notifications-admin/pull/4171 Removal of flex-grow I added `flex-grow: 1` to make the description and status flex items grow to fill the container, at least until they hit their `max-width`. They already have `width: 100%` which achieves the same thing so this removes it. --- app/assets/stylesheets/views/dashboard.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 44d9ce713..6a49f05b0 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -63,11 +63,13 @@ // and making children inline mimic `justify-content: space-between` display: inline-block; - // simulate govuk-grid-column-one-half spacing - smaller screens + // This simulates a 50% column in a govuk grid on smaller screens + // govuk grid columns go to 100% width on smaller screens width: 100%; - flex-grow: 1; - // simulate govuk-grid-column-one-half spacing - larger screens + // This simulates a 50% column in a govuk grid on larger screens + // as with govuk grid, this includes a gap between columns to ensure the contents + // are separated by a space @include govuk-media-query($from: tablet) { max-width: calc(50% - #{$govuk-gutter-half}); } @@ -76,10 +78,6 @@ & > .file-list-status { overflow: hidden; // old IE hack to make it vertically line up with the hint margin-bottom: 0; // cancel margin-bottom from .govuk-hint class - - @include govuk-media-query($from: tablet) { - margin-bottom: 10px; // match margin-bottom on hint - } } & > .file-list-hint-large {