Fix feedback component layout on mobile

With #1207 we inadvertently broke the component's layout on mobile. This PR fixes the component layout on mobile by: - using CSS grid for the mobile viewport - moves link classes to list elements and introduces additional classes to use with the grid positioning
alphagov · Nov 29, 2019 · 3972ac7 · 3972ac7
1 parent da4f20a
commit 3972ac7
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 21 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss b/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
@@ -64,11 +64,9 @@
 .gem-c-feedback__prompt-link {
   @include govuk-link-common;
   @include govuk-font(19);
-  margin-left: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
-    float: left; // needed to ensure vertical alignment consistent with prompt-link--wrong
     margin-left: govuk-spacing(2);
   }
 }
@@ -82,20 +80,6 @@
   }
 }
 
-.gem-c-feedback__prompt-link--wrong {
-  display: block;
-  clear: both;
-  margin-top: govuk-spacing(3);
-  margin-left: 0;
-
-  @include govuk-media-query($from: tablet) {
-    float: right;
-    clear: none;
-    margin-top: 0;
-    margin-left: govuk-spacing(2);
-  }
-}
-
 .gem-c-feedback__error-summary {
   margin-bottom: govuk-spacing(3);
   padding: govuk-spacing(3);
@@ -203,3 +187,78 @@
   margin: 0;
   padding: 0;
 }
+
+
+.js-enabled {
+  .gem-c-feedback__js-prompt-questions {
+    @include govuk-media-query($until: tablet) {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 140));
+      grid-template-rows: repeat(2, auto);
+    }
+  }
+
+  .gem-c-feedback__prompt-question {
+    @include govuk-media-query($until: tablet) {
+      grid-area: 1 / 1;
+    }
+  }
+
+  .gem-c-feedback__option-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    @include govuk-media-query($until: tablet) {
+      grid-area: 1 / 1 / 2 / 3;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(140px, 140px));
+      grid-template-rows: repeat(2, auto);
+      // older grid spec
+      grid-row-gap: govuk-spacing(3);
+      // newer grid spec
+      row-gap: govuk-spacing(3); // sass-lint:disable-line no-misspelled-properties
+    }
+  }
+
+  .gem-c-feedback__option-list-item {
+    @include govuk-media-query($from: tablet) {
+      float: left;
+    }
+  }
+
+  .gem-c-feedback__option-list-item--useful {
+    @include govuk-media-query($until: tablet) {
+      display: inline-block;
+      @supports (display: grid) {
+        grid-area: 1 / 2;
+        padding-left: govuk-spacing(3);
+      }
+    }
+  }
+
+  .gem-c-feedback__option-list-item--not-useful {
+    @include govuk-media-query($until: tablet) {
+      display: inline-block;
+      @supports (display: grid) {
+        grid-area: 1 / 2;
+        padding-left: 50px;
+      }
+    }
+  }
+
+  .gem-c-feedback__option-list-item--wrong {
+    @include govuk-media-query($until: tablet) {
+      display: block;
+      margin-top: govuk-spacing(3);
+      @supports (display: grid) {
+        margin-top: 0;
+        grid-area: 2 / 1 / 2 / 3;
+      }
+    }
+
+    @include govuk-media-query($from: tablet) {
+      float: right;
+    }
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb b/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb
@@ -20,9 +20,9 @@
         Maybe
     <% end %>
     <ul class="gem-c-feedback__option-list">
-      <li class="gem-c-feedback__option-list-item">
+      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--useful">
         <%= link_to contact_govuk_path, {
-          class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--useful js-page-is-useful',
+          class: 'gem-c-feedback__prompt-link js-page-is-useful',
           data: {
             'track-category' => 'yesNoFeedbackForm',
             'track-action' => 'ffYesClick'
@@ -33,7 +33,7 @@
           Yes <span class="visually-hidden">this page is useful</span>
         <% end %>
       </li>
-      <li class="gem-c-feedback__option-list-item">
+      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--not-useful">
         <%= link_to contact_govuk_path, {
           class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
           data: {
@@ -47,9 +47,9 @@
           No <span class="visually-hidden">this page is not useful</span>
         <% end %>
       </li>
-      <li class="gem-c-feedback__option-list-item">
+      <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--wrong">
         <%= link_to contact_govuk_path, {
-          class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--wrong js-toggle-form js-something-is-wrong',
+          class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
           data: {
             'track-category' => 'Onsite Feedback',
             'track-action' => 'GOV.UK Open Form'