Skip to content

Sketching out One Day #56

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

Merged
Demotive merged 10 commits into from
Aug 19, 2026
+1,178 −697
Merged

Sketching out One Day #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
624415f
Update clinic progress bars to progress elements with new css styling
Demotive Aug 12, 2026
48027b7
a day, first punt
Demotive Aug 13, 2026
7717451
Match heights
Demotive Aug 13, 2026
ab83082
Mellowing out a bit
Demotive Aug 13, 2026
a453908
Work in progress elements and styles (a bit)
Demotive Aug 14, 2026
3f98f0a
Update to <progress> in all the places
Demotive Aug 17, 2026
1e6599c
First go at the weird breadcrumb idea
Demotive Aug 17, 2026
d5c7982
Ultra mega page
Demotive Aug 18, 2026
98cb6d7
Single day in a decent place
Demotive Aug 19, 2026
cd48197
Indicate deliberately paused elements
Demotive Aug 19, 2026
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
28 changes: 28 additions & 0 deletions app/assets/sass/components/_clinic-level-breadcrumbs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Import NHS.UK frontend library
@use "nhsuk-frontend/dist/nhsuk/core" as *;

.app-clinic-level-breadcrumbs {
display: flex;
@include nhsuk-responsive-margin(4, "top");
@include nhsuk-responsive-padding(4, "bottom");
margin-bottom: 0;
border-bottom: 2px solid nhsuk-colour("grey-4");

& .--item:not(:first-child) {
position: relative;
padding-left: nhsuk-px-to-rem(32px);
margin-left: nhsuk-px-to-rem(16px);
}

& .--item:not(:first-child)::before {
content: "";
position: absolute;
bottom: nhsuk-px-to-rem(18px);
left: 0;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid $nhsuk-secondary-text-colour;
border-bottom: 2px solid $nhsuk-secondary-text-colour;
transform: rotate(-45deg);
}
}
34 changes: 0 additions & 34 deletions app/assets/sass/components/_day-listing.scss
View file
Open in desktop

This file was deleted.

52 changes: 36 additions & 16 deletions app/assets/sass/components/_participant-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,51 @@
// Import NHS.UK frontend library
@use "nhsuk-frontend/dist/nhsuk/core" as *;

.app-participant-table {

.nhsuk-table__body {
tr:nth-child(odd) {
background-color: rgba(224,228,230,.5);
}
tr:nth-child(even) {
background-color: transparent;
}
tbody td {
height: 116px;
}
tbody tr.--double td {
height: 232px;
background-image:
repeating-linear-gradient(to right, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 6px, transparent 6px, transparent 12px);
background-position: 0 116px;
background-size: 100% 1px;
background-repeat: repeat-x;
}
tbody tr.--triple td {
height: 348px;
background-image:
repeating-linear-gradient(to right, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 6px, transparent 6px, transparent 12px),
repeating-linear-gradient(to right, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 6px, transparent 6px, transparent 12px);
background-position: 0 116px, 0 232px;
background-size: 100% 1px;
background-repeat: repeat-x;
}

tbody tr:nth-child(odd) {
background-color: rgba(224,228,230,.5);
}
tbody tr:nth-child(even) {
background-color: transparent;
}

tbody tr.app-container-staff-break {
background: repeating-linear-gradient(130deg, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 1px, transparent 1px, transparent 12px);
}

th:first-child,
td:first-child {
//padding-left: 6px;
padding-left: nhsuk-px-to-rem(44px);
}

td:has( > .nhsuk-checkboxes__item) {
padding-left: 6px;
padding-right: 0;
padding-top: 8px;
width: 62px;
}

.app-column-time {
width: 5rem;
}
.app-column-nhs-number {
text-align: right;
width: 10rem;
}
}

}
85 changes: 85 additions & 0 deletions app/assets/sass/components/_progress-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
@use "nhsuk-frontend/dist/nhsuk/core" as *;

