Skip to content

Commit 1ac61a6

Browse files
devansXDdevansXD
authored
Merge pull request #30 from NHSDigital/davids-branch
Nav fix
2 parents 4820d92 + c0f5b4d commit 1ac61a6

File tree

5 files changed

+63
-50
lines changed

5 files changed

+63
-50
lines changed

‎app/views/layout-top-nav-v2.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
2222
{% block header %}
2323
<header class="nhsuk-header" role="banner">
24-
<div class="nhsuk-width-container-fluid nhsuk-header__container">
24+
<div class="nhsuk-width-container nhsuk-header__container">
2525
<div class="nhsuk-header__logo nhsuk-header__logo--only">
2626
<a aria-label="NHS" class="nhsuk-header__link nhsuk-header__link--service" href="../index"><svg class="nhsuk-logo" focusable="false" role="presentation" viewBox="0 0 40 16" xmlns="http://www.w3.org/2000/svg">
2727
<path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
@@ -30,7 +30,7 @@
3030
<image src="https://assets.nhs.uk/images/nhs-logo.png" xlink:href="/"></image></svg> <span class="nhsuk-header__service-name">Manage Your Appointments</span></a>
3131
</div>
3232
<div class="nhsuk-header__content" id="content-header">
33-
<nav aria-label="primary navigation" class="nhsuk-header__navigation" id="header-navigation" role="navigation">
33+
<nav class="nhsuk-navigation nhsuk-width-container" id="header-navigation" role="navigation" aria-label="Primary navigation"></nav>
3434
<ul class="nhsuk-header__navigation-list" style="border:0">
3535
<li class="nhsuk-header__navigation-item">
3636
<a class="nhsuk-header__navigation-link" href="#">[email protected]</a>
@@ -46,7 +46,8 @@
4646
</div>
4747
</div>
4848
<div class="nhsuk-navigation-container"></div>
49-
<ul class="nhsuk-header__navigation-list" style="justify-content: flex-start;">
49+
<nav class="nhsuk-navigation nhsuk-width-container" id="header-navigation" role="navigation" aria-label="Primary navigation">
50+
<ul class="nhsuk-header__navigation-list" style="justify-content: flex-start;">
5051
<li class="nhsuk-header__navigation-item">
5152
<a class="nhsuk-header__navigation-link" href="month">
5253
View availability

‎app/views/layout-top-nav-v3.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
2222
{% block header %}
2323
<header class="nhsuk-header" role="banner">
24-
<div class="nhsuk-width-container-fluid nhsuk-header__container">
24+
<div class="nhsuk-width-container nhsuk-header__container">
2525
<div class="nhsuk-header__logo nhsuk-header__logo--only">
2626
<a aria-label="NHS" class="nhsuk-header__link nhsuk-header__link--service" href="../index"><svg class="nhsuk-logo" focusable="false" role="presentation" viewBox="0 0 40 16" xmlns="http://www.w3.org/2000/svg">
2727
<path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
@@ -46,8 +46,8 @@
4646
</div>
4747
</div>
4848
<div class="nhsuk-navigation-container"></div>
49-
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
50-
<ul class="nhsuk-header__navigation-list" style="justify-content: flex-start;">
49+
<nav class="nhsuk-navigation nhsuk-width-container" id="header-navigation" role="navigation" aria-label="Primary navigation">
50+
<ul class="nhsuk-header__navigation-list" style="justify-content: flex-start;">
5151
<li class="nhsuk-header__navigation-item">
5252
<a class="nhsuk-header__navigation-link" href="month">
5353
View availability

‎app/views/layout-top-nav-v5.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
2222
{% block header %}
2323
<header class="nhsuk-header" role="banner">
24-
<div class="nhsuk-width-container-fluid nhsuk-header__container">
24+
<div class="nhsuk-width-container nhsuk-header__container">
2525
<div class="nhsuk-header__logo nhsuk-header__logo--only">
2626
<a aria-label="NHS" class="nhsuk-header__link nhsuk-header__link--service" href="../index"><svg class="nhsuk-logo" focusable="false" role="presentation" viewBox="0 0 40 16" xmlns="http://www.w3.org/2000/svg">
2727
<path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path>
@@ -46,7 +46,7 @@
4646
</div>
4747
</div>
4848
<div class="nhsuk-navigation-container"></div>
49-
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
49+
<nav class="nhsuk-navigation nhsuk-width-container" id="header-navigation" role="navigation" aria-label="Primary navigation">
5050
<ul class="nhsuk-header__navigation-list" style="justify-content: flex-start;">
5151
<li class="nhsuk-header__navigation-item">
5252
<a class="nhsuk-header__navigation-link" href="month" aria-current="true">

