From 3263706fcd1908d708056e421f1432fd42e66538 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 6 Oct 2020 16:33:44 +0100 Subject: [PATCH 01/10] Reset click size of template list link Was previously larger for links at the root level but this was lost when the HTML for these items was changed. See https://github.com/alphagov/notifications-admin/pull/2750 for details on the previous style. --- .../stylesheets/components/message.scss | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index 58341ba31..9e5f8b312 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -100,6 +100,34 @@ $message-type-bottom-spacing: govuk-spacing(4); } + .template-list-template, + .template-list-folder { + + position: relative; /* contain absolutely positioned ::before pseudo element*/ + display: block; /* fill horizontal space to allow hint/meta below to float */ + + &::before { + content: ''; + position: absolute; + left: 0px; + bottom: -100%; /* extend link by 100% of vertical size so it covers the hint/meta */ + width: 100%; + height: 100%; + } + + &:active::before, + &:focus::before { + background-color: $govuk-focus-colour; + box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour; + } + + & + .template-list-item-hint, + & + .message-type { + position: relative; /* needs to be non-static to have a z-index above the link :before element */ + } + + } + } &-label { From 5058727587e443d510900547c2e2f213becafc6c Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 7 Oct 2020 22:53:03 +0100 Subject: [PATCH 02/10] Tweak template-list items on mobile The font-size goes down to 16px on mobile. This changes the line-height too which makes it too small. This bumps it back up the be the same as on desktop which makes space for the icon (if a folder) and gives the link more space. Also reduces the horizontal space between the icon and its link by the same amount the font-size changes. --- app/assets/stylesheets/components/message.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index 9e5f8b312..75eb1f176 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -152,18 +152,25 @@ $message-type-bottom-spacing: govuk-spacing(4); &-folder, &-template { - @include govuk-font($size: 24, $weight: bold, $line-height: 1.25); + @include govuk-font($size: 24, $weight: bold, $line-height: 1.5); + @include govuk-media-query($from: tablet) { + line-height: 1.25; + } } &-folder { display: inline; - padding-left: 40px; + padding-left: 35px; background-image: file-url('folder-blue-bold.svg'); background-repeat: no-repeat; background-size: auto 20px; background-position: 0px 4px; + @include govuk-media-query($from: tablet) { + padding-left: 40px; + } + &:hover { background-image: file-url('folder-blue-bold-hover.svg'); } From 744d76e8d90a032e98fa29d0791ddde209dded1a Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 23 Oct 2020 12:00:33 +0100 Subject: [PATCH 03/10] Replace old focus CSS for message-name/-type Template list items without checkboxes use the `.message-name` and `.message-type` classes for their links and hints. This means styles used to expand the focus area previously are clashing with the new approach. This removes the old ones and gives `.message-type` paragraphs a non-static position to give them a z-position and so raise them above the expanded link area. --- app/assets/stylesheets/components/message.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index 75eb1f176..fa71ba05f 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -34,8 +34,6 @@ $message-type-bottom-spacing: govuk-spacing(4); margin: 0; a { - margin-bottom: -1 * govuk-spacing(6); - padding-bottom: govuk-spacing(6); &:hover .message-name-separator:before { border-color: $link-hover-colour; @@ -59,6 +57,7 @@ $message-type-bottom-spacing: govuk-spacing(4); } &-type { + position: relative; /* needs to be non-static to have a z-index above the link :before element */ color: $govuk-secondary-text-colour; margin: 0 0 $message-type-bottom-spacing 0; padding-left: 0; From 43d7d0a03439c6dbb4f3fa0c4852c2d0c97aa72b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 23 Oct 2020 14:07:45 +0100 Subject: [PATCH 04/10] Fix hint text colour contrast when focused Uses a colour that will be added to the core palette in GOVUK Frontend. See: https://design-system.service.gov.uk/styles/colour/#main-colours --- app/assets/stylesheets/components/message.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index fa71ba05f..a0abdaf0b 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -114,10 +114,19 @@ $message-type-bottom-spacing: govuk-spacing(4); height: 100%; } - &:active::before, - &:focus::before { - background-color: $govuk-focus-colour; - box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour; + &:active, + &:focus { + + &::before { + background-color: $govuk-focus-colour; + box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour; + } + + & + .template-list-item-hint, + & + .message-type { + color: #505A5F; /* TO DO: replace with $govuk-secondary-text-colour when GOVUK Frontend is past 3.x.x */ + } + } & + .template-list-item-hint, From 91faa1a8749b550d48fca0ff055510a31ae15dd4 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 23 Oct 2020 13:29:54 +0100 Subject: [PATCH 05/10] Fix class names of choose-reply links The links for templates without ancestors didn't have a `.template-list-template` class so miss out on styling given to the other links in the list. --- app/templates/views/templates/choose-reply.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/views/templates/choose-reply.html b/app/templates/views/templates/choose-reply.html index 9043685e0..b957b7926 100644 --- a/app/templates/views/templates/choose-reply.html +++ b/app/templates/views/templates/choose-reply.html @@ -51,7 +51,7 @@ {{ item.name }} {% else %} - + {{ item.name }} {% endif %} From a5c87367eece9c05acac22bb3894ddc9a37fe308 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 23 Oct 2020 17:01:12 +0100 Subject: [PATCH 06/10] Fix class names of copy template links --- app/templates/views/templates/copy.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/views/templates/copy.html b/app/templates/views/templates/copy.html index 6bd5f74ba..4d9b52da4 100644 --- a/app/templates/views/templates/copy.html +++ b/app/templates/views/templates/copy.html @@ -47,7 +47,7 @@ {{ item.name }} {% else %} - + {{ item.name }} {% endif %} From ae24f7b70799ae7872ef15a0b3c4ab48243e0db7 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 27 Oct 2020 16:19:37 +0000 Subject: [PATCH 07/10] Remove backslash from choose-reply page Looks like it was missed out from when they were all changed to chevrons: https://github.com/alphagov/notifications-admin/commit/e731dd70d174318b8efadc5bfaf7c46136f93b16 --- app/templates/views/templates/choose-reply.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/views/templates/choose-reply.html b/app/templates/views/templates/choose-reply.html index b957b7926..54977a323 100644 --- a/app/templates/views/templates/choose-reply.html +++ b/app/templates/views/templates/choose-reply.html @@ -44,7 +44,7 @@ {% for ancestor in item.ancestors %} {{ ancestor.name }} - / + {% endfor %} {% if item.is_folder %} From 0aa1dd89e9e62e41023abdb1f4e91c00a5fb7d18 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 27 Oct 2020 15:22:57 +0000 Subject: [PATCH 08/10] Make hint text focus colour match link --- app/assets/stylesheets/components/message.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index a0abdaf0b..d04a7dfa9 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -123,8 +123,8 @@ $message-type-bottom-spacing: govuk-spacing(4); } & + .template-list-item-hint, - & + .message-type { - color: #505A5F; /* TO DO: replace with $govuk-secondary-text-colour when GOVUK Frontend is past 3.x.x */ + .message-type { + color: $govuk-text-colour; } } From 2d5a165a2dec2bedfb2f7da0cbe64edab0a702e6 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 27 Oct 2020 17:03:01 +0000 Subject: [PATCH 09/10] Swap headings for list items in template list I'm mainly making this change because it's useful for the CSS that styles the hint text when the link is focused for the link to have no parent container. That being said, there isn't really enough content underneath these headings to justify them as it is. I've wrapped them in a list instead because: - they're structured like a list - we already called them a `template-list` This commit also replaces the `message-type` class on the paragraph below where the headings went, for consistency. It also removes the CSS for that class as I couldn't find anywhere else that used it now. --- .../stylesheets/components/message.scss | 8 --- .../views/templates/_template_list.html | 18 ++++--- .../views/templates/choose-reply.html | 38 +++++++------- app/templates/views/templates/copy.html | 50 +++++++++---------- tests/app/main/views/test_templates.py | 2 +- 5 files changed, 57 insertions(+), 59 deletions(-) diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index d04a7dfa9..21f0897fc 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -56,14 +56,6 @@ $message-type-bottom-spacing: govuk-spacing(4); } - &-type { - position: relative; /* needs to be non-static to have a z-index above the link :before element */ - color: $govuk-secondary-text-colour; - margin: 0 0 $message-type-bottom-spacing 0; - padding-left: 0; - pointer-events: none; - } - } .template-list { diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html index 0b30b18a1..2d4a4f849 100644 --- a/app/templates/views/templates/_template_list.html +++ b/app/templates/views/templates/_template_list.html @@ -26,6 +26,10 @@