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..964b222 --- /dev/null +++ b/app/views/z-sketching/schedule-calendar.html @@ -0,0 +1,695 @@ +{% 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 + + 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 +
+ 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 %}