Skip to content

Commit

Permalink
Updating new home page styles to use more from the USWDS, and make su…
Browse files Browse the repository at this point in the history 
…re it's responsive and accessible
  • Loading branch information
@jonathanbobel
jonathanbobel committed Dec 13, 2024
1 parent 92f3794 commit 1486680
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 122 deletions.
10 changes: 7 additions & 3 deletions app/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,12 @@ def create_app(application):

@application.context_processor
def inject_feature_flags():
feature_best_practices_enabled = application.config.get("FEATURE_BEST_PRACTICES_ENABLED", False)
feature_about_page_enabled = application.config.get("FEATURE_ABOUT_PAGE_ENABLED", False)
feature_best_practices_enabled = application.config.get(
"FEATURE_BEST_PRACTICES_ENABLED", False
)
feature_about_page_enabled = application.config.get(
"FEATURE_ABOUT_PAGE_ENABLED", False
)
return dict(
FEATURE_BEST_PRACTICES_ENABLED=feature_best_practices_enabled,
FEATURE_ABOUT_PAGE_ENABLED=feature_about_page_enabled,
Expand Down Expand Up @@ -205,7 +209,7 @@ def inject_initial_signin_url():
url = url.replace("NONCE", nonce)
url = url.replace("STATE", state)

return {'initial_signin_url': url}
return {"initial_signin_url": url}

notify_environment = os.environ["NOTIFY_ENVIRONMENT"]

Expand Down
51 changes: 17 additions & 34 deletions app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,14 +346,6 @@ td.table-empty-message {
}
}

.usa-section {
&__home {
h2 {
font-family: family('serif');
}
}
}

.navigation-service.usa-breadcrumb {
bottom: 0;
}
Expand Down Expand Up @@ -960,43 +952,34 @@ li.linked-card:hover svg,
}
}

