mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-19 05:59:44 -04:00
Updating site to use USWDS styles (#509)
* Updated header and footer * Updated fonts * Moved files around and updated gulpfile to correct the build process when it goes to production * Adjusted grid templating * Added images to assets * Update app/templates/components/uk_components/footer/template.njk Co-authored-by: Steven Reilly <stvnrlly@users.noreply.github.com>
This commit is contained in:
Jonathan Bobel
@@ -1,5 +1,8 @@
|
||||
<footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo"
|
||||
<!-- <footer class="usa-footer usa-footer--big {{ params.classes if params.classes }}" role="contentinfo"
|
||||
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
<div class="grid-container usa-footer__return-to-top">
|
||||
<a href="#">Return to top</a>
|
||||
</div>
|
||||
<div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
|
||||
{% if params.navigation %}
|
||||
<div class="govuk-footer__navigation">
|
||||
@@ -54,4 +57,129 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer> -->
|
||||
|
||||
|
||||
<footer class="usa-footer usa-footer--big">
|
||||
<div class="grid-container usa-footer__return-to-top">
|
||||
<a href="#">Return to top</a>
|
||||
</div>
|
||||
<div class="usa-footer__primary-section">
|
||||
<div class="grid-container">
|
||||
<div class="grid-row">
|
||||
<div class="grid-col">
|
||||
{% if params.navigation %}
|
||||
<nav class="usa-footer__nav" aria-label="Footer navigation,,">
|
||||
<div class="grid-row grid-gap-2">
|
||||
{% for nav in params.navigation %}
|
||||
<div class="mobile-lg:grid-col-6 desktop:grid-col-4">
|
||||
<section class="
|
||||
usa-footer__primary-content
|
||||
usa-footer__primary-content--collapsible
|
||||
">
|
||||
<h4 class="usa-footer__primary-link">{{ nav.title }}</h4>
|
||||
<ul class="usa-list usa-list--unstyled">
|
||||
{% for item in nav.items %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="usa-footer__secondary-link">
|
||||
<a href="{{ item.href }}" {% for attribute, value in item.attributes %}
|
||||
{{attribute}}="{{value}}" {% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="govuk-footer__meta border-top border-gray-10">
|
||||
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow padding-top-2">
|
||||
{% if params.meta %}
|
||||
<h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
|
||||
{% if params.meta.items %}
|
||||
<ul class="govuk-footer__inline-list">
|
||||
{% for item in params.meta.items %}
|
||||
<li class="govuk-footer__inline-list-item">
|
||||
<a class="govuk-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
|
||||
{{attribute}}="{{value}}" {% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if params.meta.text or params.meta.html %}
|
||||
<div>
|
||||
{{ params.meta.html | safe if params.meta.html else params.meta.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="usa-identifier site-identifier">
|
||||
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,,">
|
||||
<div class="usa-identifier__container">
|
||||
<div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo">
|
||||
<img class="usa-identifier__logo-img" src="{{ params.assetsPath | default('/static/images') }}/gsa-logo.svg" alt="GSA Logo" role="img" width="48"
|
||||
height="48">
|
||||
</a></div>
|
||||
<section class="usa-identifier__identity" aria-label="Agency description">
|
||||
<p class="usa-identifier__identity-domain">notify.gov</p>
|
||||
<p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General
|
||||
Services Administration</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
|
||||
<div class="usa-identifier__container">
|
||||
<ul class="usa-identifier__required-links-list">
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/website-information/accessibility-aids"
|
||||
class="usa-identifier__required-link">Accessibility support</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
|
||||
class="usa-identifier__required-link">FOIA requests</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
|
||||
class="usa-identifier__required-link">No FEAR Act data</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/reference/reports/budget-performance"
|
||||
class="usa-identifier__required-link">Performance reports</a>
|
||||
</li>
|
||||
<li class="usa-identifier__required-links-item">
|
||||
<a href="https://www.gsa.gov/website-information/website-policies"
|
||||
class="usa-identifier__required-link">Privacy policy</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="usa-identifier__section usa-identifier__section--usagov"
|
||||
aria-label="Government information and services">
|
||||
<div class="usa-identifier__container">
|
||||
<div class="usa-identifier__usagov-description">
|
||||
Looking for U.S. government information and services?
|
||||
</div>
|
||||
<a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -1,49 +1,121 @@
|
||||
<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
|
||||
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
<div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
|
||||
|
||||
<div class="govuk-header__logo">
|
||||
<a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
|
||||
<span class="govuk-header__logotype">
|
||||
<image src="{{ params.assetsPath | default('/assets/images') }}/email-template/us-flag.png" alt="United States Flag" xlink:href="" class="govuk-header__logotype-fallback-image" width="36" height="32"></image>
|
||||
</svg>
|
||||
<span class="govuk-header__logotype-text">
|
||||
U.S.
|
||||
</span>
|
||||
</span>
|
||||
{% if (params.productName) %}
|
||||
<span class="govuk-header__product-name">
|
||||
{{ params.productName }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
<!-- usa banner -->
|
||||
<section class="usa-banner" aria-label="Official website of the United States government">
|
||||
<div class="usa-accordion">
|
||||
<header class="usa-banner__header">
|
||||
<div class="usa-banner__inner">
|
||||
<div class="grid-col-auto">
|
||||
<img aria-hidden="true" class="usa-banner__header-flag" src="/static/images/us_flag_small.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
|
||||
<p class="usa-banner__header-text">
|
||||
An official website of the United States government
|
||||
</p>
|
||||
<p class="usa-banner__header-action">Here’s how you know</p>
|
||||
</div>
|
||||
<button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false"
|
||||
aria-controls="gov-banner-default-default">
|
||||
<span class="usa-banner__button-text">Here’s how you know</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="usa-banner__content usa-accordion__content" id="gov-banner-default-default">
|
||||
<div class="grid-row grid-gap-lg">
|
||||
<div class="usa-banner__guidance tablet:grid-col-6">
|
||||
<img class="usa-banner__icon usa-media-block__img" src="/static/images/icon-dot-gov.svg" role="img" alt=""
|
||||
aria-hidden="true" />
|
||||
<div class="usa-media-block__body">
|
||||
<p>
|
||||
<strong>Official websites use .gov</strong><br />A
|
||||
<strong>.gov</strong> website belongs to an official government
|
||||
organization in the United States.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usa-banner__guidance tablet:grid-col-6">
|
||||
<img class="usa-banner__icon usa-media-block__img" src="/static/images/icon-https.svg" role="img" alt=""
|
||||
aria-hidden="true" />
|
||||
<div class="usa-media-block__body">
|
||||
<p>
|
||||
<strong>Secure .gov websites use HTTPS</strong><br />A
|
||||
<strong>lock</strong> (
|
||||
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64"
|
||||
class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default"
|
||||
focusable="false">
|
||||
<title id="banner-lock-title-default">Lock</title>
|
||||
<desc id="banner-lock-description-default">Locked padlock icon</desc>
|
||||
<path fill="#000000" fill-rule="evenodd"
|
||||
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
|
||||
</svg> </span>) or <strong>https://</strong> means you’ve safely connected to
|
||||
the .gov website. Share sensitive information only on official,
|
||||
secure websites.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if params.serviceName or params.navigation %}
|
||||
<div class="govuk-header__content">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if params.serviceName %}
|
||||
<a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
|
||||
{{ params.serviceName }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if params.navigation %}
|
||||
<button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
|
||||
<nav>
|
||||
<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
|
||||
<!-- usa header -->
|
||||
<header class="usa-header usa-header--extended">
|
||||
<div class="usa-navbar">
|
||||
<div class="usa-logo display-flex flex-align-center" id="-logo">
|
||||
<div class="logo-img display-flex">
|
||||
<span class="usa-sr-only">US Notify Logo</span>
|
||||
<image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
|
||||
class="usa-flag-logo margin-right-1" width="40" height="35"></image>
|
||||
</div>
|
||||
<em class="logo-text usa-logo__text">
|
||||
<a href="/" title="US Notify">US Notify</a>
|
||||
</em>
|
||||
</div>
|
||||
<button type="button" class="usa-menu-btn">Menu</button>
|
||||
</div>
|
||||
<nav aria-label="Primary navigation" class="usa-nav">
|
||||
<div class="usa-nav__inner">
|
||||
<button type="button" class="usa-nav__close">
|
||||
<img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
|
||||
</button>
|
||||
<ul class="usa-nav__primary usa-accordion margin-right-1">
|
||||
{% for item in params.navigation %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
|
||||
<a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
|
||||
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
|
||||
item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
|
||||
<span>{{ item.text }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
<div class="usa-nav__secondary">
|
||||
<ul class="usa-nav__secondary-links">
|
||||
{% for item in params.secondaryNavigation %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
|
||||
<a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value
|
||||
in item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
|
||||
<span>{{ item.text }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li class="usa-nav__secondary-item">
|
||||
<a href="javascript:void(0)">
|
||||
Sign in
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <section aria-label="Search component">
|
||||
<form class="usa-search usa-search--small margin-bottom-2" role="search">
|
||||
<label class="usa-sr-only" for="search-field">Search</label>
|
||||
<input class="usa-input" id="search-field" type="search" name="search" />
|
||||
<button class="usa-button" type="submit">
|
||||
<img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
|
||||
</button>
|
||||
</form>
|
||||
</section> -->
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user