Skip to content
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

[DO NOT MERGE] Updates to template #3985

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[DO NOT MERGE] Updates to template #3985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55ecbb1
Remove browse page blue border style
jon-kirwan Feb 6, 2025
af40aef
Update browse header style
jon-kirwan Feb 14, 2025
a3712e9
Action action link style to use`light_icon`
jon-kirwan Feb 14, 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
32 changes: 2 additions & 30 deletions app/assets/stylesheets/views/_browse.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
@import "govuk_publishing_components/individual_component_support";

// This dark grey is the background colour for the browse pages.
//
// White text on this background gives a contrast ratio of 13.35 - this meets AA
// and AAA for body and large text.
//
// The focus state's yellow gives a contrast ratio of 9.91 - this meets the AA
// requirement for active user interface components (AAA requirement is not
// defined for this).
//
// Requirements source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
$browse-header-background-colour: #263135;
$refresh-very-light-blue: #f4f8fb;

// This isn't proper BEM - but the convention is to have the view name as the
// block part of the class name. Because we need to keep `browse` so this can
// be run as an A/B test, we need to use a different class name for each view.
.browse__breadcrumb-wrapper,
.browse__header-wrapper {
background-color: $browse-header-background-colour;
background-color: $refresh-very-light-blue;
}

.browse__breadcrumb-wrapper {
Expand All @@ -26,28 +16,10 @@ $browse-header-background-colour: #263135;
overflow: auto;
}

.browse__breadcrumb-border {
background: govuk-colour("blue");
height: 10px;
}

.global-bar-present {
.browse__breadcrumb-border {
height: 0;
}
}

// The header spacings are a work in progress.
.browse__header-wrapper {
padding-bottom: govuk-spacing(7);

// A tiny white seam sometimes appears, despite there being no gap between
// this element and the previous element. This shifts the element up by a
// pixel to prevent the seam from appearing and adds padding to reposition the
// content.
border-top: 1px solid $browse-header-background-colour;
margin-top: -1px;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good spot, agree that it looks safe to remove this now, I tested in several browsers, including Chrome, Firefox, Safari and Safari on iOS, and could not see any issues.

@include govuk-media-query($from: "tablet") {
padding-bottom: govuk-spacing(8);
padding-top: govuk-spacing(6);
Expand Down
2 changes: 0 additions & 2 deletions app/views/browse/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,12 @@
<%= render "shared/browse_header", { margin_bottom: 9 } do %>
<%= render "govuk_publishing_components/components/heading", {
text: t("browse.title"),
inverse: true,
font_size: "xl",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, we would also want to apply the same change to the second level browse page template, for example - https://collections-pr-3985.herokuapp.com/browse/driving/clean-air-zones-emissions-electric-vehicles

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh great, thanks! I've updated the show_a_to_z.html and show_curated.html views and merged into the 'Update browse header style' commit.

margin_bottom: 6,
} %>
<%= render "govuk_publishing_components/components/lead_paragraph", {
text: t("browse.description"),
margin_bottom: 2,
inverse: true
} %>
<% end %>

Expand Down
2 changes: 0 additions & 2 deletions app/views/browse/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,12 @@
<%= render "shared/browse_header", { margin_bottom: page.slug == "benefits" ? 7 : 9 } do %>
<%= render "govuk_publishing_components/components/heading", {
text: page.title,
inverse: true,
font_size: "xl",
margin_bottom: 6,
} %>
<%= render "govuk_publishing_components/components/lead_paragraph", {
text: page.description,
margin_bottom: 2,
inverse: true
} %>
<% end %>

Expand Down
2 changes: 0 additions & 2 deletions app/views/second_level_browse_page/show_a_to_z.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,12 @@
<%= render "govuk_publishing_components/components/heading", {
font_size: "xl",
heading_level: 1,
inverse: true,
margin_bottom: 6,
text: page.title,
} %>
<%= render "govuk_publishing_components/components/lead_paragraph", {
text: page.description,
margin_bottom: 2,
inverse: true
} %>
<% end %>

Expand Down
2 changes: 0 additions & 2 deletions app/views/second_level_browse_page/show_curated.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@
<%= render "govuk_publishing_components/components/heading", {
font_size: "xl",
heading_level: 1,
inverse: true,
margin_bottom: 6,
text: page.title,
} %>
<%= render "govuk_publishing_components/components/lead_paragraph", {
text: page.description,
margin_bottom: 2,
inverse: true
} %>
<% end %>

Expand Down
2 changes: 1 addition & 1 deletion app/views/shared/_browse_action_link.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%= render "govuk_publishing_components/components/action_link", {
dark_large_icon: true,
light_icon: true,
margin_bottom: 3,
**link,
} %>
5 changes: 1 addition & 4 deletions app/views/shared/_browse_breadcrumbs.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,9 @@

<div class="browse__breadcrumb-wrapper">
<div class="govuk-width-container">
<div class="browse__breadcrumb-border"></div>
<div class="govuk-grid-row">
<div class="<%= column_classes.join(' ') %>">
<%= render "application/breadcrumbs", {
inverse: true
} %>
<%= render "application/breadcrumbs" %>
</div>
</div>
</div>
Expand Down
Loading