From cbcac14e7cd0c1b4197208aebf24e6dba71f44be Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 25 Feb 2022 12:14:46 +0000
Subject: [PATCH] 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 @@
 <div class="ajax-block-container js-mark-focus-on-parent" data-classes-to-persist="js-child-has-focus">
 {% for item in broadcasts|sort|reverse|list %}
   <div class="keyline-block">
-    <div class="file-list govuk-!-margin-bottom-2">
+    <div class="file-list file-list--sectioned govuk-!-margin-bottom-2">
       <h2>
         <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for(view_broadcast_endpoint, service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template.name }}</a>
       </h2>
-      <div class="govuk-grid-row">
-        <div class="govuk-grid-column-one-half">
-          <span class="file-list-hint-large govuk-!-margin-bottom-2">
-            {{ item.content }}
-          </span>
-        </div>
-        <div class="govuk-grid-column-one-half file-list-status">
-          {% if item.status == 'pending-approval' %}
-            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
-              Waiting for approval
-            </p>
-          {% elif item.status == 'rejected' %}
-            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
-              {{ item.updated_at|format_date_human|title }} at {{ item.updated_at|format_time }}
-            </p>
-          {% elif item.status == 'broadcasting' %}
-            <p class="govuk-body govuk-!-margin-bottom-0 live-broadcast">
-              Live since {{ item.starts_at|format_datetime_relative }}
-            </p>
-          {% else %}
-            <p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
-              {{ item.starts_at|format_date_human|title }} at {{ item.starts_at|format_time }}
-            </p>
-          {% endif %}
-        </div>
-      </div>
+      <span class="file-list-hint-large govuk-!-margin-bottom-2">
+        {{ item.content }}
+      </span>
+      {% if item.status == 'pending-approval' %}
+        <p class="govuk-body govuk-hint file-list-status">
+          Waiting for approval
+        </p>
+      {% elif item.status == 'rejected' %}
+        <p class="govuk-body govuk-hint file-list-status">
+          {{ item.updated_at|format_date_human|title }} at {{ item.updated_at|format_time }}
+        </p>
+      {% elif item.status == 'broadcasting' %}
+        <p class="govuk-body live-broadcast file-list-status">
+          Live since {{ item.starts_at|format_datetime_relative }}
+        </p>
+      {% else %}
+        <p class="govuk-body govuk-hint file-list-status">
+          {{ item.starts_at|format_date_human|title }} at {{ item.starts_at|format_time }}
+        </p>
+      {% endif %}
       <ul class="area-list">
         {% for area in item.areas %}
           <li class="area-list-item area-list-item--unremoveable area-list-item--smaller">{{ area.name }}</li>