Skip to content

Commit 9d3bc5d

Browse files
murugaplmurugapl
authored
Merge pull request #6588 from NHSDigital/update-patient-session-banner
Improve patient session page banner
2 parents ec1d7b7 + 7927660 commit 9d3bc5d

12 files changed

Lines changed: 95 additions & 53 deletions

‎app/assets/stylesheets/components/_session-banner.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "../vendor/nhsuk-frontend" as *;
23

34
.app-session-banner {
@@ -46,4 +47,43 @@
4647
margin-left: #{$nhsuk-gutter-half * -1};
4748
}
4849
}
50+
51+
&[data-app-sticky-init] {
52+
position: sticky;
53+
z-index: 999;
54+
top: 0;
55+
right: 0;
56+
left: 0;
57+
58+
width: 100vw;
59+
margin-right: -50vw;
60+
margin-left: -50vw;
61+
}
62+
63+
&[data-stuck="true"] {
64+
border-bottom-color: nhsuk-colour("grey-3");
65+
box-shadow: 0 $nhsuk-border-width 0
66+
color.scale(nhsuk-colour("grey-3"), $alpha: -50%);
67+
68+
.app-main-wrapper--xs {
69+
padding-top: nhsuk-spacing(2);
70+
padding-bottom: 0;
71+
}
72+
73+
.nhsuk-breadcrumb {
74+
@include nhsuk-visually-hidden;
75+
}
76+
77+
.nhsuk-heading-l {
78+
@include nhsuk-font-size(22);
79+
}
80+
81+
.app-secondary-navigation {
82+
box-shadow: none;
83+
}
84+
85+
.app-secondary-navigation__list {
86+
@include nhsuk-font-size(16);
87+
}
88+
}
4989
}

‎app/assets/stylesheets/core/objects/_grid.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
&[data-app-sticky-init] {
2323
@include nhsuk-media-query($from: large-desktop) {
24-
top: #{nhsuk-spacing(9) + nhsuk-spacing(3)};
24+
top: #{nhsuk-spacing(9) + nhsuk-spacing(5)};
2525
}
2626
}
2727
}

‎app/assets/stylesheets/core/objects/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@forward "grid";
2+
@forward "main-wrapper";

‎app/assets/stylesheets/core/objects/_main-wrapper.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use "../../vendor/nhsuk-frontend" as *;
2+
3+
.app-main-wrapper--xs {
4+
padding-top: nhsuk-spacing(3);
5+
padding-bottom: nhsuk-spacing(3);
6+
}

‎app/components/app_breadcrumb_component.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb"
1+
<nav class="nhsuk-breadcrumb<%= " nhsuk-breadcrumb--reverse" if @reverse %>" aria-label="Breadcrumb"
22
<%= @attributes.map { |name, value| "#{name}=\"#{value}\"" }.join(" ") %>>
33
<ol class="nhsuk-breadcrumb__list">
44
<% @items.each do |item| %>

‎app/components/app_breadcrumb_component.rb‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# frozen_string_literal: true
22

33
class AppBreadcrumbComponent < ViewComponent::Base
4-
def initialize(items:, attributes: {})
4+
def initialize(items:, reverse: false, attributes: {})
55
@items = items
6+
@reverse = reverse
67
@attributes = attributes
78
end
89

‎app/components/app_patient_summary_component.rb‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22

33
class AppPatientSummaryComponent < ViewComponent::Base
44
erb_template <<-ERB
5-
<h3 class="nhsuk-heading-s nhsuk-u-margin-top-1">
6-
<%= patient.full_name %>
7-
</h3>
8-
95
<%= govuk_summary_list(rows:, classes:) %>
10-
6+
117
<p>
128
<%= link_to "View full child record", patient_path(patient) %>
139
</p>
@@ -35,11 +31,7 @@ def rows
3531
end
3632

3733
def classes
38-
%w[
39-
nhsuk-summary-list--no-border
40-
app-summary-list--full-width
41-
nhsuk-u-margin-bottom-2
42-
]
34+
%w[app-summary-list--full-width nhsuk-u-margin-bottom-2]
4335
end
4436

4537
def nhs_number_row
@@ -68,7 +60,14 @@ def date_of_birth_row
6860
},
6961
value: {
7062
text: patient.date_of_birth.to_fs(:long)
71-
}
63+
},
64+
**(
65+
if patient.restricted?
66+
{ classes: %w[nhsuk-summary-list__row--no-border] }
67+
else
68+
{}
69+
end
70+
)
7271
}
7372
end
7473