:root {
--generic-chart-hatch: repeating-linear-gradient(130deg, #005eb8, #005eb8 1px, #ccdff1 1px, #ccdff1 12px);
--standard-chart-hatch: repeating-linear-gradient(130deg, #004c23, #004c23 1px, #cce5d8 1px, #cce5d8 12px);
--special-chart-hatch: repeating-linear-gradient(130deg, #4d3708, #4d3708 1px, #ffdc8e 1px, #ffdc8e 12px);
--ceased-chart-hatch: repeating-linear-gradient(130deg, #354550, #354550 1px, #dbe0e3 1px, #dbe0e3 12px);
--vhr-chart-hatch: repeating-linear-gradient(130deg, #6b140e, #6b140e 1px, #f7d4d1 1px, #f7d4d1 12px);

--vhr-chart-hatch-1: repeating-linear-gradient(-45deg, #6b140e, #6b140e 1px, transparent 1px, transparent 12px);
--vhr-chart-hatch-2: repeating-linear-gradient(45deg, #6b140e, #6b140e 1px, #f7d4d1 1px, #f7d4d1 12px);
}

.app-simple-progress-bar {
width: 100%;
min-width: nhsuk-px-to-rem(200px);
outline: 1px solid $nhsuk-input-border-colour;

&.--thin {
min-height: 19px;
}

&.--generic {
background: var(--generic-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}

&.--standard {
background: var(--standard-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--special {
background: var(--special-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--ceased {
background: var(--ceased-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--vhr {
background: var(--vhr-chart-hatch-1) 0 0 / var(--percentage) 100% no-repeat, var(--vhr-chart-hatch-2) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
}


.app-progress-bar {
width: 100%;
min-width: nhsuk-px-to-rem(200px);
min-height: 42px;
border: 1px solid $nhsuk-input-border-colour;;
background: #fff;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
&.--thin {
min-height: 19px;
}
}
.app-progress-bar::-webkit-progress-bar {
background: #fff;
}
.app-progress-bar::-moz-progress-bar {
background: #fff;
}

.app-progress-bar.--generic::-webkit-progress-value,
.app-progress-bar.--generic::-moz-progress-bar {
background: var(--generic-chart-hatch);
}

.app-progress-bar.--standard::-webkit-progress-value,
.app-progress-bar.--standard::-moz-progress-bar {
background: var(--standard-chart-hatch);
}

.app-progress-bar.--special::-webkit-progress-value,
.app-progress-bar.--special::-moz-progress-bar {
background: var(--special-chart-hatch);
}

.app-progress-bar.--ceased::-webkit-progress-value,
.app-progress-bar.--ceased::-moz-progress-bar {
background: var(--ceased-chart-hatch);
}

.app-progress-bar.--vhr::-webkit-progress-value,
.app-progress-bar.--vhr::-moz-progress-bar {
background: var(--vhr-chart-hatch);
}
103 changes: 19 additions & 84 deletions app/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@
// https://github.com/NHSDigital/manage-breast-screening-prototype

@forward "components/calendar-table";
@forward "components/day-listing";
@forward "components/clinic-level-breadcrumbs";
@forward "components/inline-detailed-search";
@forward "components/secondary-navigation";
@forward "components/participant-table";
//@forward "components/participant-search";
@forward "components/progress-bar";
@forward "components/workflow";

//{% set containerClasses = "nhsuk-width-container-fluid" %}
Expand All @@ -28,17 +29,25 @@
align-items: baseline;
}

// Batch (for now) view bar charts and legends
.app-link--error,
.app-link--warning {
&,
&:visited {
color: $nhsuk-error-colour;
}

:root {
--generic-chart-hatch: repeating-linear-gradient(45deg, #005eb8, #005eb8 1px, #ccdff1 1px, #ccdff1 12px);
--standard-chart-hatch: repeating-linear-gradient(45deg, #004c23, #004c23 1px, #cce5d8 1px, #cce5d8 12px);
--special-chart-hatch: repeating-linear-gradient(-45deg, #4d3708, #4d3708 1px, #ffdc8e 1px, #ffdc8e 12px);
--ceased-chart-hatch: repeating-linear-gradient(90deg, #354550, #354550 1px, #dbe0e3 1px, #dbe0e3 12px);
--vhr-chart-hatch-1: repeating-linear-gradient(-45deg, #6b140e, #6b140e 1px, transparent 1px, transparent 12px);
--vhr-chart-hatch-2: repeating-linear-gradient(45deg, #6b140e, #6b140e 1px, #f7d4d1 1px, #f7d4d1 12px);
&:hover,
&:hover:visited {
color: nhsuk-shade($nhsuk-error-colour, 20%);
}

&:hover:active {
color: $nhsuk-text-colour;
}
}

// Batch (for now) view bar charts and legends

.hatching--standard {
background: var(--standard-chart-hatch)
}
Expand All @@ -49,56 +58,9 @@
background: var(--ceased-chart-hatch)
}
.hatching--high-risk {
background: var(--vhr-chart-hatch-1), var(--vhr-chart-hatch-2)
}

.app-chart-bar-segmented-horizontal {
margin: 0;
/* Turn the table tbody into a single horizontal bar */
tbody {
display: flex;
width: 100%;
min-height: 2rem;
overflow: hidden;
}
/* Each row becomes a segment, sized by its proportion of the total */
tbody tr {
display: flex;
align-items: center;
justify-content: left;
overflow: hidden;
}
/* Each row becomes a segment, sized by its proportion of the total */
tbody td {
padding: 0;
}
}
.app-chart-bar-segmented-horizontal--legend {
@include nhsuk-media-query($from: tablet) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;

li {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 8px;
}
}
.swatch {
display: inline-block;
width: 2rem;
height: 2rem;
flex-shrink: 0;
margin-right: 6px;
vertical-align: middle;
}
background: var(--vhr-chart-hatch)
}

// alternate to stacked bar?
.app-segmented-cards {
.nhsuk-card__content {
display: flex;
Expand All @@ -124,30 +86,3 @@
align-items: center;
width: 100%;
}

.app-simple-progress-bar {
width: 100%;
min-width: 200px;
outline: 1px solid #aeb7bd;

&.--thin {
min-height: 19px;
}

&.--generic {
background: var(--generic-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}

&.--standard {
background: var(--standard-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--special {
background: var(--special-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--ceased {
background: var(--ceased-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--vhr {
background: var(--vhr-chart-hatch-1) 0 0 / var(--percentage) 100% no-repeat, var(--vhr-chart-hatch-2) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
}
4 changes: 2 additions & 2 deletions app/views/_includes/clinics/clinic-listing-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
html: 'Alpha van<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-mobile-1</span> '
},
{
html: '<div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 99%;"></div><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">10 slots available of 1360</div>'
html: '<progress class="app-progress-bar --generic" value="99" max="100">99%</progress><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">10 slots available of 1360</div>'
}
],
[
Expand All @@ -40,7 +40,7 @@
html: 'Home base<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-static-1</span> '
},
{
html: '<div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 60%;"></div><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">40 slots available of 100</div>'
html: '<progress class="app-progress-bar --generic" value="60" max="100">60%</progress><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">40 slots available of 100</div>'
}
]
]
Expand Down
Loading