‎app/views/current/site-selector.html renamed to ‎app/views/v7/site-selector-old.html

File renamed without changes.

‎app/views/v7/site-selector.html

Lines changed: 54 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,61 @@
1-
<!-- Use this page as the index for your project -->
2-
3-
<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
4-
5-
<!-- Extends the layout from /views/layout.html -->
1+
<!-- File: app/views/test-page.html -->
62
{% extends 'layout.html' %}
7-
<!--
8-
In /views/layout.html you can:
9-
- change the header and footer
10-
- add custom CSS and JavaScript
11-
-->
12-
13-
<!-- Set the page title -->
14-
{% block pageTitle %}
15-
Manage appointments
16-
{% endblock %}
17-
18-
<!-- For adding a breadcrumb -->
19-
<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs -->
20-
{% block beforeContent %}
21-
{% endblock %}
223

23-
<!-- For adding a back link -->
24-
<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/back-link -->
25-
{% block outerContent %}
4+
{% block head %}
5+
<!-- Include the accessible-autocomplete CSS from CDN -->
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/accessible-autocomplete.min.css">
267
{% endblock %}
278

28-
<!-- For adding page content -->
29-
<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
309
{% block content %}
31-
<div class="nhsuk-grid-row">
32-
<div class="nhsuk-grid-column-two-thirds">
33-
34-
<!-- Change the page title here -->
35-
<h1>
36-
Choose a site
37-
</h1>
38-
39-
<!--<p><a class="nhsuk-link" href="month">Hornsey Central Pharmacy</a></p>-->
40-
<p><a class="nhsuk-link" href="site-overview">Hornsey Central Pharmacy</a></p>
41-
<p><a class="nhsuk-link" href="site-overview">Knightons Pharmacy</a></p>
42-
<p><a class="nhsuk-link" href="site-overview">Whinchat Pharmacy</a></p>
43-
44-
45-
<!-- End of content -->
46-
10+
<div class="nhsuk-width-container">
11+
<main class="nhsuk-main-wrapper" id="main-content">
12+
<div class="nhsuk-grid-row">
13+
<div class="nhsuk-grid-column-two-thirds">
14+
<h1>Site selection</h1>
15+
16+
<form method="post" action="site-overview">
17+
<div class="nhsuk-form-group">
18+
<label class="nhsuk-label" for="location">
19+
Enter your location
20+
</label>
21+
22+
<div class="nhsuk-hint" id="location-hint">
23+
Start typing to see suggestions
24+
</div>
25+
26+
<div id="location-container"></div>
27+
<input type="hidden" name="location" id="location-hidden">
28+
</div>
29+
30+
<button class="nhsuk-button" type="submit">Continue</button>
31+
</form>
32+
</div>
4733
</div>
48-
</div>
34+
</main>
35+
</div>
4936
{% endblock %}
37+
38+
{% block bodyEnd %}
39+
<!-- Include the accessible-autocomplete JS from CDN -->
40+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/accessible-autocomplete.min.js"></script>
41+
42+
<script>
43+
document.addEventListener('DOMContentLoaded', function() {
44+
if (typeof accessibleAutocomplete !== 'undefined') {
45+
// Initialize the autocomplete directly
46+
accessibleAutocomplete({
47+
element: document.getElementById('location-container'),
48+
id: 'location',
49+
source: ['London', 'Manchester', 'Birmingham', 'Hornsea Central Pharmacy', 'Leeds', 'Liverpool'],
50+
displayMenu: 'overlay',
51+
confirmOnBlur: true,
52+
onConfirm: function(selectedItem) {
53+
document.getElementById('location-hidden').value = selectedItem;
54+
}
55+
});
56+
} else {
57+
console.error('Accessible Autocomplete library not loaded');
58+
}
59+
});
60+
</script>
61+
{% endblock %}

0 commit comments

Comments
 (0)