From be0ca3ee1f7ed98324127b6e54aeb57c0ad24bc5 Mon Sep 17 00:00:00 2001 From: Dana Cotoran Date: Tue, 13 Oct 2020 17:12:16 +0100 Subject: [PATCH 1/2] Replace hard coded site search with component --- .../stylesheets/header-footer-only.scss | 1 + app/assets/stylesheets/helpers/_header.scss | 192 +++++------------- app/views/root/_base.html.erb | 9 +- 3 files changed, 56 insertions(+), 146 deletions(-) diff --git a/app/assets/stylesheets/header-footer-only.scss b/app/assets/stylesheets/header-footer-only.scss index 238f18701..d27838504 100644 --- a/app/assets/stylesheets/header-footer-only.scss +++ b/app/assets/stylesheets/header-footer-only.scss @@ -6,6 +6,7 @@ $govuk-use-legacy-palette: false; // collections uses the action-link component and relies upon this line, see // https://github.com/alphagov/collections/pull/1754 @import "govuk_publishing_components/components/_action-link"; +@import "govuk_publishing_components/components/_search"; /* govuk_frontend_toolkit includes */ @import "colours"; diff --git a/app/assets/stylesheets/helpers/_header.scss b/app/assets/stylesheets/helpers/_header.scss index 3d3366df1..6fc4d624b 100644 --- a/app/assets/stylesheets/helpers/_header.scss +++ b/app/assets/stylesheets/helpers/_header.scss @@ -9,6 +9,14 @@ $govuk-header-link-hover: govuk-colour("white"); $govuk-header-link-active: #1d8feb; $govuk-header-nav-item-border-color: #2e3133; + position: relative; + + .header-logo { + width: 100%; + @include govuk-media-query($from: tablet) { + width: auto; + } + } #logo { background: none; @@ -78,9 +86,11 @@ } .header-wrapper .header-global .site-search { - width: 49%; float: right; + @include govuk-media-query($from: tablet) { + width: 49%; + } @include govuk-media-query($from: desktop) { width: 33.33%; } @@ -97,43 +107,47 @@ &.with-proposition { #search { - margin-top: 4px; + @include govuk-media-query($from: tablet) { + margin-top: govuk-spacing(1); + box-sizing: border-box; + } } } .search-toggle { - display: none; + @include govuk-media-query($from: tablet) { + display: none; + } + position: absolute; + right: 0; + top: 0; + background-color: $govuk-brand-colour; + background-image: image-url("search-button.png"); + background-position: 0 50%; + background-repeat: no-repeat; + display: block; + height: 30px; + margin: govuk-spacing(2) govuk-spacing(3); + overflow: hidden; + padding: 0; + text-indent: -5000px; + width: 36px; + border: 0; - @media screen and (max-width: 379px) { - background-color: $govuk-brand-colour; - background-image: image-url("search-button.png"); - background-position: 0 50%; - background-repeat: no-repeat; - display: block; - float: right; - height: 30px; - margin: -32px govuk-spacing(3); - overflow: hidden; - padding: 0; - text-indent: -5000px; - width: 36px; - border: 0; - - &:focus { - border-width: 0; - box-shadow: inset 0 0 0 4px $govuk-input-border-colour; - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - } + &:focus { + border-width: 0; + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: 0; + } - body.search & { - display: none; - } + body.search & { + display: none; + } - @include device-pixel-ratio() { - background-size: 52.5px 35px; - background-position: 100% 50%; - } + @include device-pixel-ratio() { + background-size: 52.5px 35px; + background-position: 100% 50%; } &:hover { @@ -146,125 +160,17 @@ } form#search { + display: none; + .content { position: relative; - background: govuk-colour("white"); } - label { - float: left; - min-height: 36px; - line-height: 35px; - text-indent: 15px; - overflow: hidden; - display: block; - margin-right: govuk-spacing(2); - - .js-enabled & { - float: none; - position: absolute; - left: 0; - top: 1px; - z-index: 1; - width: 100%; - margin-right: 0; - } - } - - input { - @include box-sizing(border-box); - float: left; - width: 50%; - min-width: 0; + &.js-visible { display: block; - margin: 0; - border: 0; - min-height: 36px; - padding: 6px 0; - - &::-moz-focus-inner { - border: 0; - } - - @include appearance(none); - } - - input#site-search-text { - @include govuk-font(16, $line-height: (23/16)); - background: transparent; - height: 36px; - padding: 6px; - position: relative; - z-index: 3; - - @include govuk-media-query($from: tablet) { - @include govuk-font(16, $line-height: (23/13)); - } - - &.focus, - &:focus { - background: govuk-colour("white"); - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - z-index: 5; - } - - .js-enabled & { - width: 86%; - @include calc(width, "100% - 35.1px"); /* 35.1 is for Safari, which renders this input too narrow */ - } } - input.submit { - position: absolute; - z-index: 4; - right: 0; - top: 0; - width: 36px; - height: 36px; - - border: 1px solid $govuk-brand-colour; - border-width: 0 0 0 1px; - border-left-color: #222; - border-radius: 0; - - overflow: hidden; - text-indent: -5000px; - - color: govuk-colour("white"); - background-color: $govuk-brand-colour; - background-image: image-url("search-button.png"); - background-repeat: no-repeat; - background-position: 0 50%; - - @include device-pixel-ratio() { - background-size: 52.5px 35px; - background-position: 100% 50%; - } - - &:hover { - background-color: darken($govuk-brand-colour, 5%); - } - - &.focus, - &:focus { - border-width: 0; - box-shadow: inset 0 0 0 4px $govuk-input-border-colour; - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - } - } - - @media screen and (max-width: 379px) { - display: none; - width: 100%; - - #site-search-text { - width: 80%; - } - } - - &.js-visible { + @include govuk-media-query($from: tablet) { display: block; } } diff --git a/app/views/root/_base.html.erb b/app/views/root/_base.html.erb index 934dff589..45ec7fb39 100644 --- a/app/views/root/_base.html.erb +++ b/app/views/root/_base.html.erb @@ -16,9 +16,12 @@ # changing this, as the redirect adds some parameters to the search query. %> <% end %> From 40e21e1587126e3c075741c08c923d78a064de4d Mon Sep 17 00:00:00 2001 From: Dana Cotoran Date: Mon, 19 Oct 2020 14:56:24 +0100 Subject: [PATCH 2/2] Label text correction --- app/views/root/_base.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/root/_base.html.erb b/app/views/root/_base.html.erb index 45ec7fb39..ebb9cd41a 100644 --- a/app/views/root/_base.html.erb +++ b/app/views/root/_base.html.erb @@ -18,7 +18,7 @@
<%= render "govuk_publishing_components/components/search", { id: "site-search-text", - label_text: "Search", + label_text: "Search on GOV.UK", no_border: true, margin_bottom: 0 } %>