Skip to content

Commit

Permalink
Merge pull request #2293 from alphagov/search-input-label
Browse files Browse the repository at this point in the history 
Replace hard coded site search with search component
  • Loading branch information
@danacotoran
danacotoran authored Oct 23, 2020
2 parents 71b5826 + 40e21e1 commit 8f2fb87
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 146 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/header-footer-only.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
192 changes: 49 additions & 143 deletions app/assets/stylesheets/helpers/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
}
Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand Down
9 changes: 6 additions & 3 deletions app/views/root/_base.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,12 @@
# changing this, as the redirect adds some parameters to the search query. %>
<form id="search" class="site-search govuk-clearfix" action="/search" method="get" role="search" aria-label="Sitewide">
<div class="content govuk-clearfix">
<label for="site-search-text">Search on GOV.UK</label>
<input type="search" name="q" id="site-search-text" title="Search" class="js-search-focus">
<input class="submit" type="submit" value="Search" />
<%= render "govuk_publishing_components/components/search", {
id: "site-search-text",
label_text: "Search on GOV.UK",
no_border: true,
margin_bottom: 0
} %>
</div>
</form>
<% end %>
Expand Down

0 comments on commit 8f2fb87

Please sign in to comment.