From b93bd3965cd11c8951fbf29663bc6bb305ea084a Mon Sep 17 00:00:00 2001 From: Nick Jackson Date: Thu, 25 May 2023 10:30:52 +0100 Subject: [PATCH 1/9] Container gutter now varies based on breakpoint --- ds_judgements_public_ui/sass/includes/_layout.scss | 12 +++++------- .../sass/includes/_variables.scss | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/ds_judgements_public_ui/sass/includes/_layout.scss b/ds_judgements_public_ui/sass/includes/_layout.scss index 09743bf74..f3e4e9a29 100644 --- a/ds_judgements_public_ui/sass/includes/_layout.scss +++ b/ds_judgements_public_ui/sass/includes/_layout.scss @@ -1,21 +1,19 @@ @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); } } diff --git a/ds_judgements_public_ui/sass/includes/_variables.scss b/ds_judgements_public_ui/sass/includes/_variables.scss index abe887667..c6bdac8b8 100644 --- a/ds_judgements_public_ui/sass/includes/_variables.scss +++ b/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; From 1ee134c234fab0cda3bd751c4fd3fbfb8eadd44b Mon Sep 17 00:00:00 2001 From: Nick Jackson Date: Thu, 25 May 2023 10:32:07 +0100 Subject: [PATCH 2/9] Introduce new spacing classes These will allow us to collapse a lot of duplicated CSS, since the container and vertical margin/padding classes are now completely reusable. This will in turn reduce the size of the CSS payload. --- .../sass/includes/_layout.scss | 4 ++++ .../sass/includes/_spacing.scss | 22 +++++++++++++++++++ ds_judgements_public_ui/sass/main.scss | 1 + 3 files changed, 27 insertions(+) create mode 100644 ds_judgements_public_ui/sass/includes/_spacing.scss diff --git a/ds_judgements_public_ui/sass/includes/_layout.scss b/ds_judgements_public_ui/sass/includes/_layout.scss index f3e4e9a29..4540a0529 100644 --- a/ds_judgements_public_ui/sass/includes/_layout.scss +++ b/ds_judgements_public_ui/sass/includes/_layout.scss @@ -21,3 +21,7 @@ body { margin: 0; font-family: $font__open-sans; } + +.container { + @include container; +} diff --git a/ds_judgements_public_ui/sass/includes/_spacing.scss b/ds_judgements_public_ui/sass/includes/_spacing.scss new file mode 100644 index 000000000..82980829d --- /dev/null +++ b/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; + } +} diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss index 61c61ca0d..c7f67dcd5 100644 --- a/ds_judgements_public_ui/sass/main.scss +++ b/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"; From 7a492dfa6d476474eae21b02b8397b027b627e81 Mon Sep 17 00:00:00 2001 From: Nick Jackson Date: Thu, 25 May 2023 10:32:59 +0100 Subject: [PATCH 3/9] Phase banner container now uses standard classes --- ds_judgements_public_ui/sass/includes/_phase_banner.scss | 5 ----- ds_judgements_public_ui/templates/includes/phase_banner.html | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/ds_judgements_public_ui/sass/includes/_phase_banner.scss b/ds_judgements_public_ui/sass/includes/_phase_banner.scss index 2a6b2e0ee..2f639fece 100644 --- a/ds_judgements_public_ui/sass/includes/_phase_banner.scss +++ b/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; diff --git a/ds_judgements_public_ui/templates/includes/phase_banner.html b/ds_judgements_public_ui/templates/includes/phase_banner.html index 2ee072c3a..d51e54471 100644 --- a/ds_judgements_public_ui/templates/includes/phase_banner.html +++ b/ds_judgements_public_ui/templates/includes/phase_banner.html @@ -1,6 +1,6 @@ {% load i18n %}
-
+
Alpha

