diff --git a/app/assets/images/placeholder-session-template-default.png b/app/assets/images/placeholder-session-template-default.png new file mode 100644 index 0000000..8dd9838 Binary files /dev/null and b/app/assets/images/placeholder-session-template-default.png differ diff --git a/app/assets/images/placeholder-session-template-special-held.png b/app/assets/images/placeholder-session-template-special-held.png new file mode 100644 index 0000000..ad56fca Binary files /dev/null and b/app/assets/images/placeholder-session-template-special-held.png differ diff --git a/app/assets/images/placeholder-session-template.png b/app/assets/images/placeholder-session-template.png new file mode 100644 index 0000000..9b4f11a Binary files /dev/null and b/app/assets/images/placeholder-session-template.png differ diff --git a/app/assets/sass/components/_template-card.scss b/app/assets/sass/components/_template-card.scss new file mode 100644 index 0000000..4fdcf44 --- /dev/null +++ b/app/assets/sass/components/_template-card.scss @@ -0,0 +1,12 @@ +// Import NHS.UK frontend library +@use "nhsuk-frontend/dist/nhsuk/core" as *; + +.app-template-card { + display: flex; + gap: 2rem; + + .preview-image { + width: 100px; + outline: 1px solid $nhsuk-border-colour; + } +} \ No newline at end of file diff --git a/app/assets/sass/components/_template-preview-dialog.scss b/app/assets/sass/components/_template-preview-dialog.scss new file mode 100644 index 0000000..9d9b9a9 --- /dev/null +++ b/app/assets/sass/components/_template-preview-dialog.scss @@ -0,0 +1,53 @@ +// Import NHS.UK frontend library +@use "nhsuk-frontend/dist/nhsuk/core" as *; + +.app-template-preview-dialog { + position: fixed; + inset: 0; + width: 90vw; + max-width: 960px; + height: 90vh; + margin: 5vh auto; + padding: 0; + border: none; + + &::backdrop { + background: rgba(0, 0, 0, 0.5); + } + + &__content { + position: relative; + } + + &__close { + position: absolute; + z-index: 1; + right: 0; + top: 0; + width: nhsuk-spacing(7); + height: nhsuk-spacing(7); + display: flex; + align-items: center; + justify-content: center; + color: nhsuk-colour("white"); + background-color: nhsuk-colour("black"); + border: 0; + font-size: 24px; + line-height: 1; + cursor: pointer; + + + &:focus { + background-color: $nhsuk-focus-colour; + color: $nhsuk-focus-text-colour; + outline: $nhsuk-border-width solid $nhsuk-focus-text-colour; + outline-offset: 0; + } + } + + &__frame { + width: 100%; + height: 90vh; + border: none; + } +} diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 77ff13c..a7c9bb6 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -15,6 +15,8 @@ @forward "components/participant-table"; //@forward "components/participant-search"; @forward "components/progress-bar"; +@forward "components/template-card"; +@forward "components/template-preview-dialog"; @forward "components/workflow"; //{% set containerClasses = "nhsuk-width-container-fluid" %} @@ -23,6 +25,10 @@ width: 1280px; } +a { + @extend .nhsuk-link--no-visited-state; +} + .app-card-editable { display: flex; justify-content: space-between; diff --git a/app/views/clinics/select-session-template-full-preview.html b/app/views/clinics/select-session-template-full-preview.html new file mode 100644 index 0000000..b93e0c7 --- /dev/null +++ b/app/views/clinics/select-session-template-full-preview.html @@ -0,0 +1,476 @@ +{% extends 'layout.html' %} +{% block header %}{% endblock %} + +{% block beforeContent %} + +{% endblock %} + +{% block content %} + + + +
+
+ +
+

Session template full preview

+

+ Session time + 09:00 to 17:00 +

