Various tweaks

- remove black border from banner
- make banners have internal columns
- make nav 2/3rd width, 19px text and more spaced out
- only show the ‘restricted mode’ banner where it’s needed
- rename ‘restricted mode’ to ‘trial mode’
This commit is contained in:
Chris Hill-Scott
2016-02-02 13:38:39 +00:00
parent 658045e6d7
commit 686c4127cd
14 changed files with 118 additions and 104 deletions

View File

@@ -1,26 +1,5 @@
// Extra CSS overlaying elements
.form-control-2-3, .form-control-1-4 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "nta", Arial, sans-serif;
font-size: 16px;
line-height: 1.25;
font-weight: 400;
text-transform: none;
padding: 4px;
background-color: #fff;
border: 2px solid #6f777b;
}
@media (min-width: 641px) {
.form-control-2-3, .form-control-1-4 {
font-size: 19px;
line-height: 1.31579;
}
}
#global-header-bar {
background-color: $red;
}

View File

@@ -8,7 +8,7 @@
display: block;
padding: $gutter-half;
margin: $gutter-half 0 $gutter 0;
text-align: center;
text-align: left;
position: relative;
}
@@ -16,7 +16,7 @@
.banner-with-tick {
@extend %banner;
padding: $gutter-half $gutter;
padding: $gutter-half ($gutter + $gutter-half);
&:before {
@include core-24;
@@ -58,7 +58,6 @@
background: $yellow;
color: $text-colour;
text-align: left;
border: 5px solid $text-colour;
font-weight: bold;
a:link, a:visited {

View File

@@ -1,13 +1,13 @@
.navigation {
padding: 3px 0 0 0;
padding: 20px 0 0 0;
ul, h2 {
@include core-16;
@include core-19;
border-bottom: 1px solid $border-colour;
margin: 10px 20px 0 0;
margin: 10px 20px 15px 0;
list-style-type: none;
padding: 0 0 8px 0;
padding: 0 0 10px 0;
}
h2 {
@@ -15,7 +15,7 @@
}
li {
margin: 7px 0 0 0;
margin: 10px 0 0 0;
}
a:link,

View File

@@ -30,5 +30,5 @@ def service_dashboard(service_id):
jobs=jobs,
free_text_messages_remaining='25,000',
spent_this_month='0.00',
has_templates=bool(len(templates)),
template_count=len(templates),
service_id=str(service_id))

View File

@@ -1,6 +1,19 @@
{% macro banner(body, type=None, with_tick=False, delete_button=None) %}
{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
<div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
{% if subhead %}
<div class="grid-row">
<div class="column-one-third">
{{ subhead }}
</div>
<div class="column-two-thirds">
{% endif %}
{{ body }}
{% if subhead %}
</div>
</div>
{% endif %}
{% if delete_button %}
<form method='post'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

View File

@@ -22,6 +22,12 @@
developer documentation</a>.
</p>
{{ banner(
'You can only send notifications to yourself',
subhead='Trial mode',
type='info'
) }}
<h2 class="api-key-name">
Service ID
</h2>

View File

@@ -9,14 +9,19 @@ GOV.UK Notify | Manage templates
{% block maincolumn_content %}
<h1 class="heading-large">Templates</h1>
{{ banner(
'<a href="{}">Try sending a text message</a>'.format(
url_for(".send_sms", service_id=service_id)
)|safe,
subhead='Next step',
type="tip"
)}}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">Templates</h1>
<p>
<a href="{{ url_for('.add_service_template', service_id=service_id) }}">Add new template</a>
{% for template in templates %}
{% if template.get_field('template_type') == 'sms' %}
{{ sms_message(
@@ -35,6 +40,10 @@ GOV.UK Notify | Manage templates
{% endif %}
{% endfor %}
<p>
<a href="{{ url_for('.add_service_template', service_id=service_id) }}" class="button">Add new template</a>
</p>
</div>
</div>

View File

@@ -10,37 +10,34 @@
{% block maincolumn_content %}
<form method="POST" enctype="multipart/form-data">
<div class="grid-row">
<div class="column-three-quarters">
<h1 class="heading-large">Send text messages</h1>
<fieldset class='form-group'>
<legend class="heading-medium">1. Choose text message template</legend>
{% for template in templates %}
{{ sms_message(
template.content, name=template.name, input_name='template', input_index=template.id
) }}
{% endfor %}
</fieldset>
<fieldset class='form-group'>
<legend class="heading-medium">1. Choose text message template</legend>
{% for template in templates %}
{{ sms_message(
template.content, name=template.name, input_name='template', input_index=template.id
) }}
{% endfor %}
</fieldset>
<h2 class="heading-medium">2. Add recipients</h2>
<h2 class="heading-medium">2. Add recipients</h2>
{{ banner(
'You can only send notifications to yourself',
subhead='Trial mode',
type='info'
) }}
<p>
Upload a CSV file to add your recipients details.
</p>
<p>
You can also <a href="#">download an example CSV</a>.
</p>
<p>
{{textbox(form.file)}}
</p>
<p>
Upload a CSV file to add your recipients details.
</p>
<p>
You can also <a href="#">download an example CSV</a>.
</p>
<p>
{{textbox(form.file)}}
</p>
{{ page_footer("Continue") }}
</div>
</div>
{{ page_footer("Continue") }}
</form>
{% endblock %}

View File

@@ -8,15 +8,6 @@
{% block maincolumn_content %}
{% if not has_templates %}
{{ banner(
'<a href="{}">Add a template</a> to start sending notifications'.format(
url_for(".add_service_template", service_id=service_id)
)|safe,
type="tip"
)}}
{% endif %}
<ul class="grid-row job-totals">
<li class="column-half">
{{ big_number(
@@ -32,24 +23,44 @@
</li>
</ul>
{% call(item) list_table(
[],
caption="Recent text messages",
empty_message='You havent sent any text messages yet',
field_headings=['Job', 'File', 'Time', 'Status']
) %}
{% call field() %}
<a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.file }}</a>
{% if not template_count %}
{{ banner(
'<a href="{}">Add a text message template</a>'.format(
url_for(".add_service_template", service_id=service_id)
)|safe,
subhead='Get started',
type="tip"
)}}
{% else %}
{{ banner(
'<a href="{}">Try sending a text message</a>'.format(
url_for(".send_sms", service_id=service_id)
)|safe,
subhead='Next step',
type="tip"
)}}
{% endif %}
{% if [] %}
{% call(item) list_table(
[],
caption="Recent text messages",
empty_message='You havent sent any text messages yet',
field_headings=['Job', 'File', 'Time', 'Status']
) %}
{% call field() %}
<a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.file }}</a>
{% endcall %}
{% call field() %}
<a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.job }}</a>
{% endcall %}
{% call field() %}
{{ item.time }}
{% endcall %}
{% call field() %}
{{ item.status }}
{% endcall %}
{% endcall %}
{% call field() %}
<a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.job }}</a>
{% endcall %}
{% call field() %}
{{ item.time }}
{% endcall %}
{% call field() %}
{{ item.status }}
{% endcall %}
{% endcall %}
{% endif %}
{% endblock %}

View File

@@ -35,15 +35,20 @@
</div>
{{ banner(
'Your service is in restricted mode. You can only send notifications to yourself.',
'info'
'You can only send notifications to yourself',
type='info',
subhead='Restricted mode'
) }}
{{ banner('Youre not allowed to do this', 'dangerous')}}
{{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
{{ banner('<a href="#">Send your first message</a>'|safe, 'tip')}}
{{ banner(
'<a href="#">Send your first message</a>'|safe,
subhead='Get started',
type='tip'
)}}
<h2 class="heading-large">Big number</h2>

View File

@@ -12,16 +12,16 @@ GOV.UK Notify | Confirm email address and mobile number
<div class="column-two-thirds">
<h1 class="heading-large">Activate your account</h1>
<p>We've sent you confirmation codes by email and text message. You need to enter both codes here.</p>
<p>Weve sent you confirmation codes by email and text message. You need to enter both codes here.</p>
<form autocomplete="off" method="post">
{{ textbox(form.email_code) }}
<p>
<a href="{{ url_for('.check_and_resend_email_code')}}">I haven't received an email</a>
<a href="{{ url_for('.check_and_resend_email_code')}}">I havent received an email</a>
</p>
{{ textbox(form.sms_code) }}
<p>
<a href="{{ url_for('.check_and_resend_text_code') }}">I haven't received a text</a></span>
<a href="{{ url_for('.check_and_resend_text_code') }}">I havent received a text</a></span>
</p>
{{ page_footer("Continue") }}
</form>

View File

@@ -2,14 +2,10 @@
{% block fullwidth_content %}
<div class="grid-row">
<div class="column-one-quarter">
<div class="column-one-third">
{% include "main_nav.html" %}
</div>
<div class="column-three-quarters">
{{ banner(
'Your service is in restricted mode. You can only send notifications to yourself.',
'info'
) }}
<div class="column-two-thirds">
{% include 'flash_messages.html' %}
{% block maincolumn_content %}{% endblock %}
</div>