diff --git a/app/assets/sass/components/_calendar-table.scss b/app/assets/sass/components/_calendar-table.scss index 02ee414..0e1be73 100644 --- a/app/assets/sass/components/_calendar-table.scss +++ b/app/assets/sass/components/_calendar-table.scss @@ -13,6 +13,8 @@ width: calc(100% - 4rem); margin: 0 auto 2rem auto; } + + .calendar-table { width: 100%; table-layout: fixed; @@ -21,13 +23,13 @@ } .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 { - @include nhsuk-font(16); background-color: #fff; } .calendar-table td.calendar-table-capacity { @@ -48,10 +50,10 @@ .calendar-table td.calendar-table-no-data { background-color: transparent; } -.calendar-table-date { - font-weight: bold; - display: block; -} +// .calendar-table-date { +// font-weight: bold; +// display: block; +// } .calendar-table--apply-session { width: min(100%, 42rem); @@ -87,4 +89,88 @@ .calendar-table--apply-session td.calendar-table-cell--selected a, .calendar-table--apply-session td.calendar-table-cell--selected .calendar-table-date { color: #fff; +} + + + +/// +/// + +.calendar-table { + + .--schedule-start { + position: relative; + border-left: 4px solid nhsuk-colour("grey-2"); + padding-bottom: 2em; + + // Chevron pointing into the cell from the left border + &::before { + content: ""; + position: absolute; + top: 50%; + left: -1px; + width: 8px; + height: 16px; + background-color: nhsuk-colour("grey-2"); + clip-path: polygon(0 0, 100% 50%, 0 100%); + transform: translateY(-50%); + } + } + .--schedule-end { + position: relative; + border-right: 4px solid nhsuk-colour("grey-2"); + + // Chevron pointing into the cell from the right border + &::before { + content: ""; + position: absolute; + top: 50%; + right: -1px; + width: 8px; + height: 16px; + background-color: nhsuk-colour("grey-2"); + clip-path: polygon(100% 0, 0 50%, 100% 100%); + transform: translateY(-50%); + } + } + + // .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"); + } + } + .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; + } } \ No newline at end of file diff --git a/app/assets/sass/components/_progress-bar.scss b/app/assets/sass/components/_progress-bar.scss index 82dcce3..e3ac3c9 100644 --- a/app/assets/sass/components/_progress-bar.scss +++ b/app/assets/sass/components/_progress-bar.scss @@ -51,6 +51,9 @@ &.--thin { min-height: 19px; } + &.--compact { + min-width: 0; + } } .app-progress-bar::-webkit-progress-bar { background: #fff; diff --git a/app/views/z-sketching/schedule-calendar.html b/app/views/z-sketching/schedule-calendar.html new file mode 100644 index 0000000..938b3fc --- /dev/null +++ b/app/views/z-sketching/schedule-calendar.html @@ -0,0 +1,843 @@ +{% 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 + }) }} +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ August 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + No data + + No data + + No data + + No data + + 1 + + 2 +
+ 3 + + 4 + + 5 + + 6 + + 7 + + 8 + + 9 +
+ 10 + + 11 + + 12 + + 13 + + 14 + + 15 + + 16 +
+ 17 + + 18 + + 19 + + 20 + + 21 + + 22 + + 23 +
+ 24 + + 25 + + 26 + + 27 + + 28 + + 29 + + 30 +
+ 31 + + No data + + No data + + No data + + No data + + No data + + No data +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ September 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + 1 + + 2 + + 3 + + 4 + + 5 + + 6 +
+ 7 + 9% + 38 available
+ 4 booked
+ 8 held
+ Schedule name how? + 		+ 8 + 9% + 38 available
+ 4 booked
+ 8 held + 		+ 9 + 9% + 38 available
+ 4 booked
+ 8 held + 		+ 10 + 81% + 8 available
+ 34 booked
+ 8 held + 		+ 11 + 14% + 36 available
+ 6 booked
+ 4 held + 		+ 12 + 24% + 32 available
+ 10 booked
+ 5 held + 		+ 13 + 36% + 27 available
+ 15 booked
+ 6 held +
+ 14 + 43% + 24 available
+ 18 booked
+ 7 held + 		+ 15 + 52% + 20 available
+ 22 booked
+ 8 held + 		+ 16 + 60% + 17 available
+ 25 booked
+ 5 held + 		+ 17 + 71% + 12 available
+ 30 booked
+ 6 held + 		+ 18 + 29% + 30 available
+ 12 booked
+ 4 held + 		+ 19 + 48% + 22 available
+ 20 booked
+ 5 held + 		+ 20 + 67% + 14 available
+ 28 booked
+ 7 held +
+ 21 + 19% + 34 available
+ 8 booked
+ 4 held + 		+ 22 + 38% + 26 available
+ 16 booked
+ 6 held + 		+ 23 + 57% + 18 available
+ 24 booked
+ 8 held + 		+ 24 + 76% + 10 available
+ 32 booked
+ 5 held + 		+ 25 + 90% + 4 available
+ 38 booked
+ 4 held + 		+ 26 + 12% + 37 available
+ 5 booked
+ 6 held + 		+ 27 + 33% + 28 available
+ 14 booked
+ 7 held +
+ 28 + 50% + 21 available
+ 21 booked
+ 5 held + 		+ 29 + 69% + 13 available
+ 29 booked
+ 8 held + 		+ 30 + 86% + 6 available
+ 36 booked
+ 6 held + 		+ No data + + No data + + No data + + No data +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ October 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + No data + + 1 + 21% + 33 available
+ 9 booked
+ 4 held + 		+ 2 + 40% + 25 available
+ 17 booked
+ 5 held + 		+ 3 + 55% + 19 available
+ 23 booked
+ 6 held + 		+ 4 + 74% + 11 available
+ 31 booked
+ 7 held + 		+ 5 + 95% + 2 available
+ 40 booked
+ 4 held +
+ 6 + 17% + 35 available
+ 7 booked
+ 5 held + 		+ 7 + 45% + 23 available
+ 19 booked
+ 6 held + 		+ 8 + 64% + 15 available
+ 27 booked
+ 8 held + 		+ 9 + 83% + 7 available
+ 35 booked
+ 4 held + 		+ 10 + 26% + 31 available
+ 11 booked
+ 5 held + 		+ 11 + 48% + 22 available
+ 20 booked
+ 6 held + 		+ 12 + 62% + 16 available
+ 26 booked
+ 7 held +
+ 13 + 31% + 29 available
+ 13 booked
+ 4 held + 		+ 14 + 52% + 20 available
+ 22 booked
+ 5 held + 		+ 15 + 79% + 9 available
+ 33 booked
+ 6 held + 		+ 16 + 7% + 39 available
+ 3 booked
+ 4 held + 		+ + 17 + 98% + 1 available
+ 41 booked
+ 8 held + 		+ 18 + + 19 +
+ 20 + Schedule name + + 21 + + 22 + + 23 + + 24 + + 25 + + 26 +
+ 27 + + 28 + + 29 + + 30 + + 31 + + No data + + No data +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ November 2026 +
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
+ No data + + No data + + No data + + No data + + No data + + No data + + 1 +
+ 2 + + 3 + + 4 + + 5 + + 6 + + 7 + + 8 +
+ 9 + + 10 + + 11 + + 12 + + 13 + + 14 + + 15 +
+ 16 + + 17 + + 18 + + 19 + + 20 + + 21 + + 22 +
+ 23 + + 24 + + 25 + + 26 + + 27 + + 28 + + 29 +
+ Add a new schedule +
+
+ +
+
+{% endblock %}