Skip to content

Lots of sketching for September #38

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 4 commits into from
Jun 22, 2026
Merged

Lots of sketching for September #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9322763
Lots of sketching and I hope that vscode folder is properly ignored
Demotive Jun 19, 2026
098bf30
More tweaks and joining up
Demotive Jun 19, 2026
fde88cd
Update the index and comment out the no results message
Demotive Jun 19, 2026
168bcc2
use a banner
Demotive Jun 22, 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"css.styleSheets": ["public/assets/sass/main.css"]
}
66 changes: 33 additions & 33 deletions app/assets/sass/components/_day-listing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
.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-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;
}
.app-slot-row {
display: flex;
flex-wrap: nowrap;
gap: 3rem;
align-items: top;
}
.app-slot-row-controls {
margin-left: auto;
}
31 changes: 31 additions & 0 deletions app/assets/sass/components/_inline-detailed-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.app-inline-detailed-search {
display: flex;
gap: 1rem;

& > .nhsuk-form-group {
margin-bottom: 0;

&:nth-child(4) {
width: 210px;
flex-shrink: 0;
}
&:last-child {
align-self: flex-end;
}
}

& .nhsuk-button {
margin-bottom: 4px;
}

.nhsuk-date-input__item {
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}

::placeholder {
color: #aeb7bd;
}
}
17 changes: 17 additions & 0 deletions app/assets/sass/components/_participant-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.app-participant-table {

tbody tr:nth-child(odd) {
background-color: rgba(255,255,255,0.5);
}

td:first-child {
padding-left: 12px;
}

&.nhsuk-checkboxes--small {
.nhsuk-checkboxes__item {
margin-top: -8px;
}
}

}
4 changes: 3 additions & 1 deletion app/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@

@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";

// Add your custom CSS/Sass styles below.
.app-card-editable {
display: flex;
justify-content: space-between;
align-items: last baseline;
align-items: baseline;
}

// Batch (for now) view bar charts and legends
Expand Down
2 changes: 1 addition & 1 deletion app/views/clinics/day-slot-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h1 class="nhsuk-heading-m">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h2 class="nhsuk-heading-l">
<span class="nhsuk-caption-m">Day view</span>
<span class="nhsuk-caption-l">Tuesday</span>
1 September 2026
</h2>
{% set secondaryNavItems = [] %}
Expand Down
8 changes: 7 additions & 1 deletion app/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,13 @@ <h4 class="nhsuk-heading-s">Iteration 1: transactional journey</h4>
<a href="/z-september-transactional-journey/batch-detail">Batch detail</a>
</li>
<li>
<a href="/search/batch-participant-search">Search participants</a>
<a href="/z-september-transactional-journey/search">Search participants</a>
</li>
<li>
<a href="/z-september-transactional-journey/search-and-results">Search results</a>
</li>
<li>
<a href="/z-september-transactional-journey/group">Group</a>
</li>
<li>
<a href="/z-september-transactional-journey/pre-appoint-confirm">Pre-appointment confirmation</a>
Expand Down
64 changes: 64 additions & 0 deletions app/views/z-september-transactional-journey/_includes/participant-search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
Find participants
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">Use one or more fields</span>
</div>
</div>
<div class="app-inline-detailed-search nhsuk-u-margin-top-3 nhsuk-u-margin-bottom-4">
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="nhs-number"><b>NHS number</b></label>
<input class="nhsuk-input" type="text" id="nhs-number">
</div>
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="first-name">First name</label>
<input class="nhsuk-input" type="text" id="first-name">
</div>
<div class="nhsuk-form-group">
<label class="nhsuk-label" for="last-name">Last name</label>
<input class="nhsuk-input" type="text" id="last-name">
</div>
<div class="nhsuk-form-group">
<fieldset class="nhsuk-fieldset" role="group">
<legend class="nhsuk-fieldset__legend" style="margin-bottom:4px;">
Date of birth
</legend>
<div class="nhsuk-date-input" id="dob">
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-u-visually-hidden" for="dob-day">
Day
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-day" name="dob[day]" type="text" inputmode="numeric" placeholder="dd">
</div>
</div>
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-u-visually-hidden" for="dob-month">
Month
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-month" name="dob[month]" type="text" inputmode="numeric" placeholder="mm">
</div>
</div>
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-u-visually-hidden" for="dob-year">
Year
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4" id="dob-year" name="dob[year]" type="text" inputmode="numeric" placeholder="yyyy">
</div>
</div>
</div>
</fieldset>
</div>
<div class="nhsuk-form-group">
<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" type="submit">
<svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
<path d="m20.7 18.9-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 10.6a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"></path>
</svg>
<span class="nhsuk-button__content">Search</span>
</button>
</div>
</div>
<hr>
4 changes: 2 additions & 2 deletions app/views/z-september-transactional-journey/appointing-complete.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="nhsuk-grid-column-full">
{% set html %}
<p class="nhsuk-notification-banner__heading">
All participants appointed successfully
23 participants booked successfully
</p>
{% endset %}
{{ notificationBanner({
Expand All @@ -39,7 +39,7 @@ <h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-1">
<div class="nhsuk-grid-column-full">
<div class="app-card-editable">
<h2 class="nhsuk-heading-l">
<span class="nhsuk-caption-m">Day view</span>
<span class="nhsuk-caption-l">Tuesday</span>
1 September 2026
</h2>
{{ actionLink({
Expand Down
90 changes: 84 additions & 6 deletions app/views/z-september-transactional-journey/group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,90 @@

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<p class="nhsuk-body">
Group
</p>
<p>
<a href="pre-appoint-confirm">Next: pre-appoint</a>
</p>
{% set html %}
<p class="nhsuk-notification-banner__heading">
Participant successfully added to group
</p>
{% endset %}
{{ notificationBanner({
html: html,
type: "success"
}) }}

{% set html %}
<p class="nhsuk-notification-banner__heading">
Participant successfully removed from group
</p>
{% endset %}
{{ notificationBanner({
html: html
}) }}
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<div class="app-card-editable">
<div>
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-2">Test clinic group</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">23 participants</span>
</div>
<a href="search" class="nhsuk-button nhsuk-button--secondary">
Add more participants
</a>
</div>
</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<table class="nhsuk-table app-participant-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th scope="col" class="nhsuk-table__header">
NHS Number
</th>
<th scope="col" class="nhsuk-table__header">
Name
</th>
<th scope="col" class="nhsuk-table__header">
Date of birth
</th>
<th scope="col" class="nhsuk-table__header">
Actions
</th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">628 334 7720</td>
<td class="nhsuk-table__cell">Christine Thompson</td>
<td class="nhsuk-table__cell">17 September 1967</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">628 334 7720</td>
<td class="nhsuk-table__cell">Christine Thompson</td>
<td class="nhsuk-table__cell">17 September 1967</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">628 334 7720</td>
<td class="nhsuk-table__cell">Christine Thompson</td>
<td class="nhsuk-table__cell">17 September 1967</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">628 334 7720</td>
<td class="nhsuk-table__cell">Christine Thompson</td>
<td class="nhsuk-table__cell">17 September 1967</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
</tbody>
</table>

<a href="pre-appoint-confirm" class="nhsuk-button">
Book into slots
</a>
</div>
</div>

Expand Down
Loading