Merge pull request #726 from nationalarchives/fcl-49-fix-for-gutters-…

…on-mobile-views

Fix for gutters and vertical pacing on mobiles

ds_judgements_public_ui/sass/includes/_footer.scss

@@ -1,17 +1,13 @@
 .pre-footer {
   background-color: $color__light-grey;
 
-  &__container {
-    @include container;
-    padding: calc($spacer__unit * 2.5) 0;
+  text-align: center;
 
-    text-align: center;
-
-    h2 {
-      padding-top: 0;
-      font-weight: normal;
-      font-size: 1.3rem;
-    }
+  h2 {
+    padding-top: 0;
+    margin-bottom: 0;
+    font-weight: normal;
+    font-size: 1.3rem;
   }
 
   &__cta-button {
@@ -25,10 +21,11 @@
 .judgments-footer {
   background-color: $color__almost-black;
   color: $color__white;
-  padding: $spacer__unit;
 
-  &__container {
-    @include container;
+  font-size: 0.9rem;
+
+  @media (min-width: $grid__breakpoint-medium) {
+    font-size: 1rem;
   }
 
   &__links-container {
@@ -42,13 +39,24 @@
     @include sr-only;
   }
 
+  h3 {
+    @media (max-width: $grid__breakpoint-medium) {
+      padding-top: calc($spacer__unit / 2);
+      margin-bottom: calc($spacer__unit / 3);
+    }
+  }
+
   ul {
     padding: 0;
   }
 
   li {
     list-style: none;
-    margin-bottom: calc($spacer__unit / 2);
+    margin-bottom: calc($spacer__unit / 4);
+
+    @media (min-width: $grid__breakpoint-medium) {
+      margin-bottom: calc($spacer__unit / 2);
+    }
   }
 
   a {
@@ -57,9 +65,14 @@
 
   &__base-paragraph {
     text-align: left;
-    margin: calc($spacer__unit * 2) 0 calc($spacer__unit * 3);
-    font-size: 0.9rem;
-    line-height: 1.75rem;
+    font-size: 0.8rem;
+    line-height: 1.2rem;
+    margin-top: $spacer__unit * 1.5;
+
+    @media (min-width: $grid__breakpoint-medium) {
+      font-size: 0.9rem;
+      line-height: 1.4rem;
+    }
 
     @media (min-width: $grid__breakpoint-extra-large) {
       text-align: center;

ds_judgements_public_ui/sass/includes/_header.scss

@@ -1,10 +1,7 @@
 .page-header {
   background-color: $color__almost-black;
 
-  &__container {
-    @include container;
-    padding: calc($spacer__unit * 1.5) 0;
-
+  &__flex-container {
     display: flex;
     justify-content: space-between;
 
@@ -18,6 +15,12 @@
     display: flex;
     align-items: center;
 
+    &-flex-container {
+      @media only screen and (max-width: $grid__breakpoint-medium) {
+        flex-grow: 1;
+      }
+    }
+
     ol {
       list-style-type: none;
       padding: 0;

ds_judgements_public_ui/sass/includes/_layout.scss

@@ -1,25 +1,27 @@
 @mixin container {
-  padding: 0 $minimum_gutter_width;
+  padding: 0 $gutter_unit;
   margin: auto;
 
-  @media (min-width: $grid__breakpoint-small) {
-    max-width: $grid__breakpoint-small - ($minimum_gutter_width * 2);
-  }
+  max-width: $grid__breakpoint-small - ($gutter_unit * 1);
 
   @media (min-width: $grid__breakpoint-medium) {
-    max-width: $grid__breakpoint-medium - ($minimum_gutter_width * 2);
+    max-width: $grid__breakpoint-medium - ($gutter_unit * 1.5);
   }
 
   @media (min-width: $grid__breakpoint-large) {
-    max-width: $grid__breakpoint-large - ($minimum_gutter_width * 2);
+    max-width: $grid__breakpoint-large - ($gutter_unit * 2);
   }
 
   @media (min-width: $grid__breakpoint-extra-large) {
-    max-width: $grid__breakpoint-extra-large - ($minimum_gutter_width * 2);
+    max-width: $grid__breakpoint-extra-large - ($gutter_unit * 2);
   }
 }
 
 body {
   margin: 0;
   font-family: $font__open-sans;
 }
+
+.container {
+  @include container;
+}

ds_judgements_public_ui/sass/includes/_phase_banner.scss

@@ -2,11 +2,6 @@
   background-color: $color__yellow;
   color: $color__black;
 
-  &__container {
-    @include container;
-    padding: calc($spacer__unit / 2) 0;
-  }
-
   &__notice {
     padding: 0.3em 0;
 

ds_judgements_public_ui/sass/includes/_spacing.scss

@@ -0,0 +1,22 @@
+@for $i from 1 through 3 {
+  .my-#{$i} {
+    margin-top: $spacer__unit * $i;
+    margin-bottom: $spacer__unit * $i;
+  }
+  .mt-#{$i} {
+    margin-top: $spacer__unit * $i;
+  }
+  .mb-#{$i} {
+    margin-top: $spacer__unit * $i;
+  }
+  .py-#{$i} {
+    padding-top: $spacer__unit * $i;
+    padding-bottom: $spacer__unit * $i;
+  }
+  .pt-#{$i} {
+    padding-top: $spacer__unit * $i;
+  }
+  .pb-#{$i} {
+    padding-bottom: $spacer__unit * $i;
+  }
+}

ds_judgements_public_ui/sass/includes/_standard_text_template.scss

@@ -1,10 +1,6 @@
 .standard-text-template {
-  @include container;
-
   font-size: 1.1rem;
   line-height: 1.4em;
 
-  margin-top: calc($spacer__unit * 4);
-  margin-bottom: calc($spacer__unit * 4);
   min-height: 18rem;
 }

ds_judgements_public_ui/sass/includes/_variables.scss

@@ -22,7 +22,7 @@ $color__focus-blue-outline: $color__dark-blue;
 $color__cta-background: $color__aqua-blue;
 $color__cta-background-hover: $color__dark-blue;
 
-$minimum_gutter_width: 50px;
+$gutter_unit: 25px;
 $grid__breakpoint-small: 576px;
 $grid__breakpoint-medium: 768px;
 $grid__breakpoint-large: 992px;

ds_judgements_public_ui/sass/main.scss

@@ -4,6 +4,7 @@
 
 // Core
 @import "includes/layout";
+@import "includes/spacing";
 @import "includes/typography";
 @import "includes/header";
 @import "includes/footer";

ds_judgements_public_ui/templates/403.html

@@ -16,7 +16,7 @@
       </nav>
     </div>
   </header>
-  <div class="standard-text-template">
+  <div class="standard-text-template container py-3">
     <h1>Forbidden</h1>
     <p>
       {% if exception %}

ds_judgements_public_ui/templates/404.html

@@ -16,7 +16,7 @@
       </nav>
     </div>
   </header>
-  <div class="standard-text-template">
+  <div class="standard-text-template container py-3">
     <h1>Page not found</h1>
     <p>If you typed the web address, check it is correct.</p>
     <p>If you pasted the web address, check you copied the entire address.</p>

ds_judgements_public_ui/templates/500.html

@@ -16,7 +16,7 @@
       </nav>
     </div>
   </header>
-  <div class="standard-text-template">
+  <div class="standard-text-template container py-3">
     <h1>Server Error</h1>
     <p>Sorry, there seems to be an error. Please try again soon.</p>
     <p>

ds_judgements_public_ui/templates/includes/breadcrumbs.html

@@ -1,6 +1,7 @@
 {% load i18n %}
 <div class="page-header__breadcrumb">
-  <nav class="page-header__breadcrumb-container" aria-label="Breadcrumb">
+  <nav class="page-header__breadcrumb-flex-container"
+       aria-label="Breadcrumb">
     <ol>
       <li>
         <span class="page-header__breadcrumb-you-are-in">You are in:</span>

ds_judgements_public_ui/templates/includes/footer.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <footer class="judgments-footer">
-  <div class="judgments-footer__container">
+  <div class="container pt-2 pb-1">
     <h2 class="judgments-footer__heading">Footer</h2>
     <div class="judgments-footer__links-container">
       <div>

ds_judgements_public_ui/templates/includes/how_can_this_service_be_improved.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="pre-footer">
-  <div class="pre-footer__container">
+  <div class="container py-2">
     <h2>{% translate "service.improved" %}</h2>
     <a target="_blank"
        role="button"

ds_judgements_public_ui/templates/includes/phase_banner.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div class="phase-banner" id="js-phase-banner">
-  <div class="phase-banner__container">
+  <div class="container py-1">
     <div class="phase-banner__notice">
       <strong class="phase-banner__phase">Alpha</strong>
       <p class="phase-banner__message">

ds_judgements_public_ui/templates/layouts/base.html

@@ -35,7 +35,7 @@
     {% include "includes/phase_banner.html" %}
     <header class="page-header">
       {% block header %}
-        <div class="page-header__container">
+        <div class="page-header__flex-container container py-1">
           {% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %}
           {% include "includes/logo.html" %}
         </div>

ds_judgements_public_ui/templates/layouts/judgment.html

@@ -29,7 +29,7 @@
     {% include "includes/gtm/gtm_body.html" %}
     {% include "includes/phase_banner.html" %}
     <header class="page-header">
-      <div class="page-header__container">
+      <div class="page-header__flex-container container py-1">
         {% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %}
         {% include "includes/logo.html" %}
       </div>

ds_judgements_public_ui/templates/layouts/static_content.html

@@ -6,7 +6,7 @@
   {{ context.page_title }} - {% translate "common.findcaselaw" %}
 {% endblock title %}
 {% block content %}
-  <div class="standard-text-template">
+  <div class="standard-text-template container py-3">
     <div id="start-of-document" class="entry-content clearfix">
       {% block static_content %}
       {% endblock static_content %}

ds_judgements_public_ui/templates/pages/home.html

@@ -6,7 +6,7 @@
   {% translate "common.findcaselaw" %}
 {% endblock title %}
 {% block header %}
-  <div class="page-header__container">
+  <div class="page-header__flex-container container py-1">
     <div class="service-introduction">
       <span class="service-introduction__separator"></span>
       <h1 class="service-introduction__header">{% translate "common.findcaselaw" %}</h1>