Skip to content

Could a 1280px width be optimal? #39

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 5 commits into from
Jun 23, 2026
Merged

Could a 1280px width be optimal? #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fcc0b9e
Remove defunct bsoName from primary nav
Demotive Jun 22, 2026
561528d
More real looking data etc
Demotive Jun 22, 2026
963b29a
Basic sticky headers on participant tables
Demotive Jun 22, 2026
fd936fd
Remove sticky for now - borks keyboard focus on some elements
Demotive Jun 22, 2026
36c7e2e
Error states for september
Demotive Jun 23, 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
15 changes: 5 additions & 10 deletions app/assets/sass/components/_inline-detailed-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
.app-inline-detailed-search {
display: flex;
gap: 1rem;
//gap: 1rem;
gap: 2rem;

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

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

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

.nhsuk-date-input__item {
margin-right: 8px;
//margin-right: 8px;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
Expand Down
30 changes: 24 additions & 6 deletions app/assets/sass/components/_participant-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,35 @@
.app-participant-table {

/*thead tr {
position: sticky;
top: 0;
background-color: #f0f4f5;
}*/

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

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

&.nhsuk-checkboxes--small {
.nhsuk-checkboxes__item {
margin-top: -8px;
}
td:has( > .nhsuk-checkboxes__item) {
padding-right: 0;
padding-top: 8px;
width: 62px;
}

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

}
10 changes: 9 additions & 1 deletion app/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
// Import NHS.UK frontend library
@forward "nhsuk-frontend/dist/nhsuk/nhsuk";
@forward "nhsuk-frontend/dist/nhsuk/nhsuk" with (
$nhsuk-page-width: 1280px
);
//@forward "nhsuk-frontend/dist/nhsuk/nhsuk";
@use "nhsuk-frontend/dist/nhsuk/core" as *;

// Stolen Manage prototype components :P
Expand All @@ -12,7 +15,12 @@
@forward "components/participant-table";
//@forward "components/participant-search";

//{% set containerClasses = "nhsuk-width-container-fluid" %}

// Add your custom CSS/Sass styles below.
.app-width-extended {
width: 1280px;
}
.app-card-editable {
display: flex;
justify-content: space-between;
Expand Down
2 changes: 1 addition & 1 deletion app/views/_includes/primary-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% from 'header/macro.njk' import header %}

{% macro primaryNavigation(activeItem, serviceName, bsoName) %}
{% macro primaryNavigation(activeItem, serviceName) %}
{{ header({
account: {
items: [
Expand Down
2 changes: 1 addition & 1 deletion app/views/batches/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
{{ primaryNavigation("Batches", serviceName, bsoName) }}
{{ primaryNavigation("Batches", serviceName) }}
{% endblock %}

{% block beforeContent %}
Expand Down
2 changes: 1 addition & 1 deletion app/views/clinics/clinic-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
{{ primaryNavigation("Clinics", serviceName, bsoName) }}
{{ primaryNavigation("Clinics", serviceName) }}
{% endblock %}

{% block beforeContent %}
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 @@ -4,7 +4,7 @@

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
{{ primaryNavigation("Clinics", serviceName, bsoName) }}
{{ primaryNavigation("Clinics", serviceName) }}
{% endblock %}

{% block beforeContent %}
Expand Down
2 changes: 1 addition & 1 deletion app/views/clinics/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
{{ primaryNavigation("Clinics", serviceName, bsoName) }}
{{ primaryNavigation("Clinics", serviceName) }}
{% endblock %}

{% block beforeContent %}
Expand Down
2 changes: 1 addition & 1 deletion app/views/z-september-transactional-journey/_includes/min-primary-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% from 'header/macro.njk' import header %}

{% macro primaryNavigation(activeItem, serviceName, bsoName) %}
{% macro primaryNavigation(activeItem, serviceName) %}
{{ header({
account: {
items: [
Expand Down
225 changes: 170 additions & 55 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
@@ -1,64 +1,179 @@
<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>
<search>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
Find participants in Test batch 1
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">Use one or more fields</span>
</div>
</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 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>
<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 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>
<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">
</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>
</search>

<hr>

<h1><code style="color: red;">Error states</code></h1>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
<div role="alert">
<h2 class="nhsuk-error-summary__title">
There is a problem
</h2>
<div class="nhsuk-error-summary__body">
<p>
Is an empty submission an error or a "no results" return?
</p>
<p>
Bad formatting on NHS number. Non-numeric entry on NHS number. Anything else?
</p>
<p>
Missing date element (day, month or year). Non-numeric entry on dates. DOB mnust be in the past. Anything else?
</p>
<ul class="nhsuk-list nhsuk-error-summary__list">
<li>
<a href="#empty-search-error">Empty error</a>
</li>
<li>
<a href="#nhs-number-error">NHS number error</a>
</li>
<li>
<a href="#dob-error">Date of birth error</a>
</li>
</ul>
</div>
</div>
</div>
</fieldset>
</div>
</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>

<search>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
Find participants in Test batch 1
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">Use one or more fields</span>
<!-- replaces the hint text on error -->
<span class="nhsuk-caption-m nhsuk-caption--bottom nhsuk-error-message" id="empty-search-error">
<span class="nhsuk-u-visually-hidden">Error:</span> 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 nhsuk-form-group--error">
<label class="nhsuk-label" for="nhs-number"><b>NHS number</b></label>
<span class="nhsuk-error-message" id="nhs-number-error">
<span class="nhsuk-u-visually-hidden">Error:</span> NHS number formatting message or something long
</span>
<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 nhsuk-form-group--error">
<fieldset class="nhsuk-fieldset" role="group">
<legend class="nhsuk-fieldset__legend" style="margin-bottom:4px;">
Date of birth
</legend>
<span class="nhsuk-error-message" id="dob-error">
<span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must be in the past
</span>
<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>
</div>
<hr>
</search>
Loading