.fixed-row {
.home-cards {
justify-content: space-between;
align-items: end;

.fixed-box {
width: 21em;
height: 21em;
text-align: center;
padding: 1rem;
border: 3px solid #000;
background-color: #fff;
display: flex;
flex-direction: column;
.usa-card__container {
align-items: center;
justify-content: center;
box-sizing: border-box;

text-align: center;
img {
width: 6rem;
height: 6rem;
margin: units(4) auto 0;
width: units(15);
height: units(15);
}
.usa-card__body {
margin-bottom: units(2);
}
}
}

.gsa-usa-alert-signed-out {
.contact-us-card {
border: 2px solid color("ink");
padding: units(2);
color: #000;
width: 100%;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease;

&:hover {
background-color: #005ea2;
color: white;
border-color: #003d6b;

strong {
color: white;
}
&:hover, &:focus {
background-color: color("blue-60v");
color: #FFF;
border-color: color("blue-60v");

img {
filter: brightness(0) invert(1);
Expand Down
4 changes: 4 additions & 0 deletions app/assets/sass/uswds/_uswds-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ in the form $setting: value,

@use "uswds-core" with (
$theme-font-type-sans: "public-sans",
$theme-card-border-radius: 0,
$theme-card-gap: 4,
$theme-card-border-width: 2px,
$theme-card-border-color: "ink",
$theme-show-notifications: false,
$theme-banner-max-width: "desktop-lg",
$theme-grid-container-max-width: "desktop-lg",
Expand Down
2 changes: 1 addition & 1 deletion app/main/views/index.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ def index():
return render_template(
"views/signedout.html",
sms_rate=CURRENT_SMS_RATE,
counts=status_api_client.get_count_of_live_services_and_organizations()
counts=status_api_client.get_count_of_live_services_and_organizations(),
)


Expand Down
188 changes: 109 additions & 79 deletions app/templates/views/signedout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<section class="usa-section--dark usa-hero" 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-7 tablet:grid-col-12">
<h1 class="font-serif-2xl usa-hero__heading">
<div class="desktop:grid-col-8 tablet:grid-col-12">
<h1 class="font-sans-2xl usa-hero__heading">
Reach people where they are with government-powered text messages
</h1>
<p class="font-sans-lg">
Expand All @@ -34,20 +34,20 @@ <h1 class="font-serif-2xl usa-hero__heading">
</div>
</div>
<div
class="desktop:grid-col-4 grid-offset-1 desktop:display-block display-none margin-x-5"
class="desktop:grid-col-3 grid-offset-1 desktop:display-block display-none margin-x-5"
>
<img
src="{{ asset_url('images/product/phone-text.png') }}"
alt="An illustration of notifications to a phone."
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."
/>
</div>
</div>
</div>
</section>
<section
class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose"
class="grid-container usa-section usa-section__home border-top border-base-lighter usa-prose padding-bottom-1"
>
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">
<h2 class="font-body-xl margin-top-0 margin-bottom-3">
Government texting made easy
</h2>
<p class="usa-body">
Expand All @@ -57,62 +57,92 @@ <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
</p>
</section>

<section class="grid-container usa-section usa-section__home usa-prose">
<h2 class="font-heading-xl margin-top-0 margin-bottom-3">Key features</h2>
<div class="display-flex flex-wrap fixed-row">
<div class="usa-alert usa-alert--info fixed-box">
<img src="{{ asset_url('images/internet.svg') }}" alt="Internet icon" />
<h3 class="font-heading-md">Web-based</h3>
<p>Nothing to download or install</p>
</div>

<div class="usa-alert usa-alert--info fixed-box">
<img src="{{ asset_url('images/fast.svg') }}" alt="Fast icon" />
<h3 class="font-heading-md">Fast and easy</h3>
<p class="usa-body">No technical expertise required</p>
</div>
<div class="usa-alert usa-alert--info fixed-box">
<img src="{{ asset_url('images/status.svg') }}" alt="Status icon" />
<h3 class="font-heading-md">Track message delivery</h3>
<p class="usa-body">See which messages were received</p>
</div>
</div>

<div class="display-flex flex-wrap justify-content fixed-row">
<div class="usa-alert usa-alert--info fixed-box">
<img
src="{{ asset_url('images/translation.svg') }}"
alt="Translation icon"
/>
<h3 class="font-heading-md">Send in recipients' preferred language</h3>
<p class="usa-body">
Notify.gov has support for more than 30 character sets
</p>
</div>

<div class="usa-alert usa-alert--info fixed-box">
<img src="{{ asset_url('images/security.svg') }}" alt="Security icon" />
<h3 class="font-heading-md">Security and privacy</h3>
<p class="usa-body">
Limited data retention, encryption, and multi-factor authentication
protect user data and manage risk
</p>
</div>

<div class="usa-alert usa-alert--info fixed-box">
<img src="{{ asset_url('images/send.svg') }}" alt="Send icon" />
<h3 class="font-heading-md">Send bulk, customized, one-way messages</h3>
<p class="usa-body">
Send hundreds or thousands of individually customized messages with
just a few clicks
</p>
</div>
<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>
<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">
<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>
<div class="usa-card__body">
<p>Nothing to download or install</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<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>
<div class="usa-card__body">
<p>No technical expertise required</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<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>
<div class="usa-card__body">
<p>See which messages were received</p>
</div>
</div>
</li>
</ul>
<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<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>
<div class="usa-card__body">
<p>Notify.gov has support for more than 30 character sets</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<img src="{{ asset_url('images/security.svg') }}" alt="Lock with code icon inside on top of a web browser" />
<div class="usa-card__header">
<h3 class="font-heading-md">Security and privacy</h3>
</div>
<div class="usa-card__body">
<p>
Limited data retention, encryption, and multi-factor authentication
protect user data and manage risk
</p>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4 mobile-lg:grid-col-12">
<div class="usa-card__container">
<img src="{{ asset_url('images/send.svg') }}" alt="Paper airplane and a notification icon with the number 1 inside" />
<div class="usa-card__header">
<h3 class="font-heading-md">Send bulk, customized, one-way messages</h3>
</div>
<div class="usa-card__body">
<p>
Send hundreds or thousands of individually customized messages with
just a few clicks
</p>
</div>
</div>
</li>
</ul>
</div>
</section>

<section
class="grid-container usa-section usa-section__home usa-prose grid-container"
>
<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>
Expand All @@ -127,28 +157,28 @@ <h2 class="font-heading-xl margin-top-0 margin-bottom-3">
services may qualify to use Notify.gov to communicate with applicants and
participants in these programs.
</p>
<div class="card-hover-link grid-col-3">
<a href="mailto:[email protected]">
<div
class="gsa-usa-alert-signed-out usa-alert usa-alert--info padding-3 border-2px bg-white margin-top-3 tablet:grid-col-3"
>
<div class="grid-row flex-align-center grid-gap-2">
<div class="grid-col-auto">
<img
src="{{ asset_url('images/contact.svg') }}"
alt="Icon for contact us"
class="height-6 width-6"
/>
</div>
<div class="grid-col">
<p class="margin-0">
<strong>Contact us</strong><br />
To learn more about becoming a partner!
</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:[email protected]">
<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>
</div>
</a>
</a>
</div>
</div>
</section>

Expand Down
2 changes: 1 addition & 1 deletion tests/app/main/views/test_index.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ def is_feature_flagged(view):
"write_for_action",
"multiple_languages",
"benchmark_performance",
"guidance_index"
"guidance_index",
]
return (
not current_app.config["FEATURE_BEST_PRACTICES_ENABLED"]
Expand Down
8 changes: 6 additions & 2 deletions tests/app/main/views/test_template_folders.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,9 +350,13 @@ def test_should_show_templates_folder_page(
assert normalize_spaces(page.select_one("h1").text) == expected_title_tag

# remove this line if you don't want the breadcrumb on the first page
assert len(page.select("nav#breadcrumb-template-folders a")) == len(expected_parent_link_args)
assert len(page.select("nav#breadcrumb-template-folders a")) == len(
expected_parent_link_args
)

for index, parent_link in enumerate(page.select("nav#breadcrumb-template-folders a")):
for index, parent_link in enumerate(
page.select("nav#breadcrumb-template-folders a")
):
assert parent_link["href"] == url_for(
"main.choose_template",
service_id=SERVICE_ONE_ID,
Expand Down
8 changes: 6 additions & 2 deletions tests/app/main/views/test_templates.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ def test_should_show_empty_page_when_no_templates(
service_id=service_one["id"],
)

assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template")
assert normalize_spaces(page.select_one("h1").text) == (
"Select or create a template"
)
assert normalize_spaces(page.select_one("main p").text) == (expected_message)
assert page.select_one("#add_new_folder_form")
assert page.select_one("#add_new_template_form")
Expand All @@ -87,7 +89,9 @@ def test_should_show_add_template_form_if_service_has_folder_permission(
service_id=service_one["id"],
)

assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template")
assert normalize_spaces(page.select_one("h1").text) == (
"Select or create a template"
)
assert normalize_spaces(page.select_one("main p").text) == (
"Every message starts with a template. You can change it later. "
"You need a template before you can send messages."
Expand Down

0 comments on commit 1486680

Please sign in to comment.