Skip to content

Commit 5567264

Browse files
jsharkey13jsharkey13
authored
Merge pull request #1209 from isaacphysics/improvement/cs-homepage-updates
Ada landing page improvements
2 parents f25f35d + a6930f6 commit 5567264

File tree

9 files changed

+68
-53
lines changed

9 files changed

+68
-53
lines changed

‎public/assets/cs/decor/astro-pi.png

-27.8 KB
Loading

‎public/assets/cs/decor/code-editor.png

-19 KB
Loading

‎src/app/components/elements/cards/IconCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const IconCard = ({card, ...props}: IconCardProps) => {
3535
<CardBody className="pt-2 pb-1 px-4">
3636
<p className="mb-0">{bodyText}</p>
3737
</CardBody>
38-
{clickUrl && buttonStyle !== "card" && <CardFooter className={"border-top-0 p-4"}>
38+
{clickUrl && buttonStyle !== "card" && <CardFooter className={"border-top-0 p-4 pt-3"}>
3939
<Button className={classNames("text-start", {"d-flex align-items-center" : buttonStyle === "link"}, {"external-link": !isAppLink(clickUrl)})} disabled={disabled} outline={buttonStyle === "outline"} color={buttonStyle === "link" ? "link" : "secondary"} tag={Link} to={clickUrl}>
4040
{buttonText || "See more"}
4141
</Button>

‎src/app/components/elements/layout/ColumnSlice.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@ import { Row, RowProps } from "reactstrap";
44

55
interface ColumnSliceProps extends RowProps {
66
breakpoint?: "sm" | "md" | "lg" | "xl";
7+
reverseUnderBreakpoint?: boolean;
78
}
89

9-
export const ColumnSlice = ({...props}: ColumnSliceProps) => {
10-
const numChildren = Math.min(React.Children.count(props.children), 4);
11-
return <Row {...props} className={classNames(`row-cols-1 row-cols-${props.breakpoint ?? "lg"}-${numChildren}`, props.className)}>
12-
{props.children}
10+
export const ColumnSlice = ({breakpoint, reverseUnderBreakpoint, children, ...rest}: ColumnSliceProps) => {
11+
const numChildren = Math.min(React.Children.count(children), 4);
12+
return <Row {...rest} className={classNames(
13+
`row-cols-1 row-cols-${breakpoint ?? "lg"}-${numChildren}`,
14+
{[`flex-column-reverse flex-${breakpoint ?? "lg"}-row`]: reverseUnderBreakpoint},
15+
rest.className)
16+
}>
17+
{children}
1318
</Row>;
1419
};

‎src/app/components/pages/StudentResources.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const StudentResources = () => {
1616

1717
return <div id="student-resources">
1818
<section id="resources-header" className="bg-cyan-200">
19-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
19+
<Container className="homepage-padding mw-1600" fluid>
2020
<ColumnSlice>
2121
<TextBlock>
2222
<h1 className="font-size-1-75 font-size-md-2-5">
@@ -32,7 +32,7 @@ export const StudentResources = () => {
3232
</Container>
3333
</section>
3434
<section id="updates">
35-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
35+
<Container className="homepage-padding mw-1600 position-relative" fluid>
3636
<img className="full-background-img" src="/assets/cs/decor/swirls.svg" alt=""/>
3737
<ColumnSlice>
3838
<TextBlock className="pe-5">
@@ -51,9 +51,9 @@ export const StudentResources = () => {
5151
</ColumnSlice>
5252
</Container>
5353
</section>
54-
<section id="curriculum">
55-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
56-
<ColumnSlice>
54+
<section id="curriculum" className="bg-white">
55+
<Container className="homepage-padding mw-1600" fluid>
56+
<ColumnSlice reverseUnderBreakpoint>
5757
<ImageBlock>
5858
<img className="px-md-2 px-xl-4" src="/assets/cs/decor/questions.svg" alt=""/>
5959
</ImageBlock>
@@ -67,7 +67,7 @@ export const StudentResources = () => {
6767
</Container>
6868
</section>
6969
<section id="practice-questions">
70-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
70+
<Container className="homepage-padding mw-1600" fluid>
7171
<ColumnSlice>
7272
<TextBlock>
7373
<h2>Over 1000 practice questions</h2>
@@ -80,9 +80,9 @@ export const StudentResources = () => {
8080
</ColumnSlice>
8181
</Container>
8282
</section>
83-
<section id="progress">
84-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
85-
<ColumnSlice>
83+
<section id="progress" className="bg-white">
84+
<Container className="homepage-padding mw-1600" fluid>
85+
<ColumnSlice reverseUnderBreakpoint>
8686
<ImageBlock>
8787
<img className="px-md-2 px-xl-4" src="/assets/cs/decor/progress.svg" alt=""/>
8888
</ImageBlock>
@@ -99,9 +99,9 @@ export const StudentResources = () => {
9999
</ColumnSlice>
100100
</Container>
101101
</section>
102-
<section id="student-challenges">
103-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
104-
<img className="full-background-img bg-cyan-200" src="/assets/cs/decor/slice-bg-1.svg" alt=""/>
102+
<section id="student-challenges" className="bg-cyan-200">
103+
<Container className="homepage-padding mw-1600 position-relative" fluid>
104+
<img className="full-background-img" src="/assets/cs/decor/slice-bg-1.svg" alt=""/>
105105
<ColumnSlice>
106106
<TextBlock>
107107
<h2>Win prizes with our student challenges</h2>
@@ -121,8 +121,8 @@ export const StudentResources = () => {
121121
</ColumnSlice>
122122
</Container>
123123
</section>
124-
<section id="further-learning">
125-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
124+
<section id="further-learning" className="bg-white">
125+
<Container className="homepage-padding mw-1600" fluid>
126126
<TextBlock>
127127
<h2>Further learning</h2>
128128
<p>More projects, challenges, and tools from the Raspberry Pi Foundation’s world class range of computer science resources.</p>
@@ -155,8 +155,8 @@ export const StudentResources = () => {
155155
</ColumnSlice>
156156
</Container>
157157
</section>
158-
<section id="testimonial">
159-
<Container className="py-5 homepage-x-padding mw-1600 bg-black" fluid>
158+
<section id="testimonial" className="bg-black">
159+
<Container className="homepage-padding mw-1600" fluid>
160160
<TextBlock md={{size: 10, offset: 1}} lg={{size: 8, offset: 2}} className="backslash-left text-white">
161161
<h2>
162162
&ldquo;I love Ada! The content featured is very comprehensive and detailed, and the visual guides through topics like sorts are particularly helpful to aid my understanding.&rdquo;
@@ -166,7 +166,7 @@ export const StudentResources = () => {
166166
</Container>
167167
</section>
168168
<section id="careers">
169-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
169+
<Container className="homepage-padding mw-1600" fluid>
170170
<TextBlock>
171171
<h2>Explore a career in computer science</h2>
172172
<p>Read stories from graduates at the early stages of their careers in software development, game design, research, and much more.</p>
@@ -184,7 +184,7 @@ export const StudentResources = () => {
184184
image: {src: "/assets/cs/decor/stories/meghna-asthana.png"},
185185
bodyText: "Discover how Meghna turned her passion for coding into a career in computer vision, where she now works on innovative projects addressing environmental challenges.",
186186
buttonText: "Read more",
187-
clickUrl: "/pages/20240313_meghan_asthana"
187+
clickUrl: "/pages/20240313_meghna_asthana"
188188
}}/>
189189
<AdaCard card={{
190190
title: "Lella Halloum",
@@ -202,8 +202,8 @@ export const StudentResources = () => {
202202
</div>
203203
</Container>
204204
</section>
205-
<section id="help-and-support">
206-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
205+
<section id="help-and-support" className="bg-white">
206+
<Container className="homepage-padding mw-1600" fluid>
207207
<div className="py-4 position-relative">
208208
<img className="full-background-img border-radius-3 bg-cyan-200" src="/assets/cs/decor/help-slice-cyan.svg" alt=""/>
209209
<TextBlock className="py-3 text-center">

‎src/app/components/pages/TeacherResources.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
88
import { AdaCard } from "../elements/cards/AdaCard";
99
import { isLoggedIn } from "../../services";
1010
import { ImageBlock } from "../elements/layout/ImageBlock";
11+
import classNames from "classnames";
1112

1213
export const TeacherResources = () => {
1314
const {data: teacherPods} = useGetNewsPodListQuery({subject: "news"});
@@ -17,7 +18,7 @@ export const TeacherResources = () => {
1718

1819
return <div id="teacher-resources">
1920
<section id="resources-header" className="bg-dark-pink-200">
20-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
21+
<Container className="homepage-padding mw-1600" fluid>
2122
<ColumnSlice>
2223
<TextBlock className="text-white">
2324
<h1 className="font-size-1-75 font-size-md-2-5">
@@ -33,7 +34,7 @@ export const TeacherResources = () => {
3334
</Container>
3435
</section>
3536
<section id="latest-updates">
36-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
37+
<Container className="homepage-padding mw-1600 position-relative" fluid>
3738
<img className="full-background-img" src="/assets/cs/decor/swirls.svg" alt=""/>
3839
<ColumnSlice>
3940
<TextBlock className="pe-5">
@@ -51,9 +52,10 @@ export const TeacherResources = () => {
5152
}}/> : <div/>}
5253
</ColumnSlice>
5354
</Container>
54-
55-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
56-
<ColumnSlice>
55+
</section>
56+
<section id="curriculum" className="bg-white">
57+
<Container className="homepage-padding mw-1600" fluid>
58+
<ColumnSlice reverseUnderBreakpoint>
5759
<ImageBlock>
5860
<img className="px-md-2 px-xl-4" src="/assets/cs/decor/questions.svg" alt=""/>
5961
</ImageBlock>
@@ -67,15 +69,15 @@ export const TeacherResources = () => {
6769
</Container>
6870
</section>
6971
<section id="tools">
70-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
72+
<Container className="homepage-padding mw-1600 position-relative" fluid>
7173
<img className="full-background-img" src="/assets/cs/decor/swirls.svg" alt=""/>
72-
<TextBlock md={8}>
74+
<TextBlock md={8} className={classNames({"mb-3": !isLoggedIn(user)})}>
7375
<h2>Tools to help you teach</h2>
7476
<p>An Ada account makes it easy to assess your students. Set assignments to reinforce learning from lessons and use our pre-made tests to check student knowledge.</p>
75-
{!isLoggedIn(user) && <>
77+
{!isLoggedIn(user) && <div className="pb-2 mb-3">
7678
<Button className="me-3" to={"/register"} tag={Link}>Create an account</Button>
7779
<Button outline to={"/login"} tag={Link}>Log in</Button>
78-
</>}
80+
</div>}
7981
</TextBlock>
8082
<ColumnSlice>
8183
<IconCard card={{
@@ -113,8 +115,8 @@ export const TeacherResources = () => {
113115
</ColumnSlice>
114116
</Container>
115117
</section>
116-
<section id="cpd">
117-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
118+
<section id="cpd" className="bg-white">
119+
<Container className="homepage-padding mw-1600" fluid>
118120
<TextBlock md={8}>
119121
<h2>Professional development</h2>
120122
<p>Learn new skills and build confidence with our free courses for continuing professional development (CPD). They&apos;re designed to support you, whatever your level of experience.</p>
@@ -139,9 +141,9 @@ export const TeacherResources = () => {
139141
</ColumnSlice>
140142
</Container>
141143
</section>
142-
<section id="more-resources">
143-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
144-
<img className="full-background-img bg-cyan-200" src="/assets/cs/decor/slice-bg-1.svg" alt=""/>
144+
<section id="student-challenges" className="bg-cyan-200">
145+
<Container className="homepage-padding mw-1600 position-relative" fluid>
146+
<img className="full-background-img" src="/assets/cs/decor/slice-bg-1.svg" alt=""/>
145147
<ColumnSlice>
146148
<TextBlock>
147149
<h2>Student challenges</h2>
@@ -160,8 +162,9 @@ export const TeacherResources = () => {
160162
}}/>
161163
</ColumnSlice>
162164
</Container>
163-
164-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
165+
</section>
166+
<section id="more-resources" className="bg-white">
167+
<Container className="homepage-padding mw-1600" fluid>
165168
<TextBlock md={8}>
166169
<h2>More teaching resources</h2>
167170
<p>Support, lesson plans, ideas, and tools from the Raspberry Pi Foundation&apos;s world-class range of computer science resources.</p>
@@ -193,8 +196,9 @@ export const TeacherResources = () => {
193196
}}/>
194197
</ColumnSlice>
195198
</Container>
196-
197-
<Container className="py-5 homepage-x-padding mw-1600 bg-black" fluid>
199+
</section>
200+
<section id="testimonial" className="bg-black">
201+
<Container className="homepage-padding mw-1600" fluid>
198202
<TextBlock md={{size: 10, offset: 1}} lg={{size: 8, offset: 2}} className="backslash-left text-white">
199203
<h2>
200204
&ldquo;Ada Computer Science has eliminated the need for textbooks for A level computer science. There is rarely a need for any other sources of information when planning lessons and it&apos;s free!&rdquo;
@@ -203,8 +207,8 @@ export const TeacherResources = () => {
203207
</TextBlock>
204208
</Container>
205209
</section>
206-
<section id="help-and-support">
207-
<Container className="py-5 homepage-x-padding mw-1600 bg-white" fluid>
210+
<section id="help-and-support" className="bg-white">
211+
<Container className="homepage-padding mw-1600" fluid>
208212
<div className="py-4 position-relative">
209213
<img className="full-background-img border-radius-3 bg-dark-pink-300" src="/assets/cs/decor/help-slice-purple.svg" alt=""/>
210214
<TextBlock className="py-3 text-center text-white">

‎src/app/components/site/cs/HomepageCS.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const HomepageCS = () => {
2525
<MetaDescription description={"Ada Computer Science is a free online computer science programme for students and teachers. Learn by using our computer science topics and questions!"}/>
2626
<div id="homepage">
2727
<section id="call-to-action" className="homepageHero">
28-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
28+
<Container className="homepage-padding mw-1600" fluid>
2929
<Row>
3030
<TextBlock lg={7}>
3131
<h1 className={"font-size-1-75 font-size-md-2-5"}>
@@ -53,7 +53,7 @@ export const HomepageCS = () => {
5353
</Container>
5454
</section>
5555
<section id="news-and-updates">
56-
<Container className="py-5 homepage-x-padding mw-1600 position-relative" fluid>
56+
<Container className="homepage-padding mw-1600 position-relative" fluid>
5757
<img className="full-background-img" src="/assets/cs/decor/swirls.svg" alt=""/>
5858
<ColumnSlice>
5959
<TextBlock className="pe-5">
@@ -73,7 +73,7 @@ export const HomepageCS = () => {
7373
</Container>
7474
</section>
7575
<section id="benefits-for-teachers-and-students" className="bg-white">
76-
<Container className={"py-5 homepage-x-padding mw-1600"}>
76+
<Container className={"homepage-padding mw-1600"}>
7777
<Row className={"align-items-center"}>
7878
<Col xs={12} lg={5} className="mt-4 mt-lg-4 order-1 order-lg-0">
7979
<picture>
@@ -105,7 +105,7 @@ export const HomepageCS = () => {
105105
</section>
106106

107107
<section id="question-finder">
108-
<Container className={"py-5 homepage-x-padding mw-1600"}>
108+
<Container className={"homepage-padding mw-1600"}>
109109
<ColumnSlice>
110110
<TextBlock>
111111
<h2 className={"font-size-1-75 mb-4"}>Questions for classwork, homework, and exam prep</h2>
@@ -129,7 +129,7 @@ export const HomepageCS = () => {
129129
</section>
130130

131131
<section id="further-learning" className="bg-white">
132-
<Container className="py-5 homepage-x-padding mw-1600" fluid>
132+
<Container className="homepage-padding mw-1600" fluid>
133133
<TextBlock md={8}>
134134
<h2>More learning resources</h2>
135135
</TextBlock>
@@ -163,7 +163,7 @@ export const HomepageCS = () => {
163163
</section>
164164

165165
<section id="what-resources">
166-
<Container className={"py-5 homepage-x-padding mw-1600"}>
166+
<Container className={"homepage-padding mw-1600"}>
167167
<TextBlock md={8}>
168168
<h2 className={"font-size-1-75 mb-4"}>Teaching outside the UK?</h2>
169169
<p>We&apos;ve organised our learning resources by prior knowledge and age group to make them easy to adapt for curricula around the world.</p>
@@ -209,7 +209,7 @@ export const HomepageCS = () => {
209209
</section>
210210

211211
{news && news.length > 0 && <section id="news" className="bg-white">
212-
<Container className={"py-5 homepage-x-padding mw-1600"}>
212+
<Container className={"homepage-padding mw-1600"}>
213213
<h2 className={"font-size-1-75 mb-4"}>News</h2>
214214
<Row xs={12} data-testid={"news-pod-deck"} className="d-flex flex-row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 isaac-cards-body justify-content-around my-3">
215215
{news.slice(0, deviceSize === "lg" ? 3 : 4).map((n, i) => <NewsCard key={i} newsItem={n} showTitle cardClassName="bg-cultured-grey" />)}

‎src/scss/cs/homepage.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,12 +131,18 @@
131131
}
132132
}
133133

134-
.homepage-x-padding {
134+
.homepage-padding {
135135
@extend .px-md-4;
136136
@include media-breakpoint-up(lg) {
137137
padding-left: 28px !important;
138138
padding-right: 28px !important;
139139
}
140+
@extend .py-5;
141+
@include media-breakpoint-up(lg) {
142+
padding-top: 5rem !important;
143+
padding-bottom: 5rem !important;
144+
}
145+
140146
}
141147

142148
.ada-pink {

‎src/test/pages/__image_snapshots__/ada/Homepage should have no visual regressions #0.png

397 Bytes
Loading

0 commit comments

Comments
 (0)