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..6e31d73 100644
--- a/app/assets/sass/components/_participant-table.scss
+++ b/app/assets/sass/components/_participant-table.scss
@@ -1,17 +1,45 @@
+// 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-available {
+ // background: nhsuk-colour("white");
+ // }
+ 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: 6px;
}
td:has( > .nhsuk-checkboxes__item) {
@@ -20,12 +48,5 @@
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..6223362
--- /dev/null
+++ b/app/assets/sass/components/_progress-bar.scss
@@ -0,0 +1,81 @@
+@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);
+ border: 1px solid $nhsuk-input-border-colour;;
+ background: #fff;
+ box-sizing: border-box;
+ appearance: none;
+ -webkit-appearance: none;
+}
+.app-progress-bar::-webkit-progress-bar {
+ background: #fff;
+}
+.app-progress-bar::-moz-progress-bar {
+ background: transparent;
+}
+
+.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..0f1a2eb 100755
--- a/app/assets/sass/main.scss
+++ b/app/assets/sass/main.scss
@@ -9,11 +9,11 @@
// https://github.com/NHSDigital/manage-breast-screening-prototype
@forward "components/calendar-table";
-@forward "components/day-listing";
@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" %}
@@ -30,15 +30,6 @@
// Batch (for now) view bar charts and legends
-: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);
-}
-
.hatching--standard {
background: var(--standard-chart-hatch)
}
@@ -124,30 +115,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: '