From 0bc1f49a458989027a25354537cf10362f663eb1 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 28 Aug 2026 13:59:53 +0100 Subject: [PATCH 1/5] Add in the components to build out simple prototype --- .../sass/components/_calendar-table.scss | 121 ++-- app/routes.js | 3 + app/routes/create-capacity-from-zero.js | 13 + .../clinic-summary-empty.html | 81 +++ .../create-clinic.html | 212 +++++++ .../create-schedule.html | 193 +++++++ .../create-capacity-from-zero/index.html | 128 +++++ .../new-schedule-empty.html | 348 ++++++++++++ .../new-schedule-ready.html | 516 ++++++++++++++++++ .../select-session-template-full-preview.html | 0 .../select-session-template.html | 2 +- 11 files changed, 1546 insertions(+), 71 deletions(-) create mode 100644 app/routes/create-capacity-from-zero.js create mode 100644 app/views/create-capacity-from-zero/clinic-summary-empty.html create mode 100644 app/views/create-capacity-from-zero/create-clinic.html create mode 100644 app/views/create-capacity-from-zero/create-schedule.html create mode 100644 app/views/create-capacity-from-zero/index.html create mode 100644 app/views/create-capacity-from-zero/new-schedule-empty.html create mode 100644 app/views/create-capacity-from-zero/new-schedule-ready.html rename app/views/{clinics => create-capacity-from-zero}/select-session-template-full-preview.html (100%) rename app/views/{clinics => create-capacity-from-zero}/select-session-template.html (98%) diff --git a/app/assets/sass/components/_calendar-table.scss b/app/assets/sass/components/_calendar-table.scss index 0e1be73..8a16896 100644 --- a/app/assets/sass/components/_calendar-table.scss +++ b/app/assets/sass/components/_calendar-table.scss @@ -20,6 +20,12 @@ table-layout: fixed; border-collapse: collapse; border: 1px solid #d8dde0; + + &.--js-enabled { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } } .calendar-table th, .calendar-table td { @@ -32,28 +38,28 @@ .calendar-table td { background-color: #fff; } -.calendar-table td.calendar-table-capacity { - background-color: #fff; - background-image: - linear-gradient(to top, rgba(255,255,255,0.85), rgba(255,255,255,0.85)), - var(--generic-chart-hatch); - background-size: - 100% 100%, - 100% calc(var(--percentage, 0%)); - background-position: - left top, - left bottom; - background-repeat: - no-repeat, - no-repeat; -} .calendar-table td.calendar-table-no-data { background-color: transparent; } -// .calendar-table-date { -// font-weight: bold; -// display: block; -// } + +td:not(.calendar-table-no-data) { + height: 124px; + background-color: nhsuk-tint(nhsuk-colour("grey-5"), 50%); + &.--session-assigned { + background-color: nhsuk-colour("white"); + } +} + +.calendar-table-date { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background-color: nhsuk-colour("grey-5"); + margin-bottom: nhsuk-spacing(3); +} .calendar-table--apply-session { width: min(100%, 42rem); @@ -100,77 +106,52 @@ .--schedule-start { position: relative; - border-left: 4px solid nhsuk-colour("grey-2"); - padding-bottom: 2em; + border-left-color: nhsuk-colour("grey-2"); + border-left-width: 2px; - // Chevron pointing into the cell from the left border + // Triangle marking the top-left corner &::before { content: ""; position: absolute; - top: 50%; + top: -1px; left: -1px; - width: 8px; - height: 16px; + width: 12px; + height: 12px; background-color: nhsuk-colour("grey-2"); - clip-path: polygon(0 0, 100% 50%, 0 100%); - transform: translateY(-50%); + clip-path: polygon(0 0, 100% 0, 0 100%); } } .--schedule-end { position: relative; - border-right: 4px solid nhsuk-colour("grey-2"); + border-right-color: nhsuk-colour("grey-2"); + border-right-width: 2px; - // Chevron pointing into the cell from the right border + // Triangle marking the top-right corner &::before { content: ""; position: absolute; - top: 50%; + top: -1px; right: -1px; - width: 8px; - height: 16px; + width: 12px; + height: 12px; background-color: nhsuk-colour("grey-2"); - clip-path: polygon(100% 0, 0 50%, 100% 100%); - transform: translateY(-50%); + clip-path: polygon(0 0, 100% 0, 100% 100%); } } - // .calendar-table-schedule-name { - // position: absolute; - // bottom: 0; - // left: 0; - // height: 1.75em; - // width: 100%; - // box-sizing: border-box; - // background-color: nhsuk-colour("grey-2"); - // color: #fff; - // } -} - -.calendar-table.--sketch { - td:not(.calendar-table-no-data) { - height: 124px; - background-color: nhsuk-tint(nhsuk-colour("grey-5"), 50%); - &.--session-assigned { - background-color: nhsuk-colour("white"); + td.--date-selected { + background-color: nhsuk-colour("pale-yellow"); + + .calendar-table-date { + background-color: $nhsuk-focus-colour; } } - .calendar-table-date { - display: block; - } +} - td.calendar-table-capacity { - background-color: #fff; - background-image: - linear-gradient(to top, rgba(255,255,255,0.85), rgba(255,255,255,0.85)), - var(--generic-chart-hatch); - background-size: - 100% 100%, - 100% calc(var(--percentage, 0%)); - background-position: - left top, - left bottom; - background-repeat: - no-repeat, - no-repeat; - } +.--session-locked { + display: flex; + align-items: center; + @include nhsuk-font-size(14); + color: nhsuk-colour("grey-2"); + margin-bottom: nhsuk-spacing(2); } \ No newline at end of file diff --git a/app/routes.js b/app/routes.js index ef859cb..562634c 100644 --- a/app/routes.js +++ b/app/routes.js @@ -724,4 +724,7 @@ router.post('/sessions/02-organise-slots', function (req, res) { // Isolated September Test (Mission 1) routes router.use(require('./routes/mission-1')); +// Isolated create capacity from zero routes +router.use(require('./routes/create-capacity-from-zero')); + module.exports = router diff --git a/app/routes/create-capacity-from-zero.js b/app/routes/create-capacity-from-zero.js new file mode 100644 index 0000000..95ef28d --- /dev/null +++ b/app/routes/create-capacity-from-zero.js @@ -0,0 +1,13 @@ +const express = require('express') +const router = express.Router() + +// Routes and functions specific to Create Capacity From Zero +/* + +/app/views/create-capacity-from-zero/ + +*/ + + + +module.exports = router \ No newline at end of file diff --git a/app/views/create-capacity-from-zero/clinic-summary-empty.html b/app/views/create-capacity-from-zero/clinic-summary-empty.html new file mode 100644 index 0000000..58f4917 --- /dev/null +++ b/app/views/create-capacity-from-zero/clinic-summary-empty.html @@ -0,0 +1,81 @@ +{% extends 'layout.html' %} + +{% set pageName = "Calendar view" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %} + +{% endblock %} + +{% block content %} + +
+
+