From d23bb8e61150f5bce2342c7689c377ce4c56b113 Mon Sep 17 00:00:00 2001 From: Nick Jackson Date: Thu, 25 May 2023 10:40:55 +0100 Subject: [PATCH 4/9] Page header now uses standard classes --- ds_judgements_public_ui/sass/includes/_header.scss | 5 +---- ds_judgements_public_ui/templates/layouts/base.html | 2 +- ds_judgements_public_ui/templates/layouts/judgment.html | 2 +- ds_judgements_public_ui/templates/pages/home.html | 2 +- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/ds_judgements_public_ui/sass/includes/_header.scss b/ds_judgements_public_ui/sass/includes/_header.scss index ae10120eb..32f7b44fd 100644 --- a/ds_judgements_public_ui/sass/includes/_header.scss +++ b/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; diff --git a/ds_judgements_public_ui/templates/layouts/base.html b/ds_judgements_public_ui/templates/layouts/base.html index d2e4cb7c1..a5aab72f5 100644 --- a/ds_judgements_public_ui/templates/layouts/base.html +++ b/ds_judgements_public_ui/templates/layouts/base.html @@ -35,7 +35,7 @@ {% include "includes/phase_banner.html" %}

{% block header %} -
+
{% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %} {% include "includes/logo.html" %}
diff --git a/ds_judgements_public_ui/templates/layouts/judgment.html b/ds_judgements_public_ui/templates/layouts/judgment.html index 2163ed0a5..d3fb7a962 100644 --- a/ds_judgements_public_ui/templates/layouts/judgment.html +++ b/ds_judgements_public_ui/templates/layouts/judgment.html @@ -29,7 +29,7 @@ {% include "includes/gtm/gtm_body.html" %} {% include "includes/phase_banner.html" %}
-
+
{% include "includes/breadcrumbs.html" with current=context.page_title title=context.page_title link=request.path %} {% include "includes/logo.html" %}
diff --git a/ds_judgements_public_ui/templates/pages/home.html b/ds_judgements_public_ui/templates/pages/home.html index af65abe78..38cd95453 100644 --- a/ds_judgements_public_ui/templates/pages/home.html +++ b/ds_judgements_public_ui/templates/pages/home.html @@ -6,7 +6,7 @@ {% translate "common.findcaselaw" %} {% endblock title %} {% block header %} -
+

{% translate "common.findcaselaw" %}

From 4a1297cd3095e0879b67f2808a59a10ad4b9862c Mon Sep 17 00:00:00 2001 From: Nick Jackson Date: Thu, 25 May 2023 10:47:15 +0100 Subject: [PATCH 5/9] Breadcrumb container now correctly fills with and centres content --- ds_judgements_public_ui/sass/includes/_header.scss | 6 ++++++ ds_judgements_public_ui/templates/includes/breadcrumbs.html | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/ds_judgements_public_ui/sass/includes/_header.scss b/ds_judgements_public_ui/sass/includes/_header.scss index 32f7b44fd..1de625dd4 100644 --- a/ds_judgements_public_ui/sass/includes/_header.scss +++ b/ds_judgements_public_ui/sass/includes/_header.scss @@ -15,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; diff --git a/ds_judgements_public_ui/templates/includes/breadcrumbs.html b/ds_judgements_public_ui/templates/includes/breadcrumbs.html index 9b8915e53..b228ccaff 100644 --- a/ds_judgements_public_ui/templates/includes/breadcrumbs.html +++ b/ds_judgements_public_ui/templates/includes/breadcrumbs.html @@ -1,6 +1,7 @@ {% load i18n %}
-
-
+

Forbidden

{% if exception %} diff --git a/ds_judgements_public_ui/templates/404.html b/ds_judgements_public_ui/templates/404.html index 4d4b19870..932d92c2d 100644 --- a/ds_judgements_public_ui/templates/404.html +++ b/ds_judgements_public_ui/templates/404.html @@ -16,7 +16,7 @@

-
+

Page not found

If you typed the web address, check it is correct.

If you pasted the web address, check you copied the entire address.

diff --git a/ds_judgements_public_ui/templates/500.html b/ds_judgements_public_ui/templates/500.html index 24fc79239..157b932b4 100644 --- a/ds_judgements_public_ui/templates/500.html +++ b/ds_judgements_public_ui/templates/500.html @@ -16,7 +16,7 @@
-
+

Server Error

Sorry, there seems to be an error. Please try again soon.

diff --git a/ds_judgements_public_ui/templates/layouts/static_content.html b/ds_judgements_public_ui/templates/layouts/static_content.html index 10622990c..22c6b8cbe 100644 --- a/ds_judgements_public_ui/templates/layouts/static_content.html +++ b/ds_judgements_public_ui/templates/layouts/static_content.html @@ -6,7 +6,7 @@ {{ context.page_title }} - {% translate "common.findcaselaw" %} {% endblock title %} {% block content %} -

+
{% block static_content %} {% endblock static_content %}