mirror of
https://github.com/GSA/notifications-admin.git
synced 2025-12-08 22:24:22 -05:00
2282 - Home page changes with new design
This commit is contained in:
Jonathan Bobel
@@ -19,7 +19,7 @@
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="manifest" href="{{ asset_url('images/site.webmanifest') }}">
|
||||
|
||||
<link rel="stylesheet" media="screen" href="/static/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
|
||||
<link rel="stylesheet" media="screen" href="/static/stylesheets/legacy/uk.css?d077f86473501ab244de0b30600536ee" />
|
||||
<link rel="stylesheet" media="print" href="/static/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />
|
||||
|
||||
<meta property="og:image" content="/static/images/notify-og-image.png">
|
||||
|
||||
25
app/assets/images/product/Icon set.svg
Normal file
25
app/assets/images/product/Icon set.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 28 KiB |
BIN
app/assets/images/product/people-with-phone.png
Normal file
BIN
app/assets/images/product/people-with-phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
app/assets/images/product/who-can-use-notify.png
Normal file
BIN
app/assets/images/product/who-can-use-notify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
186
app/assets/sass/uswds/_dashboard.scss
Normal file
186
app/assets/sass/uswds/_dashboard.scss
Normal file
@@ -0,0 +1,186 @@
|
||||
@use "uswds-core" as *;
|
||||
|
||||
.dashboard {
|
||||
.big-number-with-status {
|
||||
.big-number-smaller {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.big-number-number {
|
||||
font-size: units(5);
|
||||
line-height: units(5);
|
||||
}
|
||||
.big-number-label {
|
||||
font-size: units(2.5);
|
||||
}
|
||||
}
|
||||
.big-number-status {
|
||||
background: color('green-cool-40v');
|
||||
display: flex;
|
||||
padding: units(1) units(2);
|
||||
&--failing {
|
||||
padding: 0;
|
||||
a.usa-link {
|
||||
color: white;
|
||||
background: color('red-warm-50v');
|
||||
padding: units(1) units(2);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background: color('red-warm-60v');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.usa-table {
|
||||
width: 100%;
|
||||
caption {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table-field-center-aligned {
|
||||
text-align: center;
|
||||
}
|
||||
.template-statistics-table-template-name {
|
||||
padding-left: units(4);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/material-icons/description.svg);
|
||||
}
|
||||
}
|
||||
.get-started {
|
||||
border: 1px solid color('gray-90');
|
||||
padding: units(2);
|
||||
margin-bottom: units(4);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-table {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.file-list-filename {
|
||||
font-weight: bold;
|
||||
}
|
||||
.file-list-hint {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
.table-field,
|
||||
.table-field-right-aligned {
|
||||
width: 50%;
|
||||
}
|
||||
&.usage-table {
|
||||
.table-field,
|
||||
.table-field-left-aligned,
|
||||
.table-field-right-aligned {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-status-table {
|
||||
table-layout: fixed;
|
||||
|
||||
thead tr th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
th:nth-child(2),
|
||||
R td:nth-child(2) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.usage-table {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.big-number-smallest {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.job-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
td.file-name {
|
||||
width: 25%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
td.jobid {
|
||||
width: 5%;
|
||||
}
|
||||
td.template {
|
||||
width: 25%;
|
||||
}
|
||||
td.time-sent {
|
||||
width: 15%;
|
||||
}
|
||||
td.sender {
|
||||
width: 20%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
td.count-of-recipients {
|
||||
width: 5%;
|
||||
}
|
||||
td.report {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.delivered {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.failed {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.report img {
|
||||
padding-top: 5px;
|
||||
}
|
||||
th {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.usa-table-container--scrollable-mobile {
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-table th[data-sortable][aria-sort='ascending'],
|
||||
.usa-table th[data-sortable][aria-sort='descending'] {
|
||||
background-color: #a1d3ff;
|
||||
}
|
||||
|
||||
#template-list {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: units(1) 0 units(1) units(1);
|
||||
margin: units(2) 0 units(5);
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-prose > p.max-width-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
81
app/assets/sass/uswds/_do-dont.scss
Normal file
81
app/assets/sass/uswds/_do-dont.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
$do-dont-color-do: 'green-cool-50v';
|
||||
$do-dont-color-dont: 'red-cool-50v';
|
||||
$do-dont-color-border: 'gray-cool-20';
|
||||
$do-dont-padding: 3;
|
||||
$do-dont-top-bar-width: 1;
|
||||
|
||||
.do-dont {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: units(2);
|
||||
}
|
||||
|
||||
.do-dont__do,
|
||||
.do-dont__dont {
|
||||
background-color: color('white');
|
||||
border: 1px solid color($do-dont-color-border);
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.do-dont__do {
|
||||
padding: 0rem;
|
||||
}
|
||||
|
||||
.do-dont__do:before,
|
||||
.do-dont__dont:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: units($do-dont-top-bar-width);
|
||||
width: calc(100% + 2px);
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.do-dont__do:before {
|
||||
background-color: color($do-dont-color-do);
|
||||
}
|
||||
|
||||
.do-dont__dont:before {
|
||||
background-color: color($do-dont-color-dont);
|
||||
}
|
||||
|
||||
.do-dont__heading {
|
||||
// @include typeset("lang", "lg", 2);
|
||||
align-items: center;
|
||||
border-bottom: 1px solid color($do-dont-color-border);
|
||||
display: flex;
|
||||
font-weight: fw('bold');
|
||||
margin: 0;
|
||||
padding: units(4) units($do-dont-padding) units($do-dont-padding);
|
||||
|
||||
.usa-icon {
|
||||
@include u-square(3);
|
||||
margin-right: units(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.do-dont__do .do-dont__heading {
|
||||
color: color($do-dont-color-do);
|
||||
}
|
||||
|
||||
.do-dont__dont .do-dont__heading {
|
||||
color: color($do-dont-color-dont);
|
||||
}
|
||||
|
||||
.do-dont__content {
|
||||
padding: 0 units($do-dont-padding) units($do-dont-padding)
|
||||
units($do-dont-padding);
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: units(1);
|
||||
}
|
||||
}
|
||||
62
app/assets/sass/uswds/_home.scss
Normal file
62
app/assets/sass/uswds/_home.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@use "uswds-core" as *;
|
||||
@use "tokens" as vars;
|
||||
|
||||
.usa-section--dark {
|
||||
background-color: color('gray-90');
|
||||
h1 {
|
||||
font-family: family('sans');
|
||||
font-size: units(7);
|
||||
color: vars.$notify-light-blue;
|
||||
@media (max-width: units('desktop')) {
|
||||
font-size: units(5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usa-hero > .grid-container {
|
||||
@media (max-width: units('desktop')) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-section {
|
||||
&__home {
|
||||
h2 {
|
||||
font-size: units(6);
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-cards {
|
||||
justify-content: space-between;
|
||||
.usa-card__container {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
.img-container {
|
||||
width: units('card');
|
||||
height: units('card');
|
||||
margin: units(3) 0;
|
||||
border-radius: 50%;
|
||||
background: color('gray-cool-10');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: units(10);
|
||||
height: units(10);
|
||||
filter: brightness(0) saturate(100%) invert(22%) sepia(98%) saturate(1829%) hue-rotate(187deg) brightness(88%) contrast(101%);
|
||||
}
|
||||
}
|
||||
h3, p {
|
||||
font-size: units(3);
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
app/assets/sass/uswds/_tabs.scss
Normal file
35
app/assets/sass/uswds/_tabs.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
@use "uswds-core" as *;
|
||||
|
||||
// Tabs
|
||||
|
||||
.tabs {
|
||||
.pill {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.pill-item__container {
|
||||
border: 1px solid color('gray-cool-10');
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size: units(2);
|
||||
a {
|
||||
padding: units(4);
|
||||
.big-number-smaller {
|
||||
font-size: units(5);
|
||||
line-height: units(6);
|
||||
}
|
||||
.big-number-smallest {
|
||||
font-size: units(3);
|
||||
}
|
||||
&:not(.pill-item--selected):hover {
|
||||
background: color('blue-warm-70v');
|
||||
}
|
||||
&.pill-item--selected:hover {
|
||||
color: color('blue-60v');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
app/assets/sass/uswds/_tokens.scss
Normal file
8
app/assets/sass/uswds/_tokens.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@use "uswds-core" as *;
|
||||
|
||||
// Colors
|
||||
$notify-primary: color('blue-60v');
|
||||
$notify-secondary: color('red-warm-50v');
|
||||
$notify-light-blue: color('blue-40v');
|
||||
$notify-tertiary: color('gold-20v');
|
||||
$notify-text: color('ink');
|
||||
@@ -1,25 +1,3 @@
|
||||
/*
|
||||
* * * * * ==============================
|
||||
* * * * * ==============================
|
||||
* * * * * ==============================
|
||||
* * * * * ==============================
|
||||
========================================
|
||||
========================================
|
||||
========================================
|
||||
----------------------------------------
|
||||
USWDS THEME CUSTOM STYLES
|
||||
----------------------------------------
|
||||
!! Copy this file to your project's
|
||||
sass root. Don't edit the version
|
||||
in node_modules.
|
||||
----------------------------------------
|
||||
Custom project SASS goes here.
|
||||
|
||||
i.e.
|
||||
@include u-padding-right('05');
|
||||
----------------------------------------
|
||||
*/
|
||||
|
||||
@use 'uswds-core' as *;
|
||||
|
||||
iframe:focus,
|
||||
@@ -56,7 +34,10 @@ button:not([disabled]):focus {
|
||||
}
|
||||
}
|
||||
@include at-media-max('desktop') {
|
||||
padding: 0 units(2);
|
||||
.usa-nav__secondary-links
|
||||
{
|
||||
padding-left: units(2);
|
||||
}
|
||||
ul li {
|
||||
padding-bottom: units(1);
|
||||
}
|
||||
@@ -160,9 +141,17 @@ td.table-empty-message {
|
||||
}
|
||||
}
|
||||
|
||||
.usa-button img {
|
||||
margin-left: 0.5rem;
|
||||
height: 1rem;
|
||||
.login-button {
|
||||
margin-right: 0;
|
||||
img {
|
||||
height: 1rem;
|
||||
}
|
||||
@media (max-width: units('desktop')) {
|
||||
img {
|
||||
height: 14px;
|
||||
}
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-button.login-button.login-button--primary,
|
||||
@@ -365,227 +354,6 @@ td.table-empty-message {
|
||||
}
|
||||
}
|
||||
|
||||
// Dashboard
|
||||
|
||||
.dashboard {
|
||||
.big-number-with-status {
|
||||
.big-number-smaller {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.big-number-number {
|
||||
font-size: units(5);
|
||||
line-height: units(5);
|
||||
}
|
||||
.big-number-label {
|
||||
font-size: units(2.5);
|
||||
}
|
||||
}
|
||||
.big-number-status {
|
||||
background: color('green-cool-40v');
|
||||
display: flex;
|
||||
padding: units(1) units(2);
|
||||
&--failing {
|
||||
padding: 0;
|
||||
a.usa-link {
|
||||
color: white;
|
||||
background: color('red-warm-50v');
|
||||
padding: units(1) units(2);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background: color('red-warm-60v');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.usa-table {
|
||||
width: 100%;
|
||||
caption {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table-field-center-aligned {
|
||||
text-align: center;
|
||||
}
|
||||
.template-statistics-table-template-name {
|
||||
padding-left: units(4);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/material-icons/description.svg);
|
||||
}
|
||||
}
|
||||
.get-started {
|
||||
border: 1px solid color('gray-90');
|
||||
padding: units(2);
|
||||
margin-bottom: units(4);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-table {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.file-list-filename {
|
||||
font-weight: bold;
|
||||
}
|
||||
.file-list-hint {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
.table-field,
|
||||
.table-field-right-aligned {
|
||||
width: 50%;
|
||||
}
|
||||
&.usage-table {
|
||||
.table-field,
|
||||
.table-field-left-aligned,
|
||||
.table-field-right-aligned {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-status-table {
|
||||
table-layout: fixed;
|
||||
|
||||
thead tr th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th:first-child,
|
||||
td:first-child {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
th:nth-child(2),
|
||||
R td:nth-child(2) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.usage-table {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.big-number-smallest {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.job-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
td.file-name {
|
||||
width: 25%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
td.jobid {
|
||||
width: 5%;
|
||||
}
|
||||
td.template {
|
||||
width: 25%;
|
||||
}
|
||||
td.time-sent {
|
||||
width: 15%;
|
||||
}
|
||||
td.sender {
|
||||
width: 20%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
td.count-of-recipients {
|
||||
width: 5%;
|
||||
}
|
||||
td.report {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.delivered {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.failed {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
}
|
||||
td.report img {
|
||||
padding-top: 5px;
|
||||
}
|
||||
th {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.usa-table-container--scrollable-mobile {
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-table th[data-sortable][aria-sort='ascending'],
|
||||
.usa-table th[data-sortable][aria-sort='descending'] {
|
||||
background-color: #a1d3ff;
|
||||
}
|
||||
|
||||
#template-list {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
padding: units(1) 0 units(1) units(1);
|
||||
margin: units(2) 0 units(5);
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-prose > p.max-width-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
|
||||
.tabs {
|
||||
.pill {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
.pill-item__container {
|
||||
border: 1px solid color('gray-cool-10');
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size: units(2);
|
||||
a {
|
||||
padding: units(4);
|
||||
.big-number-smaller {
|
||||
font-size: units(5);
|
||||
line-height: units(6);
|
||||
}
|
||||
.big-number-smallest {
|
||||
font-size: units(3);
|
||||
}
|
||||
&:not(.pill-item--selected):hover {
|
||||
background: color('blue-warm-70v');
|
||||
}
|
||||
&.pill-item--selected:hover {
|
||||
color: color('blue-60v');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Etc
|
||||
|
||||
.email-brand,
|
||||
@@ -747,86 +515,6 @@ div.guides {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
$do-dont-color-do: 'green-cool-50v';
|
||||
$do-dont-color-dont: 'red-cool-50v';
|
||||
$do-dont-color-border: 'gray-cool-20';
|
||||
$do-dont-padding: 3;
|
||||
$do-dont-top-bar-width: 1;
|
||||
|
||||
.do-dont {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: units(2);
|
||||
}
|
||||
|
||||
.do-dont__do,
|
||||
.do-dont__dont {
|
||||
background-color: color('white');
|
||||
border: 1px solid color($do-dont-color-border);
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.do-dont__do {
|
||||
padding: 0rem;
|
||||
}
|
||||
|
||||
.do-dont__do:before,
|
||||
.do-dont__dont:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: units($do-dont-top-bar-width);
|
||||
width: calc(100% + 2px);
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.do-dont__do:before {
|
||||
background-color: color($do-dont-color-do);
|
||||
}
|
||||
|
||||
.do-dont__dont:before {
|
||||
background-color: color($do-dont-color-dont);
|
||||
}
|
||||
|
||||
.do-dont__heading {
|
||||
// @include typeset("lang", "lg", 2);
|
||||
align-items: center;
|
||||
border-bottom: 1px solid color($do-dont-color-border);
|
||||
display: flex;
|
||||
font-weight: fw('bold');
|
||||
margin: 0;
|
||||
padding: units(4) units($do-dont-padding) units($do-dont-padding);
|
||||
|
||||
.usa-icon {
|
||||
@include u-square(3);
|
||||
margin-right: units(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.do-dont__do .do-dont__heading {
|
||||
color: color($do-dont-color-do);
|
||||
}
|
||||
|
||||
.do-dont__dont .do-dont__heading {
|
||||
color: color($do-dont-color-dont);
|
||||
}
|
||||
|
||||
.do-dont__content {
|
||||
padding: 0 units($do-dont-padding) units($do-dont-padding)
|
||||
units($do-dont-padding);
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: units(1);
|
||||
}
|
||||
}
|
||||
|
||||
.site-note {
|
||||
background-color: #dfe1e2;
|
||||
max-width: 72ex;
|
||||
@@ -971,32 +659,6 @@ nav.nav {
|
||||
}
|
||||
}
|
||||
|
||||
.home-cards {
|
||||
justify-content: space-between;
|
||||
.usa-card__container {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
img {
|
||||
margin: units(4) auto 0;
|
||||
width: units(15);
|
||||
height: units(15);
|
||||
}
|
||||
.usa-card__body {
|
||||
margin-bottom: units(2);
|
||||
}
|
||||
.blue-bar {
|
||||
background-color: #005eb8;
|
||||
height: 1.3em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contact-us-card {
|
||||
border: 2px solid color("ink");
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
@forward "uswds-theme";
|
||||
@forward "uswds";
|
||||
@forward "uswds-theme-custom-styles";
|
||||
@use "tokens" as vars;
|
||||
@forward "legacy-styles";
|
||||
@forward "home";
|
||||
@forward "dashboard";
|
||||
@forward "tabs";
|
||||
@forward "do-dont";
|
||||
@forward "data-visualization";
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
// Path to assets for use with file-url()
|
||||
$path: '/static/images/';
|
||||
|
||||
// Dependencies from GOV.UK Frontend Toolkit
|
||||
// https://github.com/alphagov/govuk_frontend_toolkit/
|
||||
@import 'conditionals';
|
||||
@import 'shims';
|
||||
@import 'measurements';
|
||||
@import 'css3';
|
||||
@import 'colours';
|
||||
@import 'typography';
|
||||
@import 'grid_layout';
|
||||
@import 'helpers';
|
||||
|
||||
// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
|
||||
@import 'url-helpers';
|
||||
|
||||
// Specific to this application, needs to go at the top of the cascade
|
||||
@import 'globals';
|
||||
|
||||
// Dependencies from GOV.UK Elements
|
||||
// https://github.com/alphagov/govuk_elements
|
||||
@import 'elements/helpers';
|
||||
@import 'elements/reset';
|
||||
@import 'elements/details';
|
||||
@import 'elements/elements-typography';
|
||||
@import 'elements/forms';
|
||||
@import 'elements/forms/form-multiple-choice';
|
||||
@import 'elements/forms/form-validation';
|
||||
@import 'elements/lists';
|
||||
@import 'elements/panels';
|
||||
@import 'elements/tables';
|
||||
|
||||
// Dependencies from GOV.UK Frontend, packaged to be specific to this application
|
||||
@import './govuk-frontend/all';
|
||||
|
||||
// Custom overrides
|
||||
.govuk-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Specific to this application
|
||||
@import 'local/typography';
|
||||
@import 'grids';
|
||||
@import 'components/site-footer';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
@import 'components/page-footer';
|
||||
@import 'components/table';
|
||||
@import 'components/navigation';
|
||||
@import 'components/big-number';
|
||||
@import 'components/banner';
|
||||
@import 'components/textbox';
|
||||
@import 'components/file-upload';
|
||||
@import 'components/browse-list';
|
||||
@import 'components/email-message';
|
||||
@import 'components/copy-to-clipboard';
|
||||
@import 'components/vendor/previous-next-navigation';
|
||||
@import 'components/radios';
|
||||
@import 'components/checkboxes';
|
||||
@import 'components/pill';
|
||||
@import 'components/show-more';
|
||||
@import 'components/message';
|
||||
@import 'components/research-mode';
|
||||
@import 'components/tick-cross';
|
||||
@import 'components/list-entry';
|
||||
@import 'components/live-search';
|
||||
@import 'components/stick-at-top-when-scrolling';
|
||||
@import 'components/fullscreen-table';
|
||||
@import 'components/conditional-radios';
|
||||
@import 'components/vendor/breadcrumbs';
|
||||
@import 'components/vendor/responsive-embed';
|
||||
@import 'components/preview-pane';
|
||||
@import 'components/task-list';
|
||||
@import 'components/loading-indicator';
|
||||
@import 'components/area-list';
|
||||
@import 'components/content-metadata';
|
||||
|
||||
@import 'views/dashboard';
|
||||
@import 'views/users';
|
||||
@import 'views/api';
|
||||
@import 'views/product-page';
|
||||
@import 'views/template';
|
||||
@import 'views/notification';
|
||||
@import 'views/send';
|
||||
@import 'views/get_started';
|
||||
@import 'views/history';
|
||||
|
||||
// TODO: break this up
|
||||
@import 'app';
|
||||
@@ -39,12 +39,6 @@
|
||||
] %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<header class="usa-header usa-header--extended">
|
||||
<div class="usa-nav-container">
|
||||
<div class="usa-navbar">
|
||||
@@ -53,7 +47,7 @@
|
||||
<div class="logo-img display-flex">
|
||||
<a href="/">
|
||||
<span class="usa-sr-only">Notify.gov logo</span>
|
||||
<img src="{{ (asset_path | default('/static')) + 'images/notify-logo.svg' }}" alt="Notify.gov logo"
|
||||
<img src="{{ (asset_path | default('/static')) + 'images/notify-logo.svg' }}" alt=""
|
||||
class="usa-flag-logo margin-right-1">
|
||||
</a>
|
||||
</div>
|
||||
@@ -61,14 +55,6 @@
|
||||
<button type="button" class="usa-menu-btn">Menu</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if not current_user.is_authenticated and is_information_section%}
|
||||
<div class="usa-nav__login">
|
||||
<a class="usa-button usa-button login-button login-button--primary margin-right-2"
|
||||
href="{{ initial_signin_url }}">Sign
|
||||
in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -89,7 +75,11 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if not current_user.is_authenticated %}
|
||||
<div class="usa-nav__secondary margin-bottom-2">
|
||||
{% else %}
|
||||
<div class="usa-nav__secondary margin-bottom-6">
|
||||
{% endif %}
|
||||
<ul class="usa-nav__secondary-links">
|
||||
{% if secondaryNavigation %}
|
||||
{% for item in secondaryNavigation %}
|
||||
@@ -104,8 +94,18 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% if not current_user.is_authenticated %}
|
||||
<div class="usa-nav__login display-flex flex-align-center">
|
||||
<span class="margin-right-2 display-none desktop:display-block">
|
||||
If you are an existing partner
|
||||
</span>
|
||||
<a class="usa-button login-button login-button--primary desktop:padding-2 padding-1"
|
||||
href="{{ initial_signin_url }}">Sign
|
||||
in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -9,70 +9,63 @@ import usaButton %} {% block meta %}
|
||||
|
||||
<main id="main-content" role="main">
|
||||
{% block content %}
|
||||
<section class="usa-section--dark usa-hero" aria-label="Introduction">
|
||||
<section class="usa-section--dark usa-hero padding-y-2" aria-label="Introduction">
|
||||
<div class="grid-container padding-y-4">
|
||||
<div class="grid-row grid-gap display-flex flex-align-center">
|
||||
<div class="desktop:grid-col-8 tablet:grid-col-12">
|
||||
<h1 class="font-sans-2xl usa-hero__heading">
|
||||
<h1 class="usa-hero__heading">
|
||||
Reach people where they are with government-powered text messages
|
||||
</h1>
|
||||
<p class="font-sans-lg">
|
||||
<p class="desktop:font-sans-lg font-sans-md">
|
||||
Notify.gov is a text messaging service that helps federal, state,
|
||||
local, tribal and territorial governments more effectively
|
||||
communicate with the people they serve.
|
||||
</p>
|
||||
<div class="usa-button-group margin-bottom-5 flex-align-center">
|
||||
<a
|
||||
class="usa-button usa-button login-button login-button--primary margin-right-2"
|
||||
href="{{ initial_signin_url }}"
|
||||
>Sign in with
|
||||
<img
|
||||
src="{{ asset_url('images/logo-login.svg') }}"
|
||||
alt="Login.gov logo"
|
||||
/>
|
||||
</a>
|
||||
if you are an existing partner
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="desktop:grid-col-3 grid-offset-1 desktop:display-block display-none margin-x-5"
|
||||
class="desktop:grid-col-4 desktop:display-block display-none"
|
||||
>
|
||||
<img
|
||||
src="{{ asset_url('images/product/phone-text.png') }}"
|
||||
alt="Illustration of a mobile phone displaying a text message and number on its screen, with a speech bubble coming out from outside the phone, symbolizing communication or notification."
|
||||
src="{{ asset_url('images/product/hero-icons.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-1"
|
||||
>
|
||||
<h2 class="font-body-xl margin-top-0 margin-bottom-3">
|
||||
Government texting made easy
|
||||
</h2>
|
||||
<p class="usa-body">
|
||||
Notify.gov is a text messaging platform built for government agencies.
|
||||
With minimal set-up and secure, personalized messaging, you can make
|
||||
one-way texting a part of your outreach program.
|
||||
</p>
|
||||
<section class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-4">
|
||||
<div class="grid-row flex-align-center flex-justify-center">
|
||||
<div class="tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<img src="{{ asset_url('images/product/people-with-phone.png') }}" alt="A couple smiling and looking at a cell phone together"/>
|
||||
</div>
|
||||
<div class="tablet:grid-col-6 tablet:margin-left-6 mobile-lg:grid-col-12">
|
||||
<h2 class="font-body-xl margin-top-0 margin-bottom-3">
|
||||
Government texting made easy
|
||||
</h2>
|
||||
<p class="usa-body margin-bottom-5">
|
||||
Notify.gov is a text messaging platform built for government agencies.
|
||||
With minimal set-up and secure, personalized messaging, you can make
|
||||
one-way texting a part of your outreach program.
|
||||
</p>
|
||||
<a class="usa-button usa-button--big" href="/about">Learn more about Notify.gov</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid-container usa-section usa-section__home usa-prose padding-bottom-1"
|
||||
>
|
||||
<h2 class="font-sans-xl margin-top-0">Key features</h2>
|
||||
<section class="grid-container usa-section usa-section__home usa-prose padding-bottom-4">
|
||||
<h2 class="text-center margin-top-0">Key features</h2>
|
||||
<div class="home-cards margin-top-5">
|
||||
<ul class="usa-card-group display-flex margin-bottom-4">
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/internet.svg') }}"
|
||||
alt="Globe on top of a web browser"
|
||||
/>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">Web-based</h3>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/internet.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header padding-bottom-0">
|
||||
<h3>Web-based</h3>
|
||||
</div>
|
||||
<div class="usa-card__body">
|
||||
<p>Nothing to download or install</p>
|
||||
@@ -81,13 +74,14 @@ import usaButton %} {% block meta %}
|
||||
</li>
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/fast.svg') }}"
|
||||
alt="Stopwatch with a notification speech bubble with a star inside"
|
||||
/>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">Fast and easy</h3>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/fast.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header padding-bottom-0">
|
||||
<h3>Fast and easy</h3>
|
||||
</div>
|
||||
<div class="usa-card__body">
|
||||
<p>No technical expertise required</p>
|
||||
@@ -96,13 +90,14 @@ import usaButton %} {% block meta %}
|
||||
</li>
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/status.svg') }}"
|
||||
alt="3 status messages, 2 successes and one failure"
|
||||
/>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">Track message delivery</h3>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/status.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header padding-bottom-0">
|
||||
<h3>Track message delivery</h3>
|
||||
</div>
|
||||
<div class="usa-card__body">
|
||||
<p>See which messages were received</p>
|
||||
@@ -113,15 +108,14 @@ import usaButton %} {% block meta %}
|
||||
<ul class="usa-card-group">
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/translation.svg') }}"
|
||||
alt="Speech bubbles with the letter A and the Chinese character for language"
|
||||
/>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">
|
||||
Send in recipients' preferred language
|
||||
</h3>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/translation.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header padding-bottom-0">
|
||||
<h3>Send in recipients' preferred language</h3>
|
||||
</div>
|
||||
<div class="usa-card__body">
|
||||
<p>Notify.gov has support for more than 30 character sets</p>
|
||||
@@ -130,13 +124,14 @@ import usaButton %} {% block meta %}
|
||||
</li>
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/security.svg') }}"
|
||||
alt="Lock with code icon inside on top of a web browser"
|
||||
/>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/security.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">Security and privacy</h3>
|
||||
<h3 class="padding-bottom-0">Security and privacy</h3>
|
||||
</div>
|
||||
<div class="usa-card__body">
|
||||
<p>
|
||||
@@ -148,13 +143,14 @@ import usaButton %} {% block meta %}
|
||||
</li>
|
||||
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
|
||||
<div class="usa-card__container">
|
||||
<div class="blue-bar"></div>
|
||||
<img
|
||||
src="{{ asset_url('images/send.svg') }}"
|
||||
alt="Paper airplane and a notification icon with the number 1 inside"
|
||||
/>
|
||||
<div class="img-container">
|
||||
<img
|
||||
src="{{ asset_url('images/send.svg') }}"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="usa-card__header">
|
||||
<h3 class="font-heading-md">
|
||||
<h3 class="padding-bottom-0">
|
||||
Send bulk, customized, one-way messages
|
||||
</h3>
|
||||
</div>
|
||||
@@ -170,51 +166,29 @@ import usaButton %} {% block meta %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="grid-container usa-section usa-section__home usa-prose grid-container padding-bottom-10"
|
||||
>
|
||||
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
|
||||
Who can use Notify.gov?
|
||||
</h2>
|
||||
<p class="usa-body">
|
||||
All <span class="text-bold">federal</span> agencies and programs are
|
||||
eligible to use Notify.gov.
|
||||
</p>
|
||||
<p class="usa-body">
|
||||
US
|
||||
<span class="text-bold">state, local, territorial, or tribal</span>
|
||||
governments that administer or deliver federally-funded programs or
|
||||
services may qualify to use Notify.gov to communicate with applicants and
|
||||
participants in these programs.
|
||||
</p>
|
||||
<div class="grid-container margin-top-4 padding-left-0 padding-right-0">
|
||||
<div class="grid-row grid-gap-3">
|
||||
<a
|
||||
class="text-no-underline tablet:grid-col-4 mobile-lg:grid-col-12"
|
||||
href="mailto:tts-notify@gsa.gov"
|
||||
>
|
||||
<div class="contact-us-card">
|
||||
<div class="grid-row flex-align-center grid-gap-2">
|
||||
<div class="grid-col-auto">
|
||||
<img
|
||||
src="{{ asset_url('images/contact.svg') }}"
|
||||
alt=""
|
||||
class="height-7 width-7"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-col">
|
||||
<p class="margin-0">
|
||||
<strong>Contact us</strong><br />
|
||||
To learn more about becoming a partner!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<section class="grid-container usa-section usa-section__home usa-prose grid-container margin-bottom-15">
|
||||
<div class="grid-row flex-align-center flex-justify-center">
|
||||
<div class="tablet:grid-col-6 mobile-lg:grid-col-12 margin-right-6 margin-bottom-6">
|
||||
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
|
||||
Who can use Notify.gov?
|
||||
</h2>
|
||||
<p class="usa-body">
|
||||
All <span class="text-bold">federal</span> agencies and programs are
|
||||
eligible to use Notify.gov.
|
||||
</p>
|
||||
<p class="usa-body margin-bottom-5">
|
||||
US
|
||||
<span class="text-bold">state, local, territorial, or tribal</span>
|
||||
governments that administer or deliver federally-funded programs or
|
||||
services may qualify to use Notify.gov to communicate with applicants and
|
||||
participants in these programs.
|
||||
</p>
|
||||
<a class="usa-button usa-button--big" href="/join-notify">Become a Notify.gov partner</a>
|
||||
</div>
|
||||
<div class="tablet:grid-col-4 mobile-lg:grid-col-12 display-flex flex-justify-center"">
|
||||
<img src="{{ asset_url('images/product/who-can-use-notify.png') }}" alt="Woman smiling behind two computer screens"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<link rel="apple-touch-icon" sizes="180x180"
|
||||
href="/static_503/images/apple-touch-icon.png?a0f7e1b728a42016b247dc54ee40d055">
|
||||
|
||||
<link rel="stylesheet" media="screen" href="/static_503/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
|
||||
<link rel="stylesheet" media="screen" href="/static_503/stylesheets/legacy/uk.css?d077f86473501ab244de0b30600536ee" />
|
||||
<link rel="stylesheet" media="print" href="/static_503/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />
|
||||
<style>
|
||||
.govuk-header__container {
|
||||
@@ -127,4 +127,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user