From 4b7ced587c57a9405649a54ab5b6f859c8d8b1b8 Mon Sep 17 00:00:00 2001 From: Jane Date: Tue, 21 May 2024 12:55:13 +0100 Subject: [PATCH 1/9] update FIS header to include basic search as per standard homepage, without dropdown --- .../patterns/organisms/header/header-fis.html | 12 ++---------- bc/static_src/sass/abstracts/_mixins.scss | 9 +++++++++ bc/static_src/sass/components/_button.scss | 9 +++++++++ bc/static_src/sass/layout/_header.scss | 16 +++++++++++----- 4 files changed, 31 insertions(+), 15 deletions(-) diff --git a/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html b/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html index bf416589..1e5a9620 100644 --- a/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html +++ b/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html @@ -10,21 +10,13 @@ {% header_title %}
- {% if is_pensions_site %} - {% else %} - - {% endif %}
diff --git a/bc/static_src/sass/abstracts/_mixins.scss b/bc/static_src/sass/abstracts/_mixins.scss index 7e619d90..93f9935d 100755 --- a/bc/static_src/sass/abstracts/_mixins.scss +++ b/bc/static_src/sass/abstracts/_mixins.scss @@ -209,6 +209,15 @@ background: darken($backgroundColor, 3%); color: $textColor; } + + .icon { + fill: $textColor; + + &--stroke { + fill: transparent; + stroke: $textColor; + } + } } @mixin focus() { diff --git a/bc/static_src/sass/components/_button.scss b/bc/static_src/sass/components/_button.scss index 43c29827..75681cad 100644 --- a/bc/static_src/sass/components/_button.scss +++ b/bc/static_src/sass/components/_button.scss @@ -84,6 +84,15 @@ @include button($color--slate, $color--leaf, $color--leaf); } + &--no-border { + border-bottom: 0; + + &:focus, + &:active { + border-bottom: 0; + } + } + &--area-search { display: flex; min-height: 40px; diff --git a/bc/static_src/sass/layout/_header.scss b/bc/static_src/sass/layout/_header.scss index f333837e..6c751631 100644 --- a/bc/static_src/sass/layout/_header.scss +++ b/bc/static_src/sass/layout/_header.scss @@ -34,7 +34,6 @@ } .template-home-page &, - .template-fis-home &, .template-jobs-home &, .template-searchresults & { display: none; @@ -52,8 +51,13 @@ } #{$root}__search { - margin-top: 0; - width: auto; + display: none; + + @include media-query(tablet-portrait) { + display: block; + margin-top: 0; + width: auto; + } } #{$root}__search-button { @@ -218,6 +222,7 @@ } @include media-query(px550) { + @include font-size(m); flex: 0 1 50%; line-height: 1.25; margin-top: 0; @@ -260,9 +265,10 @@ display: none; } - @include media-query(tablet-landscape) { + @include media-query(tablet-portrait) { &__heading { - display: block; + display: flex; + align-items: center; } } } From 06fa463215a2aeaa7101f94fbcf87bcffd59e7ae Mon Sep 17 00:00:00 2001 From: Jane Date: Tue, 4 Jun 2024 15:10:31 +0100 Subject: [PATCH 2/9] update layout of search on mobile --- bc/static_src/sass/layout/_header.scss | 28 ++++++++++---------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/bc/static_src/sass/layout/_header.scss b/bc/static_src/sass/layout/_header.scss index 6c751631..3932ea65 100644 --- a/bc/static_src/sass/layout/_header.scss +++ b/bc/static_src/sass/layout/_header.scss @@ -45,17 +45,18 @@ } &--fis { - #{$root}__heading, - #{$root}__heading-title { + #{$root}__heading { display: block; + margin-top: $grid--min; } #{$root}__search { - display: none; + margin-bottom: $grid--min; @include media-query(tablet-portrait) { display: block; margin-top: 0; + margin-bottom: 0; width: auto; } } @@ -89,6 +90,13 @@ margin: 0 $grid--min; } + @include media-query(px550) { + #{$root}__heading-title { + display: block; + margin-bottom: $grid--min; + } + } + @include media-query(tablet-portrait) { #{$root}__heading { display: flex; @@ -258,18 +266,4 @@ color: $color--grey-light; } } - - .template-fis-home & { - &__heading, - &__search { - display: none; - } - - @include media-query(tablet-portrait) { - &__heading { - display: flex; - align-items: center; - } - } - } } From 36e2320ea65d2c92a2de8a49b296c1d0ad1b82e7 Mon Sep 17 00:00:00 2001 From: Jane Date: Tue, 4 Jun 2024 15:35:42 +0100 Subject: [PATCH 3/9] add invisible border to better distinguish element boundaries in high contrast modes --- bc/static_src/sass/components/_family-info.scss | 2 ++ bc/static_src/sass/components/_form.scss | 2 +- bc/static_src/sass/components/_search-header.scss | 2 ++ bc/static_src/sass/layout/_header.scss | 2 ++ 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/bc/static_src/sass/components/_family-info.scss b/bc/static_src/sass/components/_family-info.scss index bd584d3a..3dc59cc0 100644 --- a/bc/static_src/sass/components/_family-info.scss +++ b/bc/static_src/sass/components/_family-info.scss @@ -11,6 +11,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; padding: 60px 0; label { diff --git a/bc/static_src/sass/components/_form.scss b/bc/static_src/sass/components/_form.scss index e3fbc47e..ff9f0f61 100644 --- a/bc/static_src/sass/components/_form.scss +++ b/bc/static_src/sass/components/_form.scss @@ -110,7 +110,7 @@ margin-bottom: $grid; input[type='text'] { - border: 0; + border: 1px solid transparent; @include media-query(tablet-portrait) { width: 100%; diff --git a/bc/static_src/sass/components/_search-header.scss b/bc/static_src/sass/components/_search-header.scss index 595bcffa..8f70c99a 100644 --- a/bc/static_src/sass/components/_search-header.scss +++ b/bc/static_src/sass/components/_search-header.scss @@ -24,6 +24,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; margin-bottom: $grid; } diff --git a/bc/static_src/sass/layout/_header.scss b/bc/static_src/sass/layout/_header.scss index 3932ea65..b2a8c6d8 100644 --- a/bc/static_src/sass/layout/_header.scss +++ b/bc/static_src/sass/layout/_header.scss @@ -26,6 +26,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; width: 100%; margin-top: $grid--small; From 5bb5fc9689fac8792b44f70d6cb265fb6a18fe0a Mon Sep 17 00:00:00 2001 From: Jane Date: Tue, 4 Jun 2024 15:41:17 +0100 Subject: [PATCH 4/9] update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9f69876..954eeaba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +- Update FIS search in header - remove dropdown search and simplify to single text input, consistent with the standard homepage +- Add transparent border to search inputs to improve visibility of input boundary in high contrast mode + Compare: ## 71.00 (2024-06-03) From 714c1183e406752afd92e22041492f62d75087c0 Mon Sep 17 00:00:00 2001 From: Jane Date: Mon, 10 Jun 2024 10:50:02 +0100 Subject: [PATCH 5/9] hide header search from FIS homepage and search pages --- bc/static_src/sass/layout/_header.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/bc/static_src/sass/layout/_header.scss b/bc/static_src/sass/layout/_header.scss index b2a8c6d8..a3517f77 100644 --- a/bc/static_src/sass/layout/_header.scss +++ b/bc/static_src/sass/layout/_header.scss @@ -37,7 +37,8 @@ .template-home-page &, .template-jobs-home &, - .template-searchresults & { + .template-searchresults &, + .template-fis-home & { display: none; } @@ -56,7 +57,6 @@ margin-bottom: $grid--min; @include media-query(tablet-portrait) { - display: block; margin-top: 0; margin-bottom: 0; width: auto; @@ -268,4 +268,18 @@ color: $color--grey-light; } } + + .template-fis-home & { + &__heading, + &__search { + display: none; + } + + @include media-query(tablet-portrait) { + &__heading { + display: flex; + align-items: center; + } + } + } } From 5888518900273db100e28a2c07afac80e97cd893 Mon Sep 17 00:00:00 2001 From: Jane Date: Mon, 10 Jun 2024 10:52:48 +0100 Subject: [PATCH 6/9] update placeholder text for FIS header search input --- .../templates/patterns/organisms/header/header-fis.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html b/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html index 1e5a9620..b610fbab 100644 --- a/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html +++ b/bc/project_styleguide/templates/patterns/organisms/header/header-fis.html @@ -12,7 +12,7 @@