Merge pull request #715 from alphagov/fancy-homepage

Make it clearer what Notify is for from homepage
This commit is contained in:
Chris Hill-Scott
2016-06-22 15:01:17 +01:00
committed by GitHub
8 changed files with 160 additions and 36 deletions

View File

@@ -109,13 +109,65 @@
}
.banner-intro {
margin: $gutter 0 -90px 0;
padding: $gutter-half $gutter;
background: $govuk-blue;
color: $white;
overflow: hidden;
.heading-medium {
@include core-24;
}
a {
&:link,
&:visited {
color: $white;
}
&:hover,
&:active {
color: $light-blue-25;
}
}
.button-block {
line-height: 3.68em;
}
.button {
@include core-19;
background: $white;
padding: 0.3684210526em 0.8421052632em 0.2105263158em 0.7421052632em;
display: inline-block;
margin-top: $gutter-half;
margin-right: 0.3em;
box-shadow: 0 2px 0 mix($govuk-blue, $text-colour);
&:link,
&:visited,
&:hover {
color: $govuk-blue;
}
&:hover {
background: $light-blue-25;
outline: none;
}
}
}
.banner-tour {
@extend %banner;
background: $govuk-blue;
color: $white;
margin-top: $gutter;
margin-bottom: $gutter * -3;
padding: $gutter;
height: 475px;
overflow: hidden;
@@ -166,17 +218,4 @@
}
th {
padding: inherit 5px;
background: $grey-3;
border-left: 5px solid $grey-3;
border-right: 5px solid $grey-3;
}
tr:last-child {
td {
border: none;
}
}
}

View File

@@ -0,0 +1,40 @@
.phone {
background: $black;
border-radius: 15px;
padding: 15px;
&-speaker {
margin: 5px auto 20px;
border-radius: 5px;
width: 30px;
height: 7px;
background: rgba($white, 0.2);
}
&-screen {
background: $white;
color: $black;
min-height: 377px;
border-radius: 1px;
}
&-recipient {
@include core-16($tabular-numbers: true);
margin: 0 0 5px 7px;
padding-top: 10px;
color: $secondary-text-colour;
}
&-sms {
padding: 10px;
margin: 10px;
background: $panel-colour;
border-radius: 5px;
}
}
.phone-container {
margin-bottom: -200px;
}

View File

@@ -52,6 +52,7 @@ $path: '/static/images/';
@import 'components/secondary-button';
@import 'components/show-more';
@import 'components/message';
@import 'components/phone';
@import 'views/job';
@import 'views/edit-template';

View File

@@ -13,4 +13,4 @@ from app.main import main
def sign_out():
session.clear()
logout_user()
return redirect(url_for('main.sign_in'))
return redirect(url_for('main.index'))

View File

@@ -0,0 +1,16 @@
{% macro phone(recipient, message) %}
<div class="phone">
<div class="phone-speaker"></div>
<div class="phone-screen">
<h2 class="phone-recipient">
<span class="visually-hidden">
Example text message
</span>
To: {{recipient}}
</h2>
<div class="phone-sms">
{{ message }}
</div>
</div>
</div>
{% endmacro %}

View File

@@ -11,9 +11,6 @@ Create an account GOV.UK Notify
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">Create an account</h1>
<p>If youve used GOV.UK Notify before, <a href="{{ url_for('.sign_in') }}">sign in to your account</a></p>
<form method="post" autocomplete="nope">
{{ textbox(form.name, width='3-4') }}
{{ textbox(form.email_address, hint="Must be from a central government organisation", width='3-4', safe_error_message=True) }}

View File

@@ -1,3 +1,6 @@
{% from "components/banner.html" import banner_wrapper %}
{% from "components/phone.html" import phone %}
{% extends "withoutnav_template.html" %}
{% block page_title %}
@@ -6,23 +9,51 @@
{% block maincolumn_content %}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-xlarge">GOV.UK Notify</h1>
<p>
Making it easy to send text messages and emails to your users.
{% call banner_wrapper(type='intro') %}
<h1 class="heading-medium">
GOV.UK Notify makes it easy to send text messages and emails to
your users.
</h1>
<p class="heading-medium">
If you work for a UK government department or agency you can try
it now.
</p>
<p>
If you work for a UK government department or agency you can try it now.
<p class="button-block">
<a class="button button-start" href='{{ url_for('.register' )}}'>
Create an account
</a>
or <a href="{{ url_for('.sign_in' )}}">sign in</a> if youve used
it before
</p>
<p>
<a class="button" href="{{ url_for('.register' )}}" role="button">Set up an account</a>
</p>
<p>
If youve used GOV.UK Notify before, <a href="{{ url_for('.sign_in' )}}">sign in to your account</a>.
</p>
</div>
</div>
<div class="grid-row phone-container">
<div class="column-one-third">
{{ phone(
"07900911111",
"""
Joshua, weve started processing your application.
Your reference number is 300312.
"""
) }}
</div>
<div class="column-one-third">
{{ phone(
"07900922222",
"""
Amala, weve started processing your application.
Your reference number is 444250.
"""
) }}
</div>
<div class="column-one-third">
{{ phone(
"07900933333",
"""
Roman, weve started processing your application.
Your reference number is 568821.
"""
) }}
</div>
</div>
{% endcall %}
{% endblock %}

View File

@@ -7,7 +7,7 @@ def test_render_sign_out_redirects_to_sign_in(app_):
url_for('main.sign_out'))
assert response.status_code == 302
assert response.location == url_for(
'main.sign_in', _external=True)
'main.index', _external=True)
def test_sign_out_user(app_,
@@ -34,6 +34,6 @@ def test_sign_out_user(app_,
response = client.get(url_for('main.sign_out'))
assert response.status_code == 302
assert response.location == url_for(
'main.sign_in', _external=True)
'main.index', _external=True)
with client.session_transaction() as session:
assert session.get('user_id') is None