darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 02:42:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make spacing and position of banners consistent

Browse Source 
Banners should always be the first thing on the page.

Because headers already have padding we don’t want to put padding on the
container.

So banners should also have top padding to distance then from the red bar.

They should also sit in the 3/4 column if the page has side navigation. This
commit adds a new template (`withoutnav_template.html`) which extends
`admin_template.html`. All views then extend one or the other, never the
`admin_template.html` directly. This means that `admin_template.html` doesn’t
have to make decisions about where the flash messages are displayed.
This commit is contained in:
Chris Hill-Scott
2016-02-01 12:15:38 +00:00
parent 286fc308d9
commit 2ef1057180
26 changed files with 75 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/components/banner.scss
View File

@@ -7,7 +7,7 @@
color: $white;
display: block;
padding: $gutter-half;
margin: 0 0 $gutter 0;
margin: $gutter-half 0 $gutter 0;
text-align: center;
position: relative;

14
app/templates/admin_template.html
View File

@@ -60,20 +60,8 @@
{% endif %}
{% block content %}
<main id="content" role="main" class="page-container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{{ banner(
message,
'default' if category == 'default' else 'dangerous',
delete_button="Yes, delete this template" if 'delete' == category else None
)}}
{% endfor %}
{% endif %}
{% endwith %}
{% block fullwidth_content %}{% endblock %}
{% block fullwidth_content %}{% endblock %}
</main>
{% endblock %}

15
app/templates/error/401.html
View File

@@ -1,10 +1,9 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}Unauthorized{% endblock %}
{% block fullwidth_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1>401</h1>
<p>You are not authorized to see this page.</p>
</div>
</div>
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1>401</h1>
<p>You are not authorized to see this page.</p>
</div>
{% endblock %}

4
app/templates/error/404.html
View File

@@ -1,6 +1,6 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}Page not found{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-xlarge">

18
app/templates/error/500.html
View File

@@ -1,12 +1,12 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}Server error{% endblock %}
{% block fullwidth_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-xlarge">
Sorry, we're experiencing technical difficulties
</h1>
<p>Try again later.</p>
</div>
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-xlarge">
Sorry, we're experiencing technical difficulties
</h1>
<p>Try again later.</p>
</div>
</div>
{% endblock %}

12
app/templates/flash_messages.html Normal file
View File

@@ -0,0 +1,12 @@
{% from "components/banner.html" import banner %}
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{{ banner(
message,
'default' if category == 'default' else 'dangerous',
delete_button="Yes, delete this template" if 'delete' == category else None
)}}
{% endfor %}
{% endif %}
{% endwith %}

4
app/templates/views/add-service.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify | Set up service
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/choose-service.html
View File

@@ -1,11 +1,11 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/browse-list.html" import browse_list %}
{% block page_title %}
GOV.UK Notify | Dashboard
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<h1 class="heading-xlarge">
Choose service

4
app/templates/views/email-not-received.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/forgot-password.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/new-password.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/password-reset-sent.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify |
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/register-from-invite.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify | Create a user account
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/register.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify | Create an account
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/signedout.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify | Get started
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/signin.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
Sign in
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/styleguide.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/banner.html" import banner %}
{% from "components/big-number.html" import big_number %}
@@ -13,7 +13,7 @@
Styleguide – GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<h1 class="heading-xlarge">
Styleguide

4
app/templates/views/text-not-received-2.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<!-- this page is just a hack for building out pages - same functionality as text-not-received, but for the register from an invite flow -->

4
app/templates/views/text-not-received.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/two-factor.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify | Text verification
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/user-profile.html
View File

@@ -1,11 +1,11 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/table.html" import list_table, row, field %}
{% block page_title %}
GOV.UK Notify | Your profile
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<h1 class="heading-xlarge">Your profile</h1>

4
app/templates/views/verification-not-received.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/verify-mobile.html
View File

@@ -1,10 +1,10 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
GOV.UK Notify | Confirm mobile number
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

4
app/templates/views/verify.html
View File

@@ -1,4 +1,4 @@
{% extends "admin_template.html" %}
{% extends "withoutnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
@@ -6,7 +6,7 @@
GOV.UK Notify | Confirm email address and mobile number
{% endblock %}
{% block fullwidth_content %}
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">

2
app/templates/withnav_template.html
View File

@@ -1,5 +1,4 @@
{% extends "admin_template.html" %}
{% from "components/banner.html" import banner %}
{% block fullwidth_content %}
<div class="grid-row">
@@ -11,6 +10,7 @@
'Your service is in restricted mode. You can only send notifications to yourself.',
'info'
) }}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
</div>
</div>

6
app/templates/withoutnav_template.html Normal file
View File

@@ -0,0 +1,6 @@
{% extends "admin_template.html" %}
{% block fullwidth_content %}
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
{% endblock %}