diff --git a/app/assets/sass/components/_clinic-level-breadcrumbs.scss b/app/assets/sass/components/_clinic-level-breadcrumbs.scss
new file mode 100644
index 0000000..ecba884
--- /dev/null
+++ b/app/assets/sass/components/_clinic-level-breadcrumbs.scss
@@ -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);
+ }
+}
diff --git a/app/assets/sass/components/_day-listing.scss b/app/assets/sass/components/_day-listing.scss
deleted file mode 100644
index 66d8a22..0000000
--- a/app/assets/sass/components/_day-listing.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.app-slot-listing {
- border: 1px solid #aeb7bd;
- background-color: #fff;
- padding: 10px;
- margin-bottom: 10px;
- &.--hold {
- background-color: #f0f4f5;
- border-style: dashed;
- }
- &.--merged-start {
- border-bottom: 1px dashed #aeb7bd;
- margin-bottom: 0 !important;
- }
- &.--merged-mid {
- border-top: 0;
- border-bottom: 1px dashed #aeb7bd;
- margin-bottom: 0 !important;
- min-height: 16px;
- }
- &.--merged-end {
- border-top: 0;
- min-height: 16px;
- }
-}
-
-.app-slot-row {
- display: flex;
- flex-wrap: nowrap;
- gap: 3rem;
- align-items: top;
-}
-.app-slot-row-controls {
- margin-left: auto;
-}
\ No newline at end of file
diff --git a/app/assets/sass/components/_participant-table.scss b/app/assets/sass/components/_participant-table.scss
index 780e867..4c800a3 100644
--- a/app/assets/sass/components/_participant-table.scss
+++ b/app/assets/sass/components/_participant-table.scss
@@ -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;
- }
+}
-}
\ No newline at end of file
diff --git a/app/assets/sass/components/_progress-bar.scss b/app/assets/sass/components/_progress-bar.scss
new file mode 100644
index 0000000..82dcce3
--- /dev/null
+++ b/app/assets/sass/components/_progress-bar.scss
@@ -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);
+}
\ No newline at end of file
diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
index b511c44..77ff13c 100755
--- a/app/assets/sass/main.scss
+++ b/app/assets/sass/main.scss
@@ -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" %}
@@ -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)
}
@@ -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;
@@ -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;
- }
-}
diff --git a/app/views/_includes/clinics/clinic-listing-table.html b/app/views/_includes/clinics/clinic-listing-table.html
index d2346b7..e2a4f24 100644
--- a/app/views/_includes/clinics/clinic-listing-table.html
+++ b/app/views/_includes/clinics/clinic-listing-table.html
@@ -26,7 +26,7 @@
html: 'Alpha van
HWO-mobile-1 '
},
{
- html: '
1341 of 1352 dealt with
@@ -181,6 +183,8 @@1330 of 1330 appointed
6 of 12 appointed
0 of 2172 dealt with
0 of 2150 appointed
0 of 12 appointed
0 of 5 reconciled
0 of 5 reconciled