+ Clinic + Chichester - St Richards +

+

+ Alpha van
+ St Richard’s Hospital, Chichester +

+
+
+ +
+
+ +
+
+ {% set secondaryNavItems = [] %} + + {% for item in [ + { href: '#', label: 'Current schedules', selected: 'true' }, + { href: '#', label: 'Past schedules' } + ] %} + {% set secondaryNavItems = secondaryNavItems | push({ + text: item.label | safe, + href: item.href | trim, + current: true if item.selected == 'true' + }) %} + {% endfor %} + + {{ appSecondaryNavigation({ + visuallyHiddenTitle: "Secondary menu", + items: secondaryNavItems + }) }} +
+
+ +
+
+

No schedules yet

+ Add a new schedule +
+
+{% endblock %} diff --git a/app/views/create-capacity-from-zero/create-clinic.html b/app/views/create-capacity-from-zero/create-clinic.html new file mode 100644 index 0000000..fba55d2 --- /dev/null +++ b/app/views/create-capacity-from-zero/create-clinic.html @@ -0,0 +1,212 @@ +{% extends 'layout.html' %} + +{% set errorState = "false" %} + +{% set pageName = "Create day clinic" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} + +{% set tickSvg %} + +{% endset %} + +
+ +
+
+ + {% if errorState === "true" %} + {{ errorSummary({ + titleText: "There is a problem", + errorList: [ + { + text: "Clinic must be given a name", + href: "#" + }, + { + text: "A unit must be chosen", + href: "#" + }, + { + text: "A location must be chosen", + href: "#" + } + ] + }) }} + {% endif %} + +

