Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update to frontend v8 #256

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

update to frontend v8 #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Wagtail NHS.UK frontend

A wagtail implementation of the [NHS frontend v6.2.0](https://github.com/nhsuk/nhsuk-frontend) standard components.
A wagtail implementation of the [NHS frontend v8.1.0](https://github.com/nhsuk/nhsuk-frontend) standard components.

## Installation

Expand Down
1 change: 1 addition & 0 deletions testapp/testapp/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
</head>

<body class="{% block body_class %}{% endblock %}">
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
{% wagtailuserbar %}

{% include "wagtailnhsukfrontend/skip_link.html" %}
Expand Down
2 changes: 1 addition & 1 deletion wagtailnhsukfrontend/static/wagtailnhsukfrontend/css/nhsuk.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion wagtailnhsukfrontend/static/wagtailnhsukfrontend/js/nhsuk.min.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion wagtailnhsukfrontend/templates/wagtailnhsukfrontend/breadcrumb_back.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{% load wagtailcore_tags %}

<a href="{% pageurl page %}" class="nhsuk-breadcrumb__backlink">Back to {{ page.title }}</a>
<a href="{% pageurl page %}" class="nhsuk-breadcrumb__backlink">
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
{{ page.title }}
</a>
25 changes: 18 additions & 7 deletions wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
<footer role="contentinfo">
<div class="nhsuk-footer" id="nhsuk-footer">
<div class="nhsuk-footer-container">
<div class="nhsuk-width-container">
<h2 class="nhsuk-u-visually-hidden">Support links</h2>
<ul class="nhsuk-footer__list">
{% for item in primary_links %}
{% include './footer_link.html' %}
{% endfor %}
</ul>
<div class="nhsuk-footer">
{% for column in footer_columns %}
{% if column.column_title %}
<h4 class="nhsuk-u-visually-hidden">
{{ column.column_title }}
</h4>
{% endif %}
<ul class="nhsuk-footer__list">
{% for link in column.links %}
{% include './footer_link.html' %}
{% endfor %}
</ul>
{% endfor %}
</div>
<div>
<p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
</div>
</div>
</footer>
</div>
</footer>
6 changes: 5 additions & 1 deletion wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer_link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="{{ item.url }}">{{ item.label }}</a></li>
<li class="nhsuk-footer__list-item">
<a class="nhsuk-footer__list-item-link" href="{{ link.url }}">
{{ link.label }}
</a>
</li>
16 changes: 5 additions & 11 deletions wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
<header class="nhsuk-header{% if transactional %} nhsuk-header--transactional{% endif %}{% if organisation_name %} nhsuk-header--organisation{% if organisation_white %} nhsuk-header--white{% endif %}{% endif %}" role="banner">
<div class="nhsuk-width-container nhsuk-header__container">
<div class="nhsuk-header__container">
{% include 'wagtailnhsukfrontend/header/logo.html' %}

{% if not primary_links and not show_search %}
{% if service_name and transactional and not organisation_name %}
<div class="nhsuk-header__transactional-service-name{% if service_long_name %} nhsuk-header__transactional-service-name--long {% endif %}">
<a class="nhsuk-header__transactional-service-name--link" href="{{ service_href|default:"/" }}">{{ service_name }}</a>
</div>
{% endif %}
{% else %}
<div class="nhsuk-header__content" id="content-header">
{% if primary_links %}
{% include 'wagtailnhsukfrontend/header/menu_toggle.html' %}
{% endif %}

{% if show_search %}
{% include 'wagtailnhsukfrontend/header/search.html' %}
{% endif %}
Expand All @@ -22,7 +16,7 @@

</div>

{% if primary_links %}
{% include 'wagtailnhsukfrontend/header/menu.html' %}
{% endif %}
</header>
{% if primary_links %}
{% include 'wagtailnhsukfrontend/header/menu.html' %}
{% endif %}
</header>
41 changes: 22 additions & 19 deletions wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
<nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
<div class="nhsuk-width-container">
<p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
<button class="nhsuk-header__navigation-close" id="close-menu">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" height="27" width="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Close menu</span>
</button>
</p>
<div class="nhsuk-navigation-container {% if organisation_white %} nhsuk-header--white{% endif %}">
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
<ul class="nhsuk-header__navigation-list">
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
<a class="nhsuk-header__navigation-link" href="{{ logo_href|default:"/" }}" >
{% for item in primary_links %}
<li class="nhsuk-header__navigation-item">
<a class="nhsuk-header__navigation-link" href="{{item.url}}">
{{item.label}}
{# % include 'wagtailnhsukfrontend/header/menu_link.html' % #}
</a>
</li>
{% endfor %}
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
<a class="nhsuk-header__navigation-link" href="{{ logo_href|default:"/">
Home
<svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34">
</a>
</li>
<li class="nhsuk-mobile-menu-container">
<button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
<span class="nhsuk-u-visually-hidden">Browse</span>
More
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</a>
</button>
</li>
{% for item in primary_links %}
{% include 'wagtailnhsukfrontend/header/menu_link.html' %}
{% endfor %}
</ul>
</div>
</nav>
</nav>
</div>
41 changes: 15 additions & 26 deletions wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,15 @@
<div class="nhsuk-header__search">
<button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="{{ search_action|default:"/search/" }}" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="{{ search_field_name|default:"search-field" }}" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
<button class="nhsuk-search__close" id="close-search">
<svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" height="27" width="27">
<path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Close search</span>
</button>
</form>
</div>
</div>
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="{{ search_action|default:"/search/" }}" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="{{ search_field_name|default:"search-field" }}" type="search" placeholder="Search" autocomplete="off">
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
</div>