Skip to content

Commit fd414dd

Browse files
msquance-stemmsquance-stem
authored
Merge pull request #2321 from NCCE/2971-move-homepage-to-strapi
Move homepage to strapi
2 parents d779cb0 + f803b4d commit fd414dd

File tree

84 files changed

+1162
-713
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+1162
-713
lines changed

‎app/components/cms/banner_with_cards_component.rb‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# frozen_string_literal: true
2+
3+
class Cms::BannerWithCardsComponent < ViewComponent::Base
4+
delegate :dark_background?, to: :helpers
5+
6+
def initialize(title:, text_content:, cards:, background_color:)
7+
@title = title
8+
@text_content = text_content
9+
@cards = cards
10+
@background_color = background_color
11+
end
12+
13+
def text_content_classes
14+
return "text-content--light" if dark_background?(@background_color)
15+
16+
"text-content"
17+
end
18+
end

‎app/components/cms/banner_with_cards_component/banner_with_cards_component.html.erb‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<%= render GovGridRowComponent.new(additional_classes: ["cms-banner-with-cards"], background_color: @background_color) do |row| %>
2+
<%= row.with_column("full") do %>
3+
<div class="tc-row">
4+
<div class="tc-row-half">
5+
<div class="cms-banner-with-cards__content">
6+
<h2 class="govuk-heading-l"><%= @title %></h2>
7+
<%= content_tag :div, class: text_content_classes do %>
8+
<%= render @text_content.render %>
9+
<% end %>
10+
</div>
11+
</div>
12+
<div class="tc-row-half cms-banner-with-cards__cards">
13+
<% @cards.each do |card| %>
14+
<%= render card.render %>
15+
<% end %>
16+
</div>
17+
</div>
18+
<% end %>
19+
<% end %>

‎app/components/cms/banner_with_cards_component/banner_with_cards_component.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.cms-banner-with-cards {
2+
3+
&__content {
4+
height: 100%;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
9+
@include govuk-media-query($from: desktop) {
10+
padding-right: 100px;
11+
}
12+
13+
.text-content {
14+
&--light {
15+
.govuk-body-m {
16+
color: $white;
17+
}
18+
}
19+
}
20+
}
21+
22+
&__cards {
23+
display: flex;
24+
flex-direction: column;
25+
gap: 10px;
26+
}
27+
28+
}

‎app/components/cms/card_wrapper_component.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ def cards_per_row
1616

1717
def title_html
1818
if @title_as_paragraph
19-
content_tag :p, @title, class: "govuk-body-m"
19+
content_tag :p, @title, class: "govuk-body-m cms-card-wrapper__title"
2020
else
21-
content_tag :h2, @title, class: "govuk-heading-m"
21+
content_tag :h2, @title, class: "govuk-heading-m cms-card-wrapper__title"
2222
end
2323
end
2424
end

‎app/components/featured_blog_posts_component.rb‎ renamed to ‎app/components/cms/featured_blog_posts_component.rb‎

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