Clinic details

+ +
+ +
+ + {% if errorState === "true" %} + + Error: Clinic must be given a name + + {% endif %} + +
+ +
+ + + +
+ +
+ +
+ +
+
+
+ + Unit + + {% if errorState === "true" %} + + Error: A unit must be chosen + + {% endif %} +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+ + Location + + {% if errorState === "true" %} + + Error: A location must be chosen + + {% endif %} +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+ +
+ + +
+
+
+ + + +{% endblock %} \ No newline at end of file diff --git a/app/views/create-capacity-from-zero/create-schedule.html b/app/views/create-capacity-from-zero/create-schedule.html new file mode 100644 index 0000000..6735980 --- /dev/null +++ b/app/views/create-capacity-from-zero/create-schedule.html @@ -0,0 +1,193 @@ +{% extends 'layout.html' %} + +{% set errorState = "false" %} + +{% set pageName = "Create a schedule" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} + +{% set tickSvg %} + +{% endset %} + +
+
+ +
+ +
+ +
+ +
+
+ + {% if errorState === "true" %} + {{ errorSummary({ + titleText: "There is a problem", + errorList: [ + { + text: "Schedule must be given a name", + href: "#" + }, + { + text: "Schedule start date must be given a day, month, and year", + href: "#" + }, + { + text: "Schedule start date must be in the future", + href: "#" + }, + { + text: "Schedule end date must be given a day, month, and year", + href: "#" + }, + { + text: "Schedule end date must be in the future", + href: "#" + } + ] + }) }} + {% endif %} + +

Create schedule

+ +
+ +
+ + {% if errorState === "true" %} + + Error: Schedule must be given a name + + {% endif %} + +
+ +
+
+ + Start date + +
+ For example, 18 6 2026 +
+ {% if errorState === "true" %} + + Error: Start date must be given a day, month, and year + + {% endif %} +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ +
+
+ + End date + +
+ For example, 18 6 2026 +
+ {% if errorState === "true" %} + + Error: End date must be given a day, month, and year + + {% endif %} +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + + + +
+
+
+ + + +{% endblock %} \ No newline at end of file diff --git a/app/views/create-capacity-from-zero/index.html b/app/views/create-capacity-from-zero/index.html new file mode 100644 index 0000000..8ea79da --- /dev/null +++ b/app/views/create-capacity-from-zero/index.html @@ -0,0 +1,128 @@ +{% extends 'layout.html' %} + +{% set pageName = "Clinics" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} + + {% set secondaryNavItems = [] %} + + {% for item in [ + { href: '/clinics/', label: 'Active clinics', selected: 'true' }, + { href: '#', label: 'Archived clinics' }, + { href: '/sessions/templating-01-listing', label: 'Manage session templates' } + ] %} + {% set secondaryNavItems = secondaryNavItems | push({ + text: item.label | safe, + href: item.href | trim, + current: true if item.selected == 'true' + }) %} + {% endfor %} + + {{ appSecondaryNavigation({ + visuallyHiddenTitle: "Secondary menu", + items: secondaryNavItems + }) }} + +
+
+
+

Active clinics

+ {{ button({ + text: "Create a new clinic", + href: "/create-capacity-from-zero/create-clinic", + classes: "nhsuk-button--secondary" + }) }} +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ Clinic + + Unit and location + + Current schedules + + Current capacity +
+ Chichester - St Richards
 + HWO-NNN-standard-20260501 + 		+ Alpha van
