Change organisations logo layout

- organisation logos on html publications are stacked, which wastes vertical and horizontal space as they only occupy around 1/4 of the page width on desktop
- this change uses flexbox to arrange the logos in columns across the page, improving the use of space
- for older browsers that don't support flexbox, the original layout is preserved

Author: andysellick

app/assets/stylesheets/application.scss

@@ -18,6 +18,7 @@ $govuk-typography-use-rem: false;
 // helpers for common page elements
 @import 'helpers/sidebar-with-body';
 @import 'helpers/organisation-links';
+@import 'helpers/organisation-logos';
 @import 'helpers/parts';
 @import 'helpers/add-title-margin';
 @import "helpers/content-bottom-margin";

app/assets/stylesheets/helpers/_organisation-logos.scss

@@ -0,0 +1,18 @@
+.organisation-logos {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  list-style-type: none;
+}
+
+.organisation-logos__logo {
+  padding-bottom: govuk-spacing(3);
+  flex-basis: 25%;
+  min-width: 130px;
+}
+
+.organisation-logo__inner {
+  max-width: 215px;
+  padding-right: govuk-spacing(3);
+}

app/assets/stylesheets/views/_html-publication.scss

@@ -10,14 +10,6 @@
     margin-bottom: govuk-spacing(4);
     position: relative;
 
-    .organisation-logos {
-      list-style-type: none;
-
-      .organisation-logo {
-        padding-bottom: govuk-spacing(2);
-      }
-    }
-
     // design calls for the logos at the top to always be left aligned
     .direction-rtl & {
       direction: ltr;

app/views/content_items/html_publication.html.erb

@@ -9,13 +9,15 @@
 %>
 
 <% if @content_item.organisations %>
-  <div class="govuk-grid-row publication-external">
-    <ol class="govuk-grid-column-one-quarter organisation-logos">
+  <div class="publication-external">
+    <ol class="organisation-logos">
       <% @content_item.organisations.each do |organisation| %>
       <% logo_attributes = @content_item.organisation_logo(organisation) %>
       <% next unless logo_attributes %>
-        <li class="organisation-logo">
-          <%= render 'govuk_publishing_components/components/organisation_logo', logo_attributes %>
+        <li class="organisation-logos__logo">
+          <div class="organisation-logo__inner">
+            <%= render 'govuk_publishing_components/components/organisation_logo', logo_attributes %>
+          </div>
         </li>
       <% end %>
     </ol>

test/integration/html_publication_test.rb

@@ -74,7 +74,7 @@ class HtmlPublicationTest < ActionDispatch::IntegrationTest
   end
 
   def assert_has_component_organisation_logo_with_brand(brand, index = 1)
-    within("li.organisation-logo:nth-of-type(#{index})") do
+    within("li.organisation-logos__logo:nth-of-type(#{index})") do
       assert page.has_css?(".gem-c-organisation-logo.brand--#{brand}")
     end
   end