Merge pull request #722 from nationalarchives/fcl-48-harmonise-the-co…

…ntainer-widths-in-pui

Harmonise the PUI containers and headers

config/views.py

@@ -56,7 +56,7 @@ def get_context_data(self, **kwargs):
 
 class StructuredSearchView(TemplateViewWithContext):
     template_name = "pages/structured_search.html"
-    page_title = "search.title"
+    page_title = "structured_search.title"
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
@@ -71,6 +71,7 @@ class CheckView(TemplateViewWithContext):
 
 class WhatToExpectView(TemplateViewWithContext):
     template_name = "pages/what_to_expect.html"
+    page_title = "whattoexpect.title"
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
@@ -81,6 +82,7 @@ def get_context_data(self, **kwargs):
 
 class HowToUseThisService(TemplateViewWithContext):
     template_name = "pages/how_to_use_this_service.html"
+    page_title = "howtousethisservice.title"
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)

ds_judgements_public_ui/sass/includes/_footer.scss

@@ -1,3 +1,27 @@
+.pre-footer {
+  background-color: $color__light-grey;
+
+  &__container {
+    @include container;
+    padding: calc($spacer__unit * 2.5) 0;
+
+    text-align: center;
+
+    h2 {
+      padding-top: 0;
+      font-weight: normal;
+      font-size: 1.3rem;
+    }
+  }
+
+  &__cta-button {
+    @include call-to-action-button-secondary;
+    &:visited {
+      color: #ffffff;
+    }
+  }
+}
+
 .judgments-footer {
   background-color: $color__almost-black;
   color: $color__white;

ds_judgements_public_ui/sass/includes/_global.scss → ds_judgements_public_ui/sass/includes/_forms.scss

@@ -1,8 +1,3 @@
-body {
-  margin: 0;
-  font-family: $font__open-sans;
-}
-
 input[type="number"] {
   -moz-appearance: textfield;
 }

ds_judgements_public_ui/sass/includes/_header.scss

@@ -1,11 +1,22 @@
 .page-header {
   background-color: $color__almost-black;
-  padding: 0;
+
+  &__container {
+    @include container;
+    padding: calc($spacer__unit * 1.5) 0;
+
+    display: flex;
+    justify-content: space-between;
+
+    @media only screen and (max-width: $grid__breakpoint-medium) {
+      flex-direction: column-reverse;
+      text-align: center;
+    }
+  }
 
   &__breadcrumb {
     display: flex;
     align-items: center;
-    padding: calc($spacer__unit / 2) 0;
 
     ol {
       list-style-type: none;
@@ -71,20 +82,11 @@
     }
   }
 
-  &__container {
-    @include container;
-    display: flex;
-    justify-content: space-between;
-    @media only screen and (max-width: $grid__breakpoint-medium) {
-      flex-direction: column-reverse;
-      text-align: center;
-    }
-  }
-
   &__logo {
     width: 250px;
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
+
     @media only screen and (max-width: $grid__breakpoint-medium) {
       max-width: 200px;
     }
@@ -94,7 +96,7 @@
     font-size: 0.9rem;
     color: $color__white;
     text-align: right;
-    padding: 1rem 0;
+
     @media only screen and (max-width: $grid__breakpoint-medium) {
       text-align: center;
       padding-bottom: 0;

ds_judgements_public_ui/sass/includes/_homepage_browse.scss

@@ -1,8 +1,7 @@
 .judgment-browse {
-  @include container;
-  padding-bottom: calc($spacer__unit * 2);
-
-  @media only screen and (min-width: $grid__breakpoint-medium) {
+  &__container {
+    @include container;
+    padding-bottom: calc($spacer__unit * 2);
   }
 
   &__header {

ds_judgements_public_ui/sass/includes/_layout.scss

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

ds_judgements_public_ui/sass/includes/_links.scss

@@ -1,25 +1,3 @@
-a {
-  color: $color__link-blue;
-  text-decoration: underline;
-
-  &:hover {
-    color: $color__link-blue-hover;
-    text-decoration: none;
-  }
-
-  &:active {
-    color: $color__link-blue-active;
-  }
-
-  &:focus {
-    @include focus-default;
-    color: $color__link-blue-focus;
-  }
-  &:visited {
-    color: $color__link-blue-visited;
-  }
-}
-
 #skip-to-main-content {
   position: absolute;
   top: -3rem;

ds_judgements_public_ui/sass/includes/_mixins.scss

@@ -35,24 +35,6 @@
   overflow: hidden;
 }
 
-@mixin container {
-  padding: 0 $spacer__unit;
-  margin: auto;
-  max-width: 90%;
-
-  @media (min-width: $grid__breakpoint-small) {
-    max-width: 30rem;
-  }
-
-  @media (min-width: $grid__breakpoint-medium) {
-    min-width: 45rem;
-  }
-
-  @media (min-width: $grid__breakpoint-extra-large) {
-    max-width: 1400px;
-  }
-}
-
 @mixin call-to-action-button {
   background-color: $color__cta-background;
   text-decoration: none;

ds_judgements_public_ui/sass/includes/_phase_banner.scss

@@ -1,7 +1,11 @@
 .phase-banner {
   background-color: $color__yellow;
   color: $color__black;
-  padding: calc($spacer__unit / 2) calc($spacer__unit * 2);
+
+  &__container {
+    @include container;
+    padding: calc($spacer__unit / 2) 0;
+  }
 
   &__notice {
     padding: 0.3em 0;
@@ -31,8 +35,4 @@
     margin: 0;
     display: inline;
   }
-
-  &__container {
-    @include container;
-  }
 }

ds_judgements_public_ui/sass/includes/_recent_judments.scss → ds_judgements_public_ui/sass/includes/_recent_judgments.scss

@@ -1,7 +1,8 @@
 .recent-judgments {
   &__container {
     @include container;
-    padding: calc($spacer__unit * 4) 0 $spacer__unit;
+    padding-top: calc($spacer__unit * 2);
+    padding-bottom: calc($spacer__unit * 2);
   }
 
   &__header {

ds_judgements_public_ui/sass/includes/_service_introduction.scss

@@ -1,6 +1,5 @@
 .service-introduction {
   background-color: $color__almost-black;
-  padding: 0 0 2rem;
   flex-grow: 1;
 
   &__header {
@@ -11,7 +10,7 @@
     font-family: $font__roboto;
     font-weight: normal;
     color: $color__white;
-    margin: $spacer__unit 0 0 0;
+    margin: 0;
   }
 
   &__helper-text {

ds_judgements_public_ui/sass/includes/_standard_text_template.scss

@@ -4,10 +4,6 @@
   font-size: 1.1rem;
   line-height: 1.4em;
 
-  @media (min-width: $grid__breakpoint-medium) {
-    max-width: 30rem;
-  }
-
   margin-top: calc($spacer__unit * 4);
   margin-bottom: calc($spacer__unit * 4);
   min-height: 18rem;

ds_judgements_public_ui/sass/includes/_variables.scss

@@ -22,6 +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;
 $grid__breakpoint-small: 576px;
 $grid__breakpoint-medium: 768px;
 $grid__breakpoint-large: 992px;

ds_judgements_public_ui/sass/main.scss

@@ -1,37 +1,40 @@
+// Setup
 @import "includes/variables";
 @import "includes/mixins";
 
-@import "includes/global";
+// Core
+@import "includes/layout";
 @import "includes/typography";
+@import "includes/header";
+@import "includes/footer";
 
+// Components
 @import "includes/animations";
-@import "includes/service_introduction";
-@import "includes/search";
-@import "includes/recent_judments";
 @import "includes/browse_by_court";
-@import "includes/links";
-@import "includes/structured_search";
-@import "includes/results";
-@import "includes/results_search_component";
-@import "includes/result_controls";
+@import "includes/buttons";
+@import "includes/cookie_consent/cookie-consent";
+@import "includes/cookie_consent/ds-cookie-consent";
+@import "includes/document_navigation_links";
+@import "includes/forms";
+@import "includes/help_end_document_marker";
+@import "includes/homepage_browse";
+@import "includes/js_enabled";
+@import "includes/judgment_text_download_options";
+@import "includes/judgment_text_end_document_marker";
+@import "includes/judgment_text_service_introduction";
+@import "includes/judgment_text_source";
+@import "includes/judgment_text_toolbar";
+@import "includes/judgment_text";
 @import "includes/judgments_listing";
+@import "includes/links";
 @import "includes/pagination";
 @import "includes/phase_banner";
-@import "includes/footer";
-@import "includes/header";
-@import "includes/judgment_text";
-@import "includes/judgment_text_toolbar";
-@import "includes/judgment_text_source";
-@import "includes/judgment_text_service_introduction";
-@import "includes/judgment_text_end_document_marker";
-@import "includes/judgment_text_download_options";
+@import "includes/recent_judgments";
+@import "includes/result_controls";
+@import "includes/results_search_component";
+@import "includes/results";
+@import "includes/search";
+@import "includes/service_introduction";
 @import "includes/standard_text_template";
-@import "includes/how_can_this_service_be_improved";
-@import "includes/document_navigation_links";
-@import "includes/cookie_consent/ds-cookie-consent";
-@import "includes/cookie_consent/cookie-consent";
-@import "includes/homepage_browse";
+@import "includes/structured_search";
 @import "includes/what_to_expect";
-@import "includes/help_end_document_marker";
-@import "includes/js_enabled";
-@import "includes/buttons";

ds_judgements_public_ui/templates/403.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}
   Forbidden - Find Case Law
 {% endblock title %}

ds_judgements_public_ui/templates/404.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}
   Page not found - Find case law
 {% endblock title %}

ds_judgements_public_ui/templates/500.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "layouts/base.html" %}
 {% block title %}
   Server Error - Find Case Law
 {% endblock title %}