mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-24 04:10:57 -05:00
Add GOVUK Frontend footer component
Replaces the following blocks/variables with the `footer` block filled by the `notify_footer` macro: - footer_top - footer_support_links Our current footer has a few differences with the GOVUK Frontend one: 1. the columns of links and the meta links have no headings, visible or structural 2. the line of text saying GDS built this prefixes the meta links whereas theirs sits on a new link, after them
This commit is contained in:
Tom Byers
@@ -1,5 +1,6 @@
|
||||
{% extends "template.njk" %}
|
||||
{% from "components/banner.html" import banner %}
|
||||
{% from "components/notify-footer.html" import notify_footer %}
|
||||
|
||||
{% block headIcons %}
|
||||
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
|
||||
@@ -124,54 +125,93 @@
|
||||
{% block fullwidth_content %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block footer_top %}
|
||||
<div class="footer-categories">
|
||||
<div class="footer-categories-wrapper">
|
||||
<div class="grid-row">
|
||||
<div class="column-one-quarter">
|
||||
<ul>
|
||||
<li><a href="{{ url_for('main.support') }}">Support</a></li>
|
||||
<li><a href="https://status.notifications.service.gov.uk">System status</a></li>
|
||||
<li><a href="https://www.gov.uk/performance/govuk-notify">Performance</a></li>
|
||||
<li><a href="https://ukgovernmentdigital.slack.com/messages/C0E1ADVPC">Slack channel</a></li>
|
||||
<li><a href="https://gds.blog.gov.uk/category/notify/">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column-one-quarter">
|
||||
<ul>
|
||||
<li><a href="{{ url_for("main.features") }}">Features</a></li>
|
||||
<li><a href="{{ url_for("main.roadmap") }}">Roadmap</a></li>
|
||||
<li><a href="{{ url_for("main.trial_mode_new") }}">Trial mode</a></li>
|
||||
<li><a href="{{ url_for("main.message_status") }}">Message status</a></li>
|
||||
<li><a href="{{ url_for("main.security") }}">Security</a></li>
|
||||
<li><a href="{{ url_for("main.terms") }}">Terms of use</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column-one-quarter">
|
||||
<ul>
|
||||
<li><a href="{{ url_for("main.pricing") }}">Pricing</a></li>
|
||||
<li><a href="{{ url_for("main.how_to_pay") }}">How to pay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column-one-quarter">
|
||||
<ul>
|
||||
<li><a href="{{ url_for("main.documentation") }}">Documentation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block footer %}
|
||||
{% set meta_items = [
|
||||
{
|
||||
"href": url_for("main.privacy"),
|
||||
"text": "Privacy"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.cookies"),
|
||||
"text": "Cookies"
|
||||
}
|
||||
] %}
|
||||
|
||||
{% block footer_support_links %}
|
||||
<nav class="footer-nav">
|
||||
Built by the <a href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a>
|
||||
<a href="{{ url_for("main.privacy") }}">Privacy</a>
|
||||
<a href="{{ url_for("main.cookies") }}">Cookies</a>
|
||||
{% if current_service and current_service.research_mode %}
|
||||
<span id="research-mode" class="research-mode">research mode</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% if current_service and current_service.research_mode %}
|
||||
{% set meta_suffix = 'Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a><span id="research-mode" class="research-mode">research mode</span>' %}
|
||||
{% else %}
|
||||
{% set meta_suffix = 'Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a>' %}
|
||||
{% endif %}
|
||||
|
||||
{{ notify_footer({
|
||||
"navigation": [
|
||||
{
|
||||
"columns": 4,
|
||||
"items": [
|
||||
{
|
||||
"href": url_for('main.support'),
|
||||
"text": "Support"
|
||||
},
|
||||
{
|
||||
"href": "https://status.notifications.service.gov.uk",
|
||||
"text": "System status"
|
||||
},
|
||||
{
|
||||
"href": "https://www.gov.uk/performance/govuk-notify",
|
||||
"text": "Performance"
|
||||
},
|
||||
{
|
||||
"href": "https://ukgovernmentdigital.slack.com/messages/C0E1ADVPC",
|
||||
"text": "Slack channel"
|
||||
},
|
||||
{
|
||||
"href": "https://gds.blog.gov.uk/category/notify/",
|
||||
"text": "Blog"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.features"),
|
||||
"text": "Features"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.roadmap"),
|
||||
"text": "Roadmap"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.trial_mode_new"),
|
||||
"text": "Trial mode"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.message_status"),
|
||||
"text": "Message status"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.security"),
|
||||
"text": "Security"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.terms"),
|
||||
"text": "Terms of use"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.pricing"),
|
||||
"text": "Pricing"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.how_to_pay"),
|
||||
"text": "How to pay"
|
||||
},
|
||||
{
|
||||
"href": url_for("main.documentation"),
|
||||
"text": "Documentation"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"meta": {
|
||||
"items": meta_items,
|
||||
"html": meta_suffix
|
||||
}
|
||||
}) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyEnd %}
|
||||
|
||||
90
app/templates/components/notify-footer.html
Normal file
90
app/templates/components/notify-footer.html
Normal file
@@ -0,0 +1,90 @@
|
||||
{% macro notify_footer(params) %}
|
||||
|
||||
<footer class="govuk-footer {{ params.classes if params.classes }}" role="contentinfo" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
<div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
|
||||
{% if params.navigation %}
|
||||
<div class="govuk-footer__navigation">
|
||||
{% for nav in params.navigation %}
|
||||
<div class="govuk-footer__section">
|
||||
{# <h2 class="govuk-footer__heading govuk-heading-m">{{ nav.title }}</h2> removed #}
|
||||
{% if nav['items'] %}
|
||||
{% set listClasses %}
|
||||
{% if nav.columns %}
|
||||
govuk-footer__list--columns-{{ nav.columns }}
|
||||
{% endif %}
|
||||
{% endset %}
|
||||
<ul class="govuk-footer__list {{ listClasses | trim }}">
|
||||
{% for item in nav['items'] %}
|
||||
{% if item.href and item.text %}
|
||||
<li class="govuk-footer__list-item">
|
||||
<a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
{{ item.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<hr class="govuk-footer__section-break">
|
||||
{% endif %}
|
||||
<div class="govuk-footer__meta">
|
||||
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
||||
{% 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 class="govuk-footer__meta-custom">
|
||||
{{ params.meta.html | safe if params.meta.html else params.meta.text }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{#- The SVG needs `focusable="false"` so that Internet Explorer does not
|
||||
treat it as an interactive element - without this it will be
|
||||
'focusable' when using the keyboard to navigate. #}
|
||||
<svg
|
||||
role="presentation"
|
||||
focusable="false"
|
||||
class="govuk-footer__licence-logo"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewbox="0 0 483.2 195.7"
|
||||
height="17"
|
||||
width="41"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
|
||||
/>
|
||||
</svg>
|
||||
<span class="govuk-footer__licence-description">
|
||||
All content is available under the
|
||||
<a
|
||||
class="govuk-footer__link"
|
||||
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
|
||||
rel="license"
|
||||
>Open Government Licence v3.0</a>, except where otherwise stated
|
||||
</span>
|
||||
</div>
|
||||
<div class="govuk-footer__meta-item">
|
||||
<a
|
||||
class="govuk-footer__link govuk-footer__copyright-logo"
|
||||
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
|
||||
>© Crown copyright</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user