Skip to content

Commit

Permalink
Make search bar more responsive
Browse files Browse the repository at this point in the history
Button text changes to search icon and padding is reduced on tablet.

Closes #115.
  • Loading branch information
rakyi committed Feb 8, 2020
1 parent 53da72a commit d43e8cc
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 4 deletions.
9 changes: 9 additions & 0 deletions src/assets/images/icon-search-white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 22 additions & 3 deletions src/components/_custom/searchbar/_searchbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "../../../helpers/all";
@import "../_partials/gradient-background";

$icon-search: url("../../../assets/images/icon-search-white.svg");

@include govuk-exports("sdn/component/searchbar") {
// todo replace colors from global variables
Expand All @@ -15,8 +16,13 @@
}

.sdn-searchbar {
padding-top: 52px;
padding-bottom: 35px;
padding-top: 15px;
padding-bottom: 15px;

@include govuk-media-query($from: tablet) {
padding-top: 52px;
padding-bottom: 35px;
}
}

.sdn-searchbar__item {
Expand All @@ -41,7 +47,6 @@
}

.sdn-searchbar-block__item {

display: flex;
align-items: center;

Expand All @@ -53,7 +58,21 @@

.sdn-searchbar-block__item--stretched {
align-items: stretch;
}

.sdn-searchbar-button {
@include govuk-media-query($until: tablet) {
padding: 20px;
background-image: $icon-search;
background-repeat: no-repeat;
background-position: center center;
background-size: 50%;
}
}

.sdn-searchbar-button--text {
@include govuk-media-query($until: tablet) {
display: none;
}
}
}
4 changes: 3 additions & 1 deletion src/components/_custom/searchbar/template.njk
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<input class="govuk-input" type="search" placeholder="{{ params.placeholder | default('Vyhľadať životnú situáciu') }}">
</div>
<div class="sdn-searchbar-block__item sdn-searchbar-block__item--stretched">
<button class="govuk-button govuk-button--large">{{ params.buttonText | default('Hľadat') }}</button>
<button class="govuk-button govuk-button--large sdn-searchbar-button">
<span class="sdn-searchbar-button--text">{{ params.buttonText | default('Hľadat') }}</span>
</button>
</div>
</div>
</div>
Expand Down

0 comments on commit d43e8cc

Please sign in to comment.