+ St Richard’s Hospital, Chichester + 		+ 31 August 2026 to 9 October 2026 + + 1500 slots available
+ of which 150 held +
+ Chichester - St Richards
 + HWO-NNN-standard-20260501 + 		+ Alpha van
+ St Richard’s Hospital, Chichester + 		+ No active schedules + + 1500 slots available
+ of which 150 held +
+ + + + + +
+
+ +{% endblock %} diff --git a/app/views/create-capacity-from-zero/new-schedule-empty.html b/app/views/create-capacity-from-zero/new-schedule-empty.html new file mode 100644 index 0000000..c0c206f --- /dev/null +++ b/app/views/create-capacity-from-zero/new-schedule-empty.html @@ -0,0 +1,348 @@ +{% extends 'layout.html' %} + +{% set pageName = "Calendar view" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} + +
+
+

+ Assign session templates + Session name +

+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ September 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ 7 + + 8 + + 9 + + 10 + + 11 + + 12 + + 13 +
+ 14 + + 15 + + 16 + + 17 + + 18 + + 19 + + 20 +
+ 21 + + 22 + + 23 + + 24 + + 25 + + 26 + + 27 +
+ 28 + + 29 + + 30 + + No data + + No data + + No data + + No data +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ October 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + No data + + 1 + + 2 + + 3 + + 4 + + 5 +
+ 6 + + 7 + + 8 + + 9 + + 10 + + 11 + + 12 +
+ 13 + + 14 + + 15 + + 16 + + 17 + + 18 + + 19 +
+
+ +
+
+

With selected days:

+ +
+
+
+{% endblock %} + +{% block pageScripts %} + +{% endblock %} diff --git a/app/views/create-capacity-from-zero/new-schedule-ready.html b/app/views/create-capacity-from-zero/new-schedule-ready.html new file mode 100644 index 0000000..fdae206 --- /dev/null +++ b/app/views/create-capacity-from-zero/new-schedule-ready.html @@ -0,0 +1,516 @@ +{% extends 'layout.html' %} + +{% set pageName = "Calendar view" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} + +{% set padlockSvg %} +
+ + Locked +
+{% endset %} + + +
+
+

+ Assign session templates + Session name +

+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ September 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ 7 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 8 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 9 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 10 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 11 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 12 + + 13 +
+ 14 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 15 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 16 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 17 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 18 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 19 + + 20 +
+ 21 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 22 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 23 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 24 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 25 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 26 + + 27 +
+ 28 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 29 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 30 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ No data + + No data + + No data + + No data +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ October 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + No data + + 1 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 2 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 3 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 4 + + 5 +
+ 6 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 7 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 8 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 9 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 10 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 11 + + 12 +
+ 13 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 14 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 15 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 16 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 17 + {{ padlockSvg | safe }} + + 42 slots
+ 0 booked
+ 8 held
+ 		+ 18 + + 19 +
+
+ +
+
+

With selected days:

+ +
+
+
+{% endblock %} + +{% block pageScripts %} + +{% endblock %} diff --git a/app/views/clinics/select-session-template-full-preview.html b/app/views/create-capacity-from-zero/select-session-template-full-preview.html similarity index 100% rename from app/views/clinics/select-session-template-full-preview.html rename to app/views/create-capacity-from-zero/select-session-template-full-preview.html diff --git a/app/views/clinics/select-session-template.html b/app/views/create-capacity-from-zero/select-session-template.html similarity index 98% rename from app/views/clinics/select-session-template.html rename to app/views/create-capacity-from-zero/select-session-template.html index 3bb091f..2dc9561 100644 --- a/app/views/clinics/select-session-template.html +++ b/app/views/create-capacity-from-zero/select-session-template.html @@ -267,7 +267,7 @@

Close full template preview - +