+
+ +
+
+
+ 09:00 + to 09:20 + Special appointment + Merged (2) +
+
+
+
+ 09:10 + to 09:20 + + Merged (1) +
+
+
+
+ 09:20 + to 09:40 + Special appointment + Merged (2) +
+
+
+
+ 09:30 + to 09:40 + + Merged (1) +
+
+
+
+ 09:40 + to 09:50 + + +
+
+
+
+ 09:50 + to 10:00 + + +
+
+
+
+ 10:00 + to 10:10 + + +
+
+
+
+ 10:10 + to 10:20 + + +
+
+
+
+ 10:20 + to 10:30 + + +
+
+
+
+ 10:30 + to 10:40 + + +
+
+
+
+ 10:40 + to 10:50 + + +
+
+
+
+ 10:50 + to 11:00 + + +
+
+
+
+ 11:00 + to 11:10 + + +
+
+
+
+ 11:10 + to 11:20 + + +
+
+
+
+ 11:20 + to 11:30 + + +
+
+
+
+ 11:30 + to 11:40 + + +
+
+
+
+ 11:40 + to 11:50 + + +
+
+
+
+ 11:50 + to 12:00 + + +
+
+
+
+ 12:00 + to 12:10 + + +
+
+
+
+ 12:10 + to 12:20 + + +
+
+
+
+ 12:20 + to 12:30 + + +
+
+
+
+ 12:30 + to 12:40 + + +
+
+
+
+ 12:40 + to 12:50 + + +
+
+
+
+ 12:50 + to 13:00 + + +
+
+
+
+ 13:00 + to 14:00 + Staff break + Merged (6) +
+
+
+
+ 13:10 + to 13:20 + + Merged (1) +
+
+
+
+ 13:20 + to 13:30 + + Merged (1) +
+
+
+
+ 13:30 + to 13:40 + + Merged (1) +
+
+
+
+ 13:40 + to 13:50 + + Merged (1) +
+
+
+
+ 13:50 + to 14:00 + + Merged (1) +
+
+
+
+ 14:00 + to 14:10 + + +
+
+
+
+ 14:10 + to 14:20 + + +
+
+
+
+ 14:20 + to 14:30 + + +
+
+
+
+ 14:30 + to 14:40 + + +
+
+
+
+ 14:40 + to 14:50 + + +
+
+
+
+ 14:50 + to 15:00 + + +
+
+
+
+ 15:00 + to 15:10 + + +
+
+
+
+ 15:10 + to 15:20 + + +
+
+
+
+ 15:20 + to 15:30 + + +
+
+
+
+ 15:30 + to 15:40 + + +
+
+
+
+ 15:40 + to 15:50 + + +
+
+
+
+ 15:50 + to 16:00 + + +
+
+
+
+ 16:00 + to 16:10 + + +
+
+
+
+ 16:10 + to 16:20 + + +
+
+
+
+ 16:20 + to 16:30 + Held + +
+
+
+
+ 16:30 + to 16:40 + Held + +
+
+
+
+ 16:40 + to 16:50 + Held + +
+
+
+
+ 16:50 + to 17:00 + Held + +
+
+
+ +
+
+ +{% endblock %} +{% block footer %}{% endblock %} \ No newline at end of file diff --git a/app/views/clinics/select-session-template.html b/app/views/clinics/select-session-template.html new file mode 100644 index 0000000..3bb091f --- /dev/null +++ b/app/views/clinics/select-session-template.html @@ -0,0 +1,273 @@ +{% extends 'layout.html' %} + +{% set pageName = "" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %}{% endblock %} + +{% block content %} +
+
+ +
+ +
+ +
+ +
+

Choose session template

+ +
+
+

+ Standard day +

+ + Select this template + +
+
+
+ +
+
+
+
+
+ Total capacity +
+
+ 42 slots +
+
+
+
+ Time +
+
+ 09:00 to 17:00 +
+
+
+
+ +
+
+
+
+
+
+ Slot length +
+
+ 10 minutes +
+
+
+
+ Total held +
+
+ 8 slots +
+
+
+
+ Total cancelled +
+
+ 6 slots +
+
+
+
+
+
+ +
+
+

+ Special appointments day +

+ + Select this template + +
+
+
+ +
+
+
+
+
+ Total capacity +
+
+ 42 slots +
+
+
+
+ Time +
+
+ 09:00 to 17:00 +
+
+
+
+ +
+
+
+
+
+
+ Slot length +
+
+ 10 minutes +
+
+
+
+ Total held +
+
+ 42 slots +
+
+
+
+ Total cancelled +
+
+ 6 slots +
+
+
+
+
+
+ +
+
+

+ Default session template +

+ + Select this template + +
+
+
+ +
+
+
+
+
+ Total capacity +
+
+ 42 slots +
+
+
+
+ Time +
+
+ 09:00 to 17:00 +
+
+
+
+ +
+
+
+
+
+
+ Slot length +
+
+ 10 minutes +
+
+
+
+ Total held +
+
+ 0 slots +
+
+
+
+ Total cancelled +
+
+ 6 slots +
+
+
+
+
+
+ + +

+ Create new session template +

+ +
+
+ + + +
+ + +
+ +{% endblock %} \ No newline at end of file