@@ -79,7 +78,8 @@ def address_row
7978
},
8079
value: {
8180
text: format_address_multi_line(patient)
82-
}
81+
},
82+
classes: %w[nhsuk-summary-list__row--no-border]
8383
}
8484
end
8585
end

‎app/views/patient_sessions/_header.html.erb‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
<% content_for :page_title, @patient.initials %>
22

3-
<% content_for :navigation do %>
4-
<%= render AppBreadcrumbComponent.new(items: [
5-
{ text: "Home", href: dashboard_path },
6-
{ text: t("sessions.index.title"), href: sessions_path },
7-
{ text: @session.location.name, href: session_path(@session) },
8-
@breadcrumb_item,
9-
].compact) %>
10-
<% end %>
11-
123
<% if (outstanding_programmes = patient_outstanding_programmes(@patient, session: @session)).any? %>
134
<% programmes_can_record_vaccination = outstanding_programmes.filter do |programme|
145
policy(VaccinationRecord.new(patient: @patient, session: @session, programme:)).new?
@@ -19,29 +10,34 @@
1910
<% end %>
2011
<% end %>
2112

22-
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-2">
23-
<%= @patient.full_name %>
24-
</h1>
13+
<% content_for :main_content do %>
14+
<div class="app-session-banner" data-module="app-sticky">
15+
<div class="nhsuk-width-container">
16+
<%= render AppBreadcrumbComponent.new(items: [
17+
{ text: session_title(@session), href: session_path(@session) },
18+
@breadcrumb_item,
19+
].compact, reverse: true) %>
2520

26-
<p class="nhsuk-caption-l nhsuk-u-margin-bottom-4">
27-
<%= patient_year_group(@patient, academic_year: @academic_year) %>
28-
</p>
21+
<div class="nhsuk-main-wrapper app-main-wrapper--xs">
22+
<%= h1 @patient.full_name %>
23+
</div>
2924

30-
<%= render AppStickyNavigationComponent.new do %>
31-
<%= render AppSecondaryNavigationComponent.new do |nav|
32-
@session.programmes_for(patient: @patient).each do |programme|
33-
nav.with_item(
34-
href: session_patient_programme_path(@session, @patient, programme, return_to: params[:return_to]),
35-
text: programme.name,
36-
selected: @programme == programme,
37-
ticked: @patient.programme_status(programme, academic_year: @academic_year).vaccinated?,
38-
)
39-
end
40-
41-
nav.with_item(
42-
href: session_patient_activity_path(@session, @patient, return_to: params[:return_to]),
43-
text: "Session activity and notes",
44-
selected: request.path.ends_with?("/activity"),
45-
)
46-
end %>
25+
<%= render AppSecondaryNavigationComponent.new(reverse: true) do |nav|
26+
@session.programmes_for(patient: @patient).each do |programme|
27+
nav.with_item(
28+
href: session_patient_programme_path(@session, @patient, programme, return_to: params[:return_to]),
29+
text: programme.name,
30+
selected: @programme == programme,
31+
ticked: @patient.programme_status(programme, academic_year: @academic_year).vaccinated?,
32+
)
33+
end
34+
35+
nav.with_item(
36+
href: session_patient_activity_path(@session, @patient, return_to: params[:return_to]),
37+
text: "Session activity and notes",
38+
selected: request.path.ends_with?("/activity"),
39+
)
40+
end %>
41+
</div>
42+
</div>
4743
<% end %>

‎spec/components/app_patient_summary_component_spec.rb‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@
1717

1818
let(:href) { "/patients/#{patient.id}" }
1919

20-
it { should have_content("SELDON, Hari") }
21-
2220
it { should have_content("NHS number") }
2321

2422
context "when patient has an NHS number" do

‎spec/features/e2e_journey_spec.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ def then_i_should_see_that_the_patient_is_ready_for_vaccination
248248
end
249249

250250
def when_i_click_on_the_register_attendance_section
251-
click_link "Pilot School"
251+
within(".nhsuk-breadcrumb__list") { click_link @school.name }
252252
within(".app-secondary-navigation") { click_link "Children" }
253253
end
254254

@@ -285,7 +285,7 @@ def and_i_record_the_successful_vaccination
285285
end
286286

287287
def then_i_see_that_the_child_is_vaccinated
288-
click_on "Pilot School"
288+
within(".nhsuk-breadcrumb__list") { click_link @school.name }
289289
within(".app-secondary-navigation") { click_on "Children" }
290290
expect(page).not_to have_content("Not eligible")
291291
choose "Vaccinated", match: :first

0 commit comments

Comments
 (0)