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

Change layout of homepage #3743

Merged
merged 6 commits into from
Sep 25, 2023
Merged

Change layout of homepage #3743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a95c4dc
Change layout of homepage
patrickpatrickpatrick Sep 1, 2023
9ea065d
Remove top border from image-card
MartinJJones Sep 21, 2023
42ccdc7
Copy CSS grid from gem cards to popular links
MartinJJones Sep 21, 2023
17d2335
Fix spacing issue on popular links
MartinJJones Sep 22, 2023
5d8bdbd
Improve layout of featured cards on small screens
MartinJJones Sep 22, 2023
4363b40
Ensure the featured heading is styled correctly on mobile
MartinJJones Sep 22, 2023
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
113 changes: 81 additions & 32 deletions app/assets/stylesheets/views/_homepage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,28 +145,9 @@
}

.homepage-services-and-info__list {
@include columns($items: 16, $columns: 1, $selector: "li");
list-style: none;
margin: 0 govuk-spacing(-3);
padding: 0;

@include govuk-media-query($from: "tablet") {
@include columns($items: 16, $columns: 2, $selector: "li");
}

@include govuk-media-query($from: "desktop") {
@include columns($items: 16, $columns: 3, $selector: "li");
}

.homepage-section__government-activity & {
@include columns($items: 6, $columns: 1, $selector: "li");
margin-bottom: govuk-spacing(4);

@include govuk-media-query($from: "tablet") {
@include columns($items: 6, $columns: 2, $selector: "li");
margin-bottom: 0;
}
}
}

.chevron-card {
Expand All @@ -181,7 +162,7 @@
}

.chevron-card__description {
margin: 0 govuk-spacing(-6) 0 0;
margin: 0 govuk-spacing(6) 0 0;
}

.chevron-card__link {
Expand All @@ -206,7 +187,7 @@
height: $dimension;
position: absolute;
right: govuk-spacing(1);
top: govuk-spacing(3);
top: 50%;
@include prefixed-transform($rotate: 45deg);
width: $dimension;
}
Expand All @@ -228,13 +209,60 @@
padding: govuk-spacing(4) 0 govuk-spacing(6);
}

.homepage-section--promotion-slots {
padding-top: govuk-spacing(6);

@include govuk-media-query($until: "desktop") {
.gem-c-heading {
border-top-style: solid;
border-top-width: 2px;
border-top-color: $govuk-text-colour;
margin: 0 0 govuk-spacing(6);
padding: govuk-spacing(3) 0 0;
}
}

// temp style overrides, will need to update the image-card component in the gem
// so these can be removed
.gem-c-image-card {
@include govuk-media-query($until: "mobile") {
padding: 0 govuk-spacing(3);
}
}

// temp style override to ensure image has spacing between the text
.gem-c-image-card__image-wrapper {
@include govuk-media-query($until: "mobile") {
margin-bottom: govuk-spacing(2);
}
}

// temp override to remove the top border
.gem-c-image-card__image {
border-top: none;
}

// temp override to reduce white space on mobile between image and text
.gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
padding-left: 0;
}
}

.homepage-section--links-and-search {
background: govuk-colour("light-grey");
padding: govuk-spacing(6) 0 govuk-spacing(8);

@include govuk-media-query($from: "desktop") {
padding-bottom: govuk-spacing(6);
}
}

.homepage-section--services-and-info {
padding: govuk-spacing(6) 0 0;

@include govuk-media-query($from: "desktop") {
padding-right: govuk-spacing(4);
}
}

