darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 19:43:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update buttons that are inline with search box

Browse Source 
There were 3 pages where we had a search button inline with a text box.
This replaces the search button with a button from govuk-frontend and
updates the way we style this button to use BEM, which is the style we
now want to use.
This commit is contained in:
Katie Smith
2020-01-30 11:44:20 +00:00
parent f3bb93f460
commit 7ff8b73088
4 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/components/page-footer.scss
View File

@@ -76,20 +76,18 @@
} }
.align-button-with-textbox { .search-form__button {
@include media(desktop) {
position: relative;
top: 32px;
left: -30px;
width: 100%;
margin-right: -30px;
padding-top: 7px;
box-sizing: content-box;
.button { &:active {
@include media(desktop) {
position: relative;
top: 32px; top: 32px;
left: -30px;
width: 100%;
margin-right: -30px;
padding-top: 8px;
box-sizing: content-box;
} }
} }
} }

8
app/templates/views/find-services/find-services-by-name.html
View File

@@ -1,6 +1,7 @@
{% extends "views/platform-admin/_base_template.html" %} {% extends "views/platform-admin/_base_template.html" %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %}
{% block per_page_title %} {% block per_page_title %}
Find services by name Find services by name
@@ -24,9 +25,12 @@
label='Find services by name, or by partial name' label='Find services by name, or by partial name'
) }} ) }}
</div> </div>
<div class="column-one-quarter align-button-with-textbox"> <div class="column-one-quarter">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">Search</button> {{ govukButton({
"text": "Search",
"classes": "search-form__button"
}) }}
</div> </div>
{% endcall %} {% endcall %}

8
app/templates/views/find-users/find-users-by-email.html
View File

@@ -1,6 +1,7 @@
{% extends "views/platform-admin/_base_template.html" %} {% extends "views/platform-admin/_base_template.html" %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %}
{% block per_page_title %} {% block per_page_title %}
Find users by email Find users by email
@@ -24,9 +25,12 @@
label='Find users by email, or by partial email' label='Find users by email, or by partial email'
) }} ) }}
</div> </div>
<div class="column-one-quarter align-button-with-textbox"> <div class="column-one-quarter">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">Search</button> {{ govukButton({
"text": "Search",
"classes": "search-form__button"
}) }}
</div> </div>
{% endcall %} {% endcall %}

8
app/templates/views/notifications.html
View File

@@ -4,6 +4,7 @@
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/textbox.html" import textbox %} {% from "components/textbox.html" import textbox %}
{% from "components/form.html" import form_wrapper %} {% from "components/form.html" import form_wrapper %}
{% from "components/button/macro.njk" import govukButton %}
{% set title_status = ( {% set title_status = (
'Failed ' 'Failed '
@@ -50,9 +51,12 @@
) )
) }} ) }}
</div> </div>
<div class="column-one-quarter align-button-with-textbox"> <div class="column-one-quarter">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="button">Search</button> {{ govukButton({
"text": "Search",
"classes": "search-form__button"
}) }}
</div> </div>
{% endcall %} {% endcall %}