{% endblock %} \ No newline at end of file From 2fa4409b65498912622001655601a511c1502fd2 Mon Sep 17 00:00:00 2001 From: Mat Johnson Date: Fri, 28 Aug 2026 15:21:51 +0100 Subject: [PATCH 2/5] Very basic chained together --- .../sass/components/_calendar-table.scss | 74 ++++++++----------- .../sass/components/_grid-extensions.scss | 9 +++ app/assets/sass/main.scss | 26 ++++++- .../_local-includes/clinic-summary.html | 47 ++++++++++++ .../clinic-summary-empty.html | 53 +------------ .../create-clinic.html | 4 +- .../create-schedule.html | 32 +------- .../create-capacity-from-zero/index.html | 22 +----- .../new-schedule-empty.html | 25 ++----- .../new-schedule-ready.html | 51 +++++-------- .../select-session-template-full-preview.html | 1 + .../select-session-template.html | 42 +---------- 12 files changed, 150 insertions(+), 236 deletions(-) create mode 100644 app/assets/sass/components/_grid-extensions.scss create mode 100644 app/views/create-capacity-from-zero/_local-includes/clinic-summary.html diff --git a/app/assets/sass/components/_calendar-table.scss b/app/assets/sass/components/_calendar-table.scss index 8a16896..7b066e0 100644 --- a/app/assets/sass/components/_calendar-table.scss +++ b/app/assets/sass/components/_calendar-table.scss @@ -1,19 +1,6 @@ // Import NHS.UK frontend library @use "nhsuk-frontend/dist/nhsuk/core" as *; -.app-full-viewport-width { - width: 100vw; - margin-left: calc(50% - 50vw); - margin-right: calc(50% - 50vw); - border: solid #d8dde0; - border-width: 2px 0; - padding: 1.5rem 0 0 0; -} -.app-full-viewport-width .calendar-table { - width: calc(100% - 4rem); - margin: 0 auto 2rem auto; -} - .calendar-table { width: 100%; @@ -26,39 +13,40 @@ -moz-user-select: none; user-select: none; } -} -.calendar-table th, -.calendar-table td { - @include nhsuk-font(16); - width: 14.2857%; - padding: 0.75rem; - vertical-align: top; - border-width: 1px; -} -.calendar-table td { - background-color: #fff; -} -.calendar-table td.calendar-table-no-data { - background-color: transparent; -} -td:not(.calendar-table-no-data) { - height: 124px; - background-color: nhsuk-tint(nhsuk-colour("grey-5"), 50%); - &.--session-assigned { - background-color: nhsuk-colour("white"); + th, + td { + @include nhsuk-font(16); + width: 14.2857%; + padding: 0.75rem; + vertical-align: top; + border-width: 1px; + } + // td { + // background-color: #fff; + // } + // td.calendar-table-no-data { + // background-color: transparent; + // } + + td:not(.calendar-table-no-data) { + height: 124px; + background-color: nhsuk-tint(nhsuk-colour("grey-5"), 50%); + &.--session-assigned { + background-color: nhsuk-colour("white"); + } } -} -.calendar-table-date { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - border-radius: 50%; - background-color: nhsuk-colour("grey-5"); - margin-bottom: nhsuk-spacing(3); + .calendar-table-date { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background-color: nhsuk-colour("grey-5"); + margin-bottom: nhsuk-spacing(3); + } } .calendar-table--apply-session { diff --git a/app/assets/sass/components/_grid-extensions.scss b/app/assets/sass/components/_grid-extensions.scss new file mode 100644 index 0000000..3e3b16a --- /dev/null +++ b/app/assets/sass/components/_grid-extensions.scss @@ -0,0 +1,9 @@ +@use "nhsuk-frontend/dist/nhsuk/core" as *; + +.nhsuk-grid-column-four-fifths { + @include nhsuk-grid-column(four-fifths); +} + +.nhsuk-grid-column-one-fifth { + @include nhsuk-grid-column(one-fifth); +} diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index a7c9bb6..b57d3dd 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -1,8 +1,20 @@ // Import NHS.UK frontend library +@use "sass:math"; + @forward "nhsuk-frontend/dist/nhsuk/nhsuk" with ( - $nhsuk-page-width: 1280px + $nhsuk-page-width: 1280px, + $nhsuk-grid-widths: ( + one-quarter: math.percentage(math.div(1, 4)), + one-third: math.percentage(math.div(1, 3)), + one-half: math.percentage(math.div(1, 2)), + two-thirds: math.percentage(math.div(2, 3)), + three-quarters: math.percentage(math.div(3, 4)), + one-fifth: math.percentage(math.div(1, 5)), + four-fifths: math.percentage(math.div(4, 5)), + full: 100% + ) ); -//@forward "nhsuk-frontend/dist/nhsuk/nhsuk"; + @use "nhsuk-frontend/dist/nhsuk/core" as *; // Stolen Manage prototype components :P @@ -10,6 +22,7 @@ @forward "components/calendar-table"; @forward "components/clinic-level-breadcrumbs"; +@forward "components/grid-extensions"; @forward "components/inline-detailed-search"; @forward "components/secondary-navigation"; @forward "components/participant-table"; @@ -92,3 +105,12 @@ a { align-items: center; width: 100%; } + + +.nhsuk-grid-column-four-fifths { + @include nhsuk-grid-column(four-fifths); +} + +.nhsuk-grid-column-one-fifth { + @include nhsuk-grid-column(one-fifth); +} diff --git a/app/views/create-capacity-from-zero/_local-includes/clinic-summary.html b/app/views/create-capacity-from-zero/_local-includes/clinic-summary.html new file mode 100644 index 0000000..ce43916 --- /dev/null +++ b/app/views/create-capacity-from-zero/_local-includes/clinic-summary.html @@ -0,0 +1,47 @@ +
+
+