.homepage-section__heading {
Expand Down Expand Up @@ -270,26 +298,47 @@

.homepage-most-viewed-list {
list-style: none;
margin: 0;
padding: 0;
// Remove the outermost left and right margin from the internal margin of the list items.
margin: 0 govuk-spacing(-3);

@include govuk-media-query($from: "tablet") {
padding-bottom: 0;
}
display: grid;
grid-auto-flow: row; // Use CSS grid to calculate the number of rows
grid-template-columns: fractions(1);

@include govuk-media-query($from: "desktop") {
// Note that browsers that don't support CSS grid display the component as one column on all
// breakpoints
grid-template-columns: fractions(3);

& > li {
margin-bottom: govuk-spacing(4);
// For browsers that don't support CSS grid, constrain the width to 50% to improve usability
// especially for screen magnifier users
width: 50%;

@include govuk-media-query($from: "desktop") {
margin-bottom: govuk-spacing(3);
// Reset the width for browsers that support CSS grid
@supports (display: grid) {
width: initial;
}
}
}

& > li:last-child {
margin-bottom: 0;
.homepage-most-viewed-list__item {
// We use grid to split the container into column widths, so manage the horizontal spacing with
// internal margins.
margin: 0 govuk-spacing(3);
padding: 0 govuk-spacing(4) govuk-spacing(4) 0;

&:last-of-type {
padding-bottom: 0;
}
}

.homepage-most-viewed-list__item {
.homepage-most-viewed-list__item-link {
@include govuk-font($size: 19, $weight: "bold");
}

.homepage-section__government-activity {
@include govuk-media-query($from: "desktop") {
padding-right: govuk-spacing(4);
}
}
10 changes: 10 additions & 0 deletions app/views/homepage/_body.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
<%= render "homepage/services_and_information" %>
</div>
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<%= render "homepage/promotion-slots" %>
</div>
</div>
<%= render "homepage/government_activity" %>
<%= render "homepage/more_on_govuk" %>
16 changes: 9 additions & 7 deletions app/views/homepage/_government_activity.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section class="homepage-section homepage-section__government-activity">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
<section class="homepage-section homepage-section__government-activity">
<div class="homepage-section__heading">
<div class="homepage-section__heading-wrapper">
<%= render "govuk_publishing_components/components/heading", {
Expand Down Expand Up @@ -35,9 +35,11 @@
} %>
<% end %>
</ul>
</div>
</section>
</div>

<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
<section class="homepage-section homepage-section__departments-organisations">
<div class="homepage-section__heading">
<%= render "govuk_publishing_components/components/heading", {
font_size: "m",
Expand Down Expand Up @@ -105,6 +107,6 @@
},
} %>
</div>
</div>
</section>
</div>
</section>
</div>
2 changes: 2 additions & 0 deletions app/views/homepage/_head.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<%= render "homepage/inverse_header" %>
<%= render "homepage/links_and_search" %>
8 changes: 4 additions & 4 deletions app/views/homepage/_links_and_search.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</div>
</div>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half homepage-popular">
<div class="govuk-grid-column-full homepage-popular">
<%= render "govuk_publishing_components/components/heading", {
font_size: "m",
margin_bottom: 4,
Expand All @@ -43,9 +43,9 @@
} %>
<ul class="homepage-most-viewed-list" data-module="gem-track-click ga4-link-tracker">
<% t("homepage.index.popular_links").each_with_index do | item, index | %>
<li>
<li class="homepage-most-viewed-list__item">
<%= link_to(item[:text], item[:href], {
class: "govuk-link homepage-most-viewed-list__item",
class: "govuk-link homepage-most-viewed-list__item-link",
data: {
track_category: "homepageClicked",
track_action: "popularLink",
Expand All @@ -72,4 +72,4 @@
</div>
</div>
</div>
</section>
</section>
12 changes: 4 additions & 8 deletions app/views/homepage/_promotion-slots.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,17 @@
See: https://docs.publishing.service.gov.uk/repos/frontend/update-homepage-promotion-slots.html
%>

<section class="homepage-section">
<div class="homepage-section__heading">
<section class="homepage-section homepage-section--promotion-slots">
<%= render "govuk_publishing_components/components/heading", {
text: t("homepage.index.featured"),
font_size: "m",
margin_bottom: 6,
data_attributes: {
ga4_scroll_marker: true,
},
} %>
</div>

<div class="govuk-grid-row">
<% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
<div class="govuk-grid-column-one-third">
<%= render "govuk_publishing_components/components/image_card", {
href: item[:href],
href_data_attributes: {
Expand All @@ -43,12 +40,11 @@
image_loading: "lazy",
heading_level: 3,
heading_text: item[:title],
two_thirds: true,
description: item[:text],
font_size: "m",
font_size: "s",
sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px",
srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence
} %>
</div>
<% end %>
</div>
</section>
9 changes: 3 additions & 6 deletions app/views/homepage/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,10 @@
<%#
The GA4 tracking on the homepage depends on some hardcoded values for index. If a section is added or removed, these values will need to be updated. Specifically 'index_section_count' (the total number of sections) and potentially 'index_section' (the index of the section e.g. 2 for the 2nd second).
%>
<%= render "homepage/inverse_header" %>
<%= render "homepage/links_and_search" %>

<%= render "homepage/head" %>

<div class="govuk-width-container">
<%= render "homepage/services_and_information" %>
<%= render "homepage/promotion-slots" %>
<%= render "homepage/government_activity" %>
<%= render "homepage/more_on_govuk" %>
<%= render "homepage/body" %>
</div>
</main>