Merge branch 'feature/fis-header-search' into 'release'

FIS header changes - search See merge request buckinghamshire-council/bc!693
Buckinghamshire-Digital-Service · Jul 10, 2024 · 94f0446 · 94f0446
2 parents 5f3f426 + e10998a
commit 94f0446
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release History
 
+## 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
+
 ## 73.0 (2024-07-09)
 
 Compare: <https://git.torchbox.com/buckinghamshire-council/bc/compare/72.01...73.0>

diff --git 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
@@ -83,6 +83,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/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
@@ -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
@@ -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
@@ -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;
 
@@ -34,9 +36,9 @@
         }
 
         .template-home-page &,
-        .template-fis-home &,
         .template-jobs-home &,
-        .template-searchresults & {
+        .template-searchresults &,
+        .template-fis-home & {
             display: none;
         }
 
@@ -46,14 +48,19 @@
     }
 
     &--fis {
-        #{$root}__heading,
-        #{$root}__heading-title {
+        #{$root}__heading {
             display: block;
+            margin-top: $grid--min;
         }
 
         #{$root}__search {
-            margin-top: 0;
-            width: auto;
+            margin-bottom: $grid--min;
+
+            @include media-query(tablet-portrait) {
+                margin-top: 0;
+                margin-bottom: 0;
+                width: auto;
+            }
         }
 
         #{$root}__search-button {
@@ -85,6 +92,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;
@@ -218,6 +232,7 @@
         }
 
         @include media-query(px550) {
+            @include font-size(m);
             flex: 0 1 50%;
             line-height: 1.25;
             margin-top: 0;
@@ -260,9 +275,10 @@
             display: none;
         }
 
-        @include media-query(tablet-landscape) {
+        @include media-query(tablet-portrait) {
             &__heading {
-                display: block;
+                display: flex;
+                align-items: center;
             }
         }
     }