Skip to content

Design tweaks #3285

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
merged 4 commits into from
Apr 8, 2025
Merged

Design tweaks #3285

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
40392d5
Fix wrapping of date of birth inputs in filter
paulrobertlloyd Mar 27, 2025
02acbf6
Tweak icon button size and padding
paulrobertlloyd Mar 27, 2025
597486a
Change markup for filter to ensure bottom margin renders correctly
paulrobertlloyd Mar 27, 2025
c69adac
Use programme tag in patient session table
paulrobertlloyd Mar 27, 2025
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
30 changes: 25 additions & 5 deletions app/assets/stylesheets/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,39 @@ $button-shadow-size: 4px;

.app-button--small {
@include nhsuk-typography-responsive(16);
padding: nhsuk-spacing(1) 12px;
$padding-block: 6px;
$padding-block-icon: 3px;
$padding-inline: 12px;
$padding-inline-icon: 6px;

padding: $padding-block $padding-inline;

&.app-button--secondary,
&.app-button--secondary-warning {
// Adjust padding to account for removal of 2px bottom border
padding-bottom: #{nhsuk-spacing(1) + 1px};
padding-top: #{nhsuk-spacing(1) + 1px};
padding: #{$padding-block + 1px} $padding-inline;

&.app-button--icon {
padding: #{$padding-block-icon + 1px} $padding-inline-icon;
}

&:active {
margin-bottom: -1px;
// Revert padding to account for reintroduction of 2px bottom border
padding-bottom: nhsuk-spacing(1);
padding-top: nhsuk-spacing(1);
padding: $padding-block $padding-inline;
}

&.app-button--icon:active {
// Revert padding to account for reintroduction of 2px bottom border
padding: $padding-block-icon $padding-inline-icon;
}
}
}

.app-button--icon {
.nhsuk-icon {
display: block;
height: 28px;
width: 28px;
}
}
4 changes: 4 additions & 0 deletions app/assets/stylesheets/_filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,10 @@
margin-right: nhsuk-spacing(3);
}

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

// Adjust sizing of checkbox and radio items
& .nhsuk-checkboxes__item,
& .nhsuk-radios__item {
Expand Down
2 changes: 1 addition & 1 deletion app/components/app_patient_session_table_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ class AppPatientSessionTableComponent < ViewComponent::Base

<% row.with_cell do %>
<span class="nhsuk-table-responsive__heading">Programme</span>
<%= programme.name %>
<%= render AppProgrammeTagsComponent.new([programme]) %>
<% end %>

<% row.with_cell do %>
Expand Down
6 changes: 3 additions & 3 deletions app/components/app_search_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

class AppSearchComponent < ViewComponent::Base
erb_template <<-ERB
<%= render AppCardComponent.new(filters: true) do |card| %>
<% card.with_heading { "Find children" } %>
<%= form_with model: form, url:, method: :get, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
<%= render AppCardComponent.new(filters: true) do |card| %>
<% card.with_heading { "Find children" } %>

<%= form_with model: form, url:, method: :get, builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
<div class="app-search-input" role="search">
<%= f.govuk_text_field :q,
label: { text: "Search", class: "nhsuk-u-visually-hidden" },
Expand Down
Loading