3-
class FeaturedBlogPostsComponent < ViewComponent::Base
4-
def initialize(number_to_display:, show_main_feature: true)
3+
class Cms::FeaturedBlogPostsComponent < ViewComponent::Base
4+
def initialize(number_to_display:, show_main_feature: true, title: "News and Updates")
5+
@title = title
56
posts =
67
begin
78
response = Cms::Collections::Blog.all(1, number_to_display, params: {

‎app/components/featured_blog_posts_component/featured_blog_posts_component.html.erb‎ renamed to ‎app/components/cms/featured_blog_posts_component/featured_blog_posts_component.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="govuk-width-container">
22
<div class="ncce-feat">
3-
<h2 class="govuk-heading-l ncce-heading-l__centered">News and Updates</h2>
3+
<h2 class="govuk-heading-l ncce-heading-l__centered"><%= @title %></h2>
44
<% if @main_feature || @featured_posts.any? %>
55
<div class="ncce-feat__grid">
66
<% if @main_feature%>

‎app/components/featured_blog_posts_component/featured_blog_posts_component.scss‎ renamed to ‎app/components/cms/featured_blog_posts_component/featured_blog_posts_component.scss‎

File renamed without changes.

‎app/components/cms/homepage_hero_component.rb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
class Cms::HomepageHeroComponent < ViewComponent::Base
4+
def initialize(title:, house_content:, buttons:)
5+
@title = title
6+
@house_content = house_content
7+
@buttons = buttons
8+
end
9+
end

‎app/components/cms/homepage_hero_component/homepage_hero_component.html.erb‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div class="cms-ncce-home-hero-wrapper">
2+
<div class="ncce-home-hero">
3+
<div class="ncce-home-hero__column ncce-home-hero__column-home">
4+
<div class="ncce-home-hero__house">
5+
<div class="ncce-home-hero__top">
6+
</div>
7+
8+
<div class="ncce-home-hero__middle">
9+
<div class="ncce-home-hero__middle-left">
10+
</div>
11+
<div class="ncce-home-hero__middle-content">
12+
<div class="ncce-home-hero__middle-content_content">
13+
<h1><%= @title %></h1>
14+
<%= render @house_content.render %>
15+
<div class="ncce-home-hero__house__button-container">
16+
<% @buttons.each do |button| %>
17+
<%= render button.render %>
18+
<% end %>
19+
</div>
20+
</div>
21+
</div>
22+
<div class="ncce-home-hero__middle-right">
23+
</div>
24+
</div>
25+
26+
<div class="ncce-home-hero__bottom">
27+
<%= image_pack_tag 'media/images/hero/hero1-house-base.svg', class: "ncce-home-hero__house-base", alt: "", aria_hidden: true %>
28+
</div>
29+
</div>
30+
</div>
31+
32+
<div class="ncce-home-hero__column">
33+
<div class="ncce-home-hero__corner-person-left">
34+
<%= image_pack_tag 'media/images/hero/hero2-person-corner-left.svg', class: "ncce-home-hero__person-corner-left", alt: "", aria_hidden: true %>
35+
</div>
36+
37+
<div class="ncce-home-hero__person-content">
38+
<div class="ncce-home-hero__person">
39+
<%= image_pack_tag 'media/images/hero/hero2-person.png', class: "ncce-home-hero__person", alt: "", aria_hidden: true %>
40+
</div>
41+
<div class="ncce-home-hero__person-title">
42+
<%= image_pack_tag 'media/images/hero/hero2-title.svg', class: "ncce-home-hero__title", alt: t("pages.home.hero_2.alt.title") %>
43+
</div>
44+
</div>
45+
46+
<div class="ncce-home-hero__corner-person-right">
47+
</div>
48+
</div>
49+
</div>
50+
</div>

‎app/components/cms/homepage_hero_component/hompage_hero_component.scss‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
$hero-mobile-breakpoint: 950px;
2+
$hero-tiny-breakpoint: 430px;
3+
4+
.cms-ncce-home-hero-wrapper {
5+
max-width: calc(960px + 250px);
6+
margin-left: auto;
7+
margin-right: auto;
8+
9+
.ncce-home-hero {
10+
display: flex;
11+
flex-direction: column-reverse;
12+
13+
@media screen and (min-width: $hero-mobile-breakpoint) {
14+
display: grid;
15+
height: fit-content;
16+
grid-template-columns: 1fr 1fr;
17+
}
18+
19+
.ncce-home-hero__column {
20+
position: relative;
21+
width: 100%;
22+
height: 100%;
23+
aspect-ratio: 1/1;
24+
25+
@media screen and (max-width: $hero-tiny-breakpoint) {
26+
height: unset;
27+
}
28+
29+
&-home {
30+
background:url("../images/hero/hero1-house-background-corner.svg") top right no-repeat, url("../images/hero/hero1-house-background.svg") top left no-repeat;
31+
background-size: 13.5%, cover;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
36+
@media screen and (min-width: $hero-mobile-breakpoint) {
37+
grid-column: 1;
38+
}
39+
}
40+
41+
&:nth-child(2) {
42+
background-repeat: no-repeat;
43+
background-size: cover;
44+
background-image: url("../images/hero/hero2-person-background.png");
45+
width: 100%;
46+
overflow: hidden;
47+
48+
@media screen and (min-width: $hero-mobile-breakpoint) {
49+
grid-column: 2;
50+
}
51+
52+
@media screen and (max-width: $hero-mobile-breakpoint) {
53+
background-position: center top;
54+
aspect-ratio: 15/9;
55+
}
56+
}
57+
58+
.ncce-home-hero__corner-house-right {
59+
position: absolute;
60+
right: 0;
61+
top: 0;
62+
width: 13.5%;
63+
64+
.ncce-home-hero__house-corner {
65+
width: 100%;
66+
}
67+
}
68+
69+
.ncce-home-hero__corner-person-left {
70+
position: absolute;
71+
width: 13.5%;
72+
73+
.ncce-home-hero__person-corner-left {
74+
position: relative;
75+
width: 100%;
76+
color: #5AFF6A;
77+
z-index: 1;
78+
}
79+
}
80+
81+
.ncce-home-hero__person-content {
82+
.ncce-home-hero__person {
83+
position: absolute;
84+
width: 100%;
85+
height: 100%;
86+
87+
@media screen and (max-width: $hero-mobile-breakpoint) {
88+
height: auto;
89+
width: 95%;
90+
}
91+
}
92+
93+
.ncce-home-hero__person-title {
94+
position: absolute;
95+
width: 100%;
96+
height: 100%;
97+
98+
.ncce-home-hero__title {
99+
position: absolute;
100+
left: 68%;
101+
top: 34%;
102+
width: 30%;
103+
z-index: 1;
104+
transform: translate(-50%, -50%);
105+
106+
@media screen and (min-width: $hero-mobile-breakpoint) {
107+
left: 70%;
108+
top: 25%;
109+
}
110+
}
111+
}
112+
}
113+
114+
.ncce-home-hero__corner-person-right {
115+
position: absolute;
116+
right: 0;
117+
bottom: 0;
118+
width: 37%;
119+
120+
.ncce-home-hero__person-corner-right {
121+
position: absolute;
122+
width: 100%;
123+
color: #5AFF6A;
124+
bottom: 0;
125+
}
126+
127+
@media screen and (max-width: $hero-mobile-breakpoint) {
128+
display: none;
129+
}
130+
}
131+
132+
.ncce-home-hero__house {
133+
display: flex;
134+
flex-direction: column;
135+
136+
padding-left: 5%;
137+
padding-right: 5%;
138+
margin-top: 3%;
139+
margin-bottom: 5%;
140+
141+
align-items: center;
142+
143+
h1 {
144+
@extend .govuk-heading-xl;
145+
}
146+
p {
147+
@extend .govuk-body-m;
148+
color: $grey-storm;
149+
}
150+
ul {
151+
@extend .govuk-list;
152+
@extend .govuk-list--bullet;
153+
color: $grey-storm;
154+
margin-left: 10px;
155+
li { margin-bottom: 0; }
156+
}
157+
.ncce-home-hero__house__button-container {
158+
justify-self: flex-end;
159+
display: flex;
160+
gap: 1rem;
161+
162+
@include govuk-media-query($until: tablet) {
163+
align-self: center;
164+
}
165+
166+
a {
167+
padding: 0.5rem 1rem;
168+
169+
@media screen and (max-width: $hero-mobile-breakpoint) {
170+
&:nth-child(2) { display: none; }
171+
}
172+
}
173+
}
174+
175+
.ncce-home-hero__top {
176+
width: 100%;
177+
aspect-ratio: 25/6;
178+
background-image: url("../images/hero/hero1-house-roof.svg"); // #svgView(preserveAspectRatio(none))");
179+
background-size: 100% 100%;
180+
}
181+
182+
.ncce-home-hero__middle {
183+
width: 100%;
184+
display: flex;
185+
flex-wrap: nowrap;
186+
justify-content: space-between;
187+
188+
.ncce-home-hero__middle-left {
189+
flex: 0 0 1.8%;
190+
background-color: #5AFF6A;
191+
}
192+
193+
.ncce-home-hero__middle-content {
194+
display: flex;
195+
flex-direction: column;
196+
align-items: center;
197+
198+
.ncce-home-hero__middle-content_content {
199+
padding: 5%;
200+
201+
h1 {
202+
text-align: center;
203+
}
204+
205+
@media screen and (min-width: $hero-mobile-breakpoint) {
206+
h1 {
207+
text-align: left;
208+
}
209+
}
210+
}
211+
}
212+
213+
.ncce-home-hero__middle-right {
214+
flex: 0 0 1.8%;
215+
background-color: #5AFF6A;
216+
}
217+
}
218+
219+
.ncce-home-hero__bottom {
220+
display: block;
221+
width: 100%;
222+
223+
.ncce-home-hero__house-base {
224+
display: block;
225+
width: 100%;
226+
}
227+
}
228+
}
229+
}
230+
}
231+
}

0 commit comments

Comments
 (0)