+ Clinic + Chichester - St Richards +

+

+ Alpha van
+ St Richard’s Hospital, Chichester +

+
+
+ +
+
+ +
+
+ {% set secondaryNavItems = [] %} + + {% for item in [ + { href: '#', label: 'Current schedules', selected: 'true' }, + { href: '#', label: 'Past schedules' } + ] %} + {% set secondaryNavItems = secondaryNavItems | push({ + text: item.label | safe, + href: item.href | trim, + current: true if item.selected == 'true' + }) %} + {% endfor %} + + {{ appSecondaryNavigation({ + visuallyHiddenTitle: "Secondary menu", + items: secondaryNavItems + }) }} +
+
\ No newline at end of file diff --git a/app/views/create-capacity-from-zero/clinic-summary-empty.html b/app/views/create-capacity-from-zero/clinic-summary-empty.html index 58f4917..3986768 100644 --- a/app/views/create-capacity-from-zero/clinic-summary-empty.html +++ b/app/views/create-capacity-from-zero/clinic-summary-empty.html @@ -1,6 +1,6 @@ {% extends 'layout.html' %} -{% set pageName = "Calendar view" %} +{% set pageName = "" %} {% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} @@ -24,58 +24,13 @@ {% block content %} -
-
-

- Clinic - Chichester - St Richards -

-

- Alpha van
- St Richard’s Hospital, Chichester -

-
-
- -
-
- -
-
- {% set secondaryNavItems = [] %} - - {% for item in [ - { href: '#', label: 'Current schedules', selected: 'true' }, - { href: '#', label: 'Past schedules' } - ] %} - {% set secondaryNavItems = secondaryNavItems | push({ - text: item.label | safe, - href: item.href | trim, - current: true if item.selected == 'true' - }) %} - {% endfor %} - - {{ appSecondaryNavigation({ - visuallyHiddenTitle: "Secondary menu", - items: secondaryNavItems - }) }} -
-
+ {% include "create-capacity-from-zero/_local-includes/clinic-summary.html" %}

No schedules yet

- Add a new schedule + Add a new schedule
+ {% endblock %} diff --git a/app/views/create-capacity-from-zero/create-clinic.html b/app/views/create-capacity-from-zero/create-clinic.html index fba55d2..ce37220 100644 --- a/app/views/create-capacity-from-zero/create-clinic.html +++ b/app/views/create-capacity-from-zero/create-clinic.html @@ -2,7 +2,7 @@ {% set errorState = "false" %} -{% set pageName = "Create day clinic" %} +{% set pageName = "" %} {% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} @@ -46,7 +46,7 @@

Clinic details

-
+