Merge pull request #2774 from alphagov/swap-gem-layout-reduced

Swap gem layout
alphagov · Jun 3, 2021 · f80e3e7 · f80e3e7
2 parents 9db8301 + 2136051
commit f80e3e7
Show file tree

Hide file tree

Showing 29 changed files with 258 additions and 299 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,11 +1,8 @@
-$govuk-compatibility-govuktemplate: true;
+$govuk-compatibility-govuktemplate: false;
 $govuk-use-legacy-palette: false;
 
-// BASE Stylesheet
-
 // Components from govuk_publishing_components gem
 @import 'govuk_publishing_components/govuk_frontend_support';
-@import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/back-link';
 @import 'govuk_publishing_components/components/breadcrumbs';
 @import 'govuk_publishing_components/components/button';
@@ -15,6 +12,7 @@ $govuk-use-legacy-palette: false;
 @import 'govuk_publishing_components/components/error-alert';
 @import 'govuk_publishing_components/components/error-message';
 @import 'govuk_publishing_components/components/feedback';
+@import 'govuk_publishing_components/components/fieldset';
 @import 'govuk_publishing_components/components/govspeak';
 @import 'govuk_publishing_components/components/heading';
 @import 'govuk_publishing_components/components/hint';
@@ -41,7 +39,7 @@ $govuk-use-legacy-palette: false;
 @import 'govuk_publishing_components/components/title';
 @import 'govuk_publishing_components/components/warning-text';
 
-// components
+// local app components
 @import "components/calendar";
 @import "components/metadata";
 @import "components/subscribe";
@@ -50,7 +48,6 @@ $govuk-use-legacy-palette: false;
 @import "styleguide/conditionals";
 
 // Helper stylesheets (things on more than one page layout)
-@import "helpers/overwrites";
 @import "helpers/truncated-url";
 @import "helpers/title-context-reset";
 
@@ -62,7 +59,6 @@ $govuk-use-legacy-palette: false;
 @import "views/travel-advice";
 @import "views/report-child-abuse";
 @import "views/local-authority";
-@import "views/simple-smart-answer";
 
 // exceptional format overrides
 @import "views/location_form";

diff --git a/app/assets/stylesheets/helpers/_overwrites.scss b/app/assets/stylesheets/helpers/_overwrites.scss
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
@@ -1,4 +1,4 @@
-$govuk-compatibility-govuktemplate: true;
+$govuk-compatibility-govuktemplate: false;
 $govuk-use-legacy-palette: false;
 
 @import 'govuk_publishing_components/govuk_frontend_support';

diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
@@ -1,30 +1,3 @@
-// Remove search from the top bar as we have one in the content.
-
-// stylelint-disable selector-no-qualifying-type, selector-max-id
-body.homepage {
-  #global-header-bar {
-    display: none;
-  }
-
-  #wrapper,
-  #content {
-    margin: 0;
-    width: auto; // needed for IE overides
-    max-width: 100%;
-  }
-
-  .feedback-wrapper {
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 0 govuk-spacing(3);
-
-    @include govuk-media-query($from: tablet) {
-      padding: 0 govuk-spacing(6);
-    }
-  }
-}
-// stylelint-enable selector-no-qualifying-type, selector-max-id
-
 .home-top {
   overflow: hidden;
   background: $govuk-brand-colour;
@@ -42,7 +15,7 @@ body.homepage {
 
 .home-top__intro--simpler {
   font-weight: bold;
-  margin-bottom: 20px;
+  margin-bottom: govuk-spacing(4);
 }
 
 .home-top__links {
@@ -180,7 +153,7 @@ body.homepage {
 
 .home-numbers__large {
   // Manually setting font-size rather than using the mixins size
-  // because the layout doesnt really work otherwise
+  // because the layout doesn't really work otherwise
   font-size: 53px;
   line-height: (55 / 53);
   font-weight: bold;

diff --git a/app/assets/stylesheets/views/_simple-smart-answer.scss b/app/assets/stylesheets/views/_simple-smart-answer.scss
diff --git a/app/assets/stylesheets/views/_travel-advice.scss b/app/assets/stylesheets/views/_travel-advice.scss
@@ -8,7 +8,9 @@
   }
 
   .country-filter-form__form-group {
-    margin: 0; // Because fieldset has 2px margins by default.
+    border: 0;
+    margin: 0;
+    padding: 0;
   }
 
   .subscriptions-wrapper {

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -11,7 +11,7 @@ class ApplicationController < ActionController::Base
   rescue_from GdsApi::HTTPForbidden, with: :error_403
   rescue_from RecordNotFound, with: :cacheable_404
 
-  slimmer_template "core_layout"
+  slimmer_template "gem_layout"
 
   if ENV["BASIC_AUTH_USERNAME"]
     http_basic_authenticate_with(

diff --git a/app/controllers/calendar_controller.rb b/app/controllers/calendar_controller.rb
@@ -6,7 +6,7 @@ class CalendarController < ApplicationController
 
   rescue_from Calendar::CalendarNotFound, with: :simple_404
 
-  slimmer_template "core_layout"
+  slimmer_template "gem_layout"
 
   def calendar
     set_expiry 1.hour

diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb
@@ -3,12 +3,12 @@ class HelpController < ApplicationController
 
   def index
     fetch_and_setup_content_item("/help")
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 
   def tour
     fetch_and_setup_content_item("/tour")
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 
   def cookie_settings

diff --git a/app/controllers/homepage_controller.rb b/app/controllers/homepage_controller.rb
@@ -3,12 +3,10 @@ class HomepageController < ApplicationController
 
   def index
     set_slimmer_headers(
-      template: "core_layout",
+      template: "gem_layout_full_width",
       remove_search: true,
     )
 
     fetch_and_setup_content_item("/")
-
-    render locals: { full_width: true }
   end
 end
diff --git a/app/controllers/roadmap_controller.rb b/app/controllers/roadmap_controller.rb
@@ -2,6 +2,6 @@ class RoadmapController < ApplicationController
   include Cacheable
 
   def index
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 end
diff --git a/app/controllers/travel_advice_controller.rb b/app/controllers/travel_advice_controller.rb
@@ -7,7 +7,9 @@ def index
     @presenter = TravelAdviceIndexPresenter.new(@content_item)
 
     respond_to do |format|
-      format.html { render locals: { full_width: true } }
+      format.html do
+        slimmer_template "gem_layout"
+      end
       format.atom do
         set_expiry(5.minutes)
         headers["Access-Control-Allow-Origin"] = "*"

diff --git a/app/views/application/_location_form.html.erb b/app/views/application/_location_form.html.erb
@@ -1,7 +1,7 @@
 <div class="postcode-search-form"
-      data-module="track-submit"
-      data-track-category="postcodeSearch:<%= publication_format %>"
-      data-track-action="postcodeSearchStarted">
+  data-module="track-submit"
+  data-track-category="postcodeSearch:<%= publication_format %>"
+  data-track-action="postcodeSearchStarted">
 
   <% if @location_error %>
     <%
@@ -22,9 +22,9 @@
     } %>
   <% end %>
 
-  <form method="post" id="local-locator-form" class="location-form">
-    <fieldset>
-      <legend class="visuallyhidden"><%= t('formats.local_transaction.postcode_lookup') %></legend>
+  <form method="post" id="local-locator-form" class="location-form govuk-!-margin-bottom-9">
+    <fieldset class="govuk-fieldset">
+      <legend class=" govuk-fieldset__legend govuk-visually-hidden"><%= t('formats.local_transaction.postcode_lookup') %></legend>
 
       <%= render partial: 'draft_fields' %>
 
@@ -40,14 +40,18 @@
         autocomplete: "postal-code",
       } %>
 
-      <%= render "govuk_publishing_components/components/button", text: "Find", margin_bottom: true %>
+      <%= render "govuk_publishing_components/components/button", 
+        text: "Find", 
+        margin_bottom: true 
+      %>
 
       <%= tag.p link_to(t('formats.local_transaction.find_postcode_royal_mail'),
-                    "https://www.royalmail.com/find-a-postcode",
-                    id: 'postcode-finder-link',
-                    class: "govuk-link",
-                    rel: "external"),
-                class: "govuk-body" %>
+        "https://www.royalmail.com/find-a-postcode",
+        id: 'postcode-finder-link',
+        class: "govuk-link",
+        rel: "external"),
+        class: "govuk-body" 
+      %>
     </fieldset>
   </form>
 </div>
diff --git a/app/views/electoral/_form.html.erb b/app/views/electoral/_form.html.erb
@@ -26,8 +26,8 @@
     method: :get,
     id: "local-locator-form",
     class: "location-form" do |form| %>
-    <%= tag.fieldset do %>
-      <%= tag.legend t('formats.local_transaction.postcode_lookup'), class: "govuk-visually-hidden" %>
+    <%= tag.fieldset class: "govuk-fieldset" do %>
+      <%= tag.legend t('formats.local_transaction.postcode_lookup'), class: "govuk-fieldset__legend govuk-visually-hidden" %>
       <%= render partial: 'draft_fields' %>
 
       <%= render "govuk_publishing_components/components/input", {

diff --git a/app/views/find_local_council/_base_page.html.erb b/app/views/find_local_council/_base_page.html.erb
@@ -5,9 +5,7 @@
 <% end %>
 
 <main id="content" role="main" class="govuk-grid-column-two-thirds">
-  <header class="page-header">
-    <%= render "govuk_publishing_components/components/title", title: t('formats.local_transaction.find_council') %>
-  </header>
+  <%= render "govuk_publishing_components/components/title", title: t('formats.local_transaction.find_council') %>
   <%= yield %>
 </main>
 

diff --git a/app/views/find_local_council/index.html.erb b/app/views/find_local_council/index.html.erb
@@ -1,9 +1,9 @@
 <%= render layout: 'base_page' do %>
   <p class="govuk-body"><%= t('formats.local_transaction.find_council_website') %></p>
   <%= render partial: 'location_form',
-             locals: {
-               format: 'service',
-               publication_format: 'find_local_council',
-               postcode: @postcode,
-             } %>
+    locals: {
+      format: 'service',
+      publication_format: 'find_local_council',
+      postcode: @postcode,
+    } %>
 <% end %>