diff --git a/public/assets/cs/decor/astro-pi.png b/public/assets/cs/decor/astro-pi.png new file mode 100644 index 0000000000..5ff2ae9139 Binary files /dev/null and b/public/assets/cs/decor/astro-pi.png differ diff --git a/public/assets/cs/decor/benefits-for-homepage.png b/public/assets/cs/decor/benefits-for-homepage.png index dff6acdc68..405c20750b 100644 Binary files a/public/assets/cs/decor/benefits-for-homepage.png and b/public/assets/cs/decor/benefits-for-homepage.png differ diff --git a/public/assets/cs/decor/benefits-for-homepage.webp b/public/assets/cs/decor/benefits-for-homepage.webp deleted file mode 100644 index 83ceac0009..0000000000 Binary files a/public/assets/cs/decor/benefits-for-homepage.webp and /dev/null differ diff --git a/public/assets/cs/decor/code-editor.png b/public/assets/cs/decor/code-editor.png new file mode 100644 index 0000000000..ced189a8a5 Binary files /dev/null and b/public/assets/cs/decor/code-editor.png differ diff --git a/public/assets/cs/decor/coding-projects.png b/public/assets/cs/decor/coding-projects.png new file mode 100644 index 0000000000..3107f44577 Binary files /dev/null and b/public/assets/cs/decor/coding-projects.png differ diff --git a/public/assets/cs/decor/hello-world.png b/public/assets/cs/decor/hello-world.png new file mode 100644 index 0000000000..31d7d1bc71 Binary files /dev/null and b/public/assets/cs/decor/hello-world.png differ diff --git a/public/assets/cs/decor/help-slice-cyan.svg b/public/assets/cs/decor/help-slice-cyan.svg new file mode 100644 index 0000000000..1eea8126fa --- /dev/null +++ b/public/assets/cs/decor/help-slice-cyan.svg @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/help-slice-purple.svg b/public/assets/cs/decor/help-slice-purple.svg new file mode 100644 index 0000000000..1fd673ecc7 --- /dev/null +++ b/public/assets/cs/decor/help-slice-purple.svg @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/learner-1.png b/public/assets/cs/decor/learner-1.png new file mode 100644 index 0000000000..5edf56329c Binary files /dev/null and b/public/assets/cs/decor/learner-1.png differ diff --git a/public/assets/cs/decor/learner-2.png b/public/assets/cs/decor/learner-2.png new file mode 100644 index 0000000000..80c3ed089a Binary files /dev/null and b/public/assets/cs/decor/learner-2.png differ diff --git a/public/assets/cs/decor/lella.png b/public/assets/cs/decor/lella.png new file mode 100644 index 0000000000..5605396767 Binary files /dev/null and b/public/assets/cs/decor/lella.png differ diff --git a/public/assets/cs/decor/progress.svg b/public/assets/cs/decor/progress.svg new file mode 100644 index 0000000000..21889d8288 --- /dev/null +++ b/public/assets/cs/decor/progress.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/question-finder-clean.svg b/public/assets/cs/decor/question-finder-clean.svg new file mode 100644 index 0000000000..8354918e96 --- /dev/null +++ b/public/assets/cs/decor/question-finder-clean.svg @@ -0,0 +1,458 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/questions.svg b/public/assets/cs/decor/questions.svg new file mode 100644 index 0000000000..848d9e89c8 --- /dev/null +++ b/public/assets/cs/decor/questions.svg @@ -0,0 +1,446 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/slice-bg-1.svg b/public/assets/cs/decor/slice-bg-1.svg new file mode 100644 index 0000000000..c9cf0031ae --- /dev/null +++ b/public/assets/cs/decor/slice-bg-1.svg @@ -0,0 +1,291 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/student-challenges.png b/public/assets/cs/decor/student-challenges.png new file mode 100644 index 0000000000..d9bc9ad9dc Binary files /dev/null and b/public/assets/cs/decor/student-challenges.png differ diff --git a/public/assets/cs/decor/swirls.svg b/public/assets/cs/decor/swirls.svg new file mode 100644 index 0000000000..a3cb1550c5 --- /dev/null +++ b/public/assets/cs/decor/swirls.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/cs/decor/teacher-1.png b/public/assets/cs/decor/teacher-1.png new file mode 100644 index 0000000000..1bd5a2a0d7 Binary files /dev/null and b/public/assets/cs/decor/teacher-1.png differ diff --git a/public/assets/cs/decor/teacher-2.png b/public/assets/cs/decor/teacher-2.png new file mode 100644 index 0000000000..f1dfb84ff0 Binary files /dev/null and b/public/assets/cs/decor/teacher-2.png differ diff --git a/public/assets/cs/decor/teacher-3.png b/public/assets/cs/decor/teacher-3.png new file mode 100644 index 0000000000..410a2204c0 Binary files /dev/null and b/public/assets/cs/decor/teacher-3.png differ diff --git a/public/assets/cs/decor/teacher-4.png b/public/assets/cs/decor/teacher-4.png new file mode 100644 index 0000000000..d9b097c627 Binary files /dev/null and b/public/assets/cs/decor/teacher-4.png differ diff --git a/public/assets/cs/icons/book.svg b/public/assets/cs/icons/book.svg new file mode 100644 index 0000000000..d6410b99e8 --- /dev/null +++ b/public/assets/cs/icons/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/external-link.svg b/public/assets/cs/icons/external-link.svg new file mode 100644 index 0000000000..c19739a9c4 --- /dev/null +++ b/public/assets/cs/icons/external-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/file-cyan.svg b/public/assets/cs/icons/file-cyan.svg new file mode 100644 index 0000000000..8f92be5e21 --- /dev/null +++ b/public/assets/cs/icons/file-cyan.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/group-cyan.svg b/public/assets/cs/icons/group-cyan.svg new file mode 100644 index 0000000000..86207bb0c3 --- /dev/null +++ b/public/assets/cs/icons/group-cyan.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/lightbulb-cyan.svg b/public/assets/cs/icons/lightbulb-cyan.svg new file mode 100644 index 0000000000..546660f138 --- /dev/null +++ b/public/assets/cs/icons/lightbulb-cyan.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/search-cyan.svg b/public/assets/cs/icons/search-cyan.svg new file mode 100644 index 0000000000..6a196b8a71 --- /dev/null +++ b/public/assets/cs/icons/search-cyan.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/cs/icons/tune-cyan.svg b/public/assets/cs/icons/tune-cyan.svg new file mode 100644 index 0000000000..573f703eb6 --- /dev/null +++ b/public/assets/cs/icons/tune-cyan.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/components/content/IsaacCard.tsx b/src/app/components/content/IsaacCard.tsx index 55b2904b3d..f303094555 100644 --- a/src/app/components/content/IsaacCard.tsx +++ b/src/app/components/content/IsaacCard.tsx @@ -1,17 +1,18 @@ import React from "react"; -import {Button, Card, CardBody, CardFooter, CardImg, CardTitle, Col, Row} from "reactstrap"; +import {Card, CardBody, CardTitle, Col, ContainerProps, Row} from "reactstrap"; import classNames from "classnames"; import {apiHelper, isAppLink, siteSpecific} from "../../services"; import {Link} from "react-router-dom"; import {IsaacCardDTO} from "../../../IsaacApiTypes"; +import { AdaCard } from "../elements/cards/AdaCard"; -interface IsaacCardProps { +interface IsaacCardProps extends ContainerProps { doc: IsaacCardDTO; imageClassName?: string; className?: string; } -const PhysicsCard = ({doc, imageClassName, className}: IsaacCardProps) => { +const PhysicsContentCard = ({doc, imageClassName, className, ...rest}: IsaacCardProps) => { const {title, subtitle, image, clickUrl, disabled, verticalContent} = doc; const classes = classNames(className + " menu-card", {"disabled": disabled, "isaac-card-vertical": verticalContent}); const imgSrc = image?.src && apiHelper.determineImageUrl(image.src); @@ -57,21 +58,19 @@ const PhysicsCard = ({doc, imageClassName, className}: IsaacCardProps) => { ; }; -const AdaCard = ({doc, imageClassName}: IsaacCardProps) => { +const AdaContentCard = ({doc, imageClassName, ...rest}: IsaacCardProps) => { const {title, subtitle, image, clickUrl, disabled, verticalContent} = doc; const imageSrc = image?.src && apiHelper.determineImageUrl(image.src); - return - {image && } - -

{title}

-
- -

{subtitle}

-
- {clickUrl && isAppLink(clickUrl) && - - } -
; + + return ; }; -export const IsaacCard = siteSpecific(PhysicsCard, AdaCard); +export const IsaacCard = siteSpecific(PhysicsContentCard, AdaContentCard); diff --git a/src/app/components/content/IsaacCardDeck.tsx b/src/app/components/content/IsaacCardDeck.tsx index e507c1b908..ec0e8fbeda 100644 --- a/src/app/components/content/IsaacCardDeck.tsx +++ b/src/app/components/content/IsaacCardDeck.tsx @@ -3,7 +3,7 @@ import {IsaacCard} from "./IsaacCard"; import {IsaacCardDeckDTO} from "../../../IsaacApiTypes"; import {Col, Container, Row} from "reactstrap"; import classNames from "classnames"; -import {isAda, isPhy} from "../../services"; +import {isPhy, siteSpecific} from "../../services"; const MAX_CARDS_IN_CONTENT_DEFINED_DECK = 3; @@ -20,10 +20,19 @@ export const IsaacCardDeck = ({doc, className, containerClassName}: IsaacCardDec

{doc.title}

} - - {doc?.cards?.map((props, i) => - - )} - + { + siteSpecific( + + {/* TODO: move Containers into Cards for Physics */} + {doc?.cards?.map((props, i) => + + )} + + , + + {doc?.cards?.map((props, i) => )} + + ) + } ; -}; \ No newline at end of file +}; diff --git a/src/app/components/elements/cards/AdaCard.tsx b/src/app/components/elements/cards/AdaCard.tsx new file mode 100644 index 0000000000..b0e7854d4f --- /dev/null +++ b/src/app/components/elements/cards/AdaCard.tsx @@ -0,0 +1,47 @@ +import classNames from "classnames"; +import React from "react"; +import {Button, Card, CardBody, CardFooter, CardImg, CardTitle, Container, ContainerProps} from "reactstrap"; +import { isAppLink } from "../../../services"; +import { Link } from "react-router-dom"; +import { ExternalLink } from "../ExternalLink"; + +export interface AdaCardContentProps { + title: string; + image: {src: string, altText?: string, className?: string}; + bodyText: string; + clickUrl?: string; + buttonText?: string; + buttonStyle?: "outline" | "link" | "card"; + disabled?: boolean; + className?: string; +} + +export interface AdaCardProps extends ContainerProps { + card: AdaCardContentProps; +} + +export const AdaCard = ({card, ...props}: AdaCardProps) => { + const {title, image, bodyText, clickUrl, buttonText, buttonStyle, disabled} = card; + return + + {image && } +
+ +

{title}

+
+ +

{bodyText}

+
+ {clickUrl && buttonStyle !== "card" && + + } +
+
+
; +}; diff --git a/src/app/components/elements/cards/IconCard.tsx b/src/app/components/elements/cards/IconCard.tsx new file mode 100644 index 0000000000..e41e4d1bf2 --- /dev/null +++ b/src/app/components/elements/cards/IconCard.tsx @@ -0,0 +1,46 @@ +import classNames from "classnames"; +import React from "react"; +import {Button, Card, CardBody, CardFooter, CardTitle, Container, ContainerProps} from "reactstrap"; +import { isAppLink } from "../../../services"; +import { Link } from "react-router-dom"; + +export interface IconCardContentProps { + title: string; + icon: {src: string, altText?: string, className?: string}; + bodyText: string; + tag?: string; + clickUrl?: string; + buttonText?: string; + disabled?: boolean; + buttonStyle?: "outline" | "link" | "card"; + className?: string; +} + +export interface IconCardProps extends ContainerProps { + card: IconCardContentProps; +} + +export const IconCard = ({card, ...props}: IconCardProps) => { + const {title, icon, bodyText, tag, clickUrl, buttonText, disabled, buttonStyle} = card; + return + + {icon.altText + {tag &&
+ {tag} +
} +
+ +

{title}

+
+ +

{bodyText}

+
+ {clickUrl && buttonStyle !== "card" && + + } +
+
+
; +}; diff --git a/src/app/components/elements/cards/NewsCard.tsx b/src/app/components/elements/cards/NewsCard.tsx index 78eab12729..c73960dfe7 100644 --- a/src/app/components/elements/cards/NewsCard.tsx +++ b/src/app/components/elements/cards/NewsCard.tsx @@ -5,10 +5,12 @@ import {IsaacPodDTO} from "../../../../IsaacApiTypes"; import {apiHelper, isAppLink, siteSpecific} from "../../../services"; import classNames from "classnames"; import { ExternalLink } from "../ExternalLink"; +import { AdaCard } from "./AdaCard"; interface NewsCardProps extends CardProps { newsItem: IsaacPodDTO; showTitle?: boolean; + cardClassName?: string; } const PhysicsNewsCard = ({newsItem, showTitle, ...props}: NewsCardProps) => { @@ -55,35 +57,19 @@ const PhysicsNewsCard = ({newsItem, showTitle, ...props}: NewsCardProps) => { ; }; -export const AdaNewsCard = ({newsItem, showTitle, ...props}: NewsCardProps) => { +export const AdaNewsCard = ({newsItem, showTitle, cardClassName, ...props}: NewsCardProps) => { const {title, value, image, url} = newsItem; - return - - {image && - - } - {showTitle && <> - -

{title}

-
- -

{value}

-
- } - {url && - {!url?.startsWith("http") && isAppLink(url) ? ( - - ) : ( - - )} - } -
-
; + return ; }; -export const NewsCard = siteSpecific(PhysicsNewsCard, AdaNewsCard); \ No newline at end of file +export const NewsCard = siteSpecific(PhysicsNewsCard, AdaNewsCard); diff --git a/src/app/components/elements/layout/ColumnSlice.tsx b/src/app/components/elements/layout/ColumnSlice.tsx new file mode 100644 index 0000000000..bd5f22cfb3 --- /dev/null +++ b/src/app/components/elements/layout/ColumnSlice.tsx @@ -0,0 +1,14 @@ +import classNames from "classnames"; +import React from "react"; +import { Row, RowProps } from "reactstrap"; + +interface ColumnSliceProps extends RowProps { + breakpoint?: "sm" | "md" | "lg" | "xl"; +} + +export const ColumnSlice = ({...props}: ColumnSliceProps) => { + const numChildren = Math.min(React.Children.count(props.children), 4); + return + {props.children} + ; +}; diff --git a/src/app/components/elements/layout/ImageBlock.tsx b/src/app/components/elements/layout/ImageBlock.tsx new file mode 100644 index 0000000000..1b32340391 --- /dev/null +++ b/src/app/components/elements/layout/ImageBlock.tsx @@ -0,0 +1,11 @@ +import classNames from "classnames"; +import React from "react"; +import { Col, ColProps } from "reactstrap"; + +export const ImageBlock = ({...props} : ColProps) => { + return +
+ {props.children} +
+ ; +}; diff --git a/src/app/components/elements/layout/TextBlock.tsx b/src/app/components/elements/layout/TextBlock.tsx new file mode 100644 index 0000000000..f1649b6935 --- /dev/null +++ b/src/app/components/elements/layout/TextBlock.tsx @@ -0,0 +1,11 @@ +import classNames from "classnames"; +import React from "react"; +import { Col, ColProps } from "reactstrap"; + +export const TextBlock = ({...props} : ColProps) => { + return +
+ {props.children} +
+ ; +}; diff --git a/src/app/components/pages/ExamSpecificationsDirectory.tsx b/src/app/components/pages/ExamSpecificationsDirectory.tsx index 6a0e45c7de..d2a9252457 100644 --- a/src/app/components/pages/ExamSpecificationsDirectory.tsx +++ b/src/app/components/pages/ExamSpecificationsDirectory.tsx @@ -11,7 +11,7 @@ export const ExamSpecificationsDirectory = () => { - +

Ada CS

@@ -31,7 +31,7 @@ export const ExamSpecificationsDirectory = () => {
- +

England

@@ -52,7 +52,7 @@ export const ExamSpecificationsDirectory = () => {
- +

Scotland

@@ -73,7 +73,7 @@ export const ExamSpecificationsDirectory = () => {
- +

Wales

@@ -92,4 +92,4 @@ export const ExamSpecificationsDirectory = () => {
; -}; \ No newline at end of file +}; diff --git a/src/app/components/pages/StudentResources.tsx b/src/app/components/pages/StudentResources.tsx new file mode 100644 index 0000000000..47e17d57b1 --- /dev/null +++ b/src/app/components/pages/StudentResources.tsx @@ -0,0 +1,218 @@ +import React from "react"; +import { ColumnSlice } from "../elements/layout/ColumnSlice"; +import { Button, Container } from "reactstrap"; +import { TextBlock } from "../elements/layout/TextBlock"; +import { IconCard } from "../elements/cards/IconCard"; +import { selectors, useAppSelector, useGetNewsPodListQuery } from "../../state"; +import { Link } from "react-router-dom"; +import { AdaCard } from "../elements/cards/AdaCard"; +import { ImageBlock } from "../elements/layout/ImageBlock"; +import { isLoggedIn } from "../../services"; + +export const StudentResources = () => { + const {data: studentPods} = useGetNewsPodListQuery({subject: "news"}); + const featuredPod = studentPods?.[0]; + const user = useAppSelector(selectors.user.orNull); + + return
+
+ + + +

+ /
+ Resources for students +

+

We've got everything to help you study computer science – including classwork, homework, and exam prep. And it's all available for free.

+
+ + + +
+
+
+
+ + + + +

Our latest updates

+

We're constantly working to improve your experience with Ada Computer Science. Read the latest news and updates from the team.

+
+ {featuredPod && featuredPod.title && featuredPod.value ? :
} + + +
+
+ + + + + + +

A full curriculum of topics

+

We have over 65 learning topics that cover everything you need to learn in computer science. From computing systems and networks, to AI, machine learning, and much more.

+

They're created by expert educators and are regularly updated.

+ +
+
+
+
+
+ + + +

Over 1000 practice questions

+

Our self-marking questions give you hints and instant feedback as you go. You can filter by exam level, topic, or concept to find exactly what you need.

+ +
+ + + +
+
+
+
+ + + + + + +

Track your progress

+

With an Ada account, all your answers get saved so you can see what to work on and how you’re progressing. And you can track any assignments set by your teacher.

+ {isLoggedIn(user) ? <> + + : <> + + + } +
+
+
+
+
+ + + + +

Win prizes with our student challenges

+

Join one of our termly challenges. Test your knowledge and skills, and be in with the chance to win some great prizes.

+ +
+ {/* TODO: this is currently hard-coded because challenges aren't retrievable via an API call */} + +
+
+
+
+ + +

Further learning

+

More projects, challenges, and tools from the Raspberry Pi Foundation’s world class range of computer science resources.

+
+ + + + + +
+
+
+ + +

+ “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.” +

+

– Computer science student

+
+
+
+
+ + +

Explore a career in computer science

+

Read stories from graduates at the early stages of their careers in software development, game design, research, and much more.

+
+ + + + + +
+ + View more stories + + > +
+
+
+
+ +
+ + +

Need help?

+

Our student support page has lots of information for common questions and issues.

+ +
+
+
+
+
; +}; diff --git a/src/app/components/pages/TeacherResources.tsx b/src/app/components/pages/TeacherResources.tsx new file mode 100644 index 0000000000..9612009972 --- /dev/null +++ b/src/app/components/pages/TeacherResources.tsx @@ -0,0 +1,219 @@ +import React from "react"; +import { ColumnSlice } from "../elements/layout/ColumnSlice"; +import { Button, Container } from "reactstrap"; +import { IconCard } from "../elements/cards/IconCard"; +import { selectors, useAppSelector, useGetNewsPodListQuery } from "../../state"; +import { TextBlock } from "../elements/layout/TextBlock"; +import { Link } from "react-router-dom"; +import { AdaCard } from "../elements/cards/AdaCard"; +import { isLoggedIn } from "../../services"; +import { ImageBlock } from "../elements/layout/ImageBlock"; + +export const TeacherResources = () => { + const {data: teacherPods} = useGetNewsPodListQuery({subject: "news"}); + const featuredPod = teacherPods?.[0]; + + const user = useAppSelector(selectors.user.orNull); + + return
+
+ + + +

+ /
+ Resources for teachers +

+

Classwork, homework, and exam prep to help you teach computer science. All available for free.

+
+ + + +
+
+
+
+ + + + +

Our latest updates

+

We're constantly working to improve your experience with Ada Computer Science. Read the latest news and updates from the team.

+
+ {featuredPod && featuredPod.title && featuredPod.value ? :
} + + + + + + + + + +

A full curriculum of topics

+

We have over 65 learning topics that cover everything you need to teach computer science. From computing systems and networks, to AI, machine learning, and much more.

+

They're created by expert educators and are regularly updated. You can even filter content for different age groups and exams.

+ +
+
+
+
+
+ + + +

Tools to help you teach

+

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.

+ {!isLoggedIn(user) && <> + + + } +
+ + + + + + +
+
+
+ + +

Professional development

+

Learn new skills and build confidence with our free courses for continuing professional development (CPD). They're designed to support you, whatever your level of experience.

+
+ + + + +
+
+
+ + + + +

Student challenges

+

Encourage and reward student success with our student challenge programme, designed to inspire achievement at every stage of their studies.

+ +
+ {/* TODO: this is currently hard-coded because challenges aren't retrievable via an API call */} + +
+
+ + + +

More teaching resources

+

Support, lesson plans, ideas, and tools from the Raspberry Pi Foundation's world-class range of computer science resources.

+
+ + + + + +
+ + + +

+ “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's free!” +

+

– Matt Arnmor, computer science teacher

+
+
+
+
+ +
+ + +

Need help?

+

Our teacher support page has lots of information for common questions and issues.

+ +
+
+
+
+
; +}; diff --git a/src/app/components/site/cs/HomepageCS.tsx b/src/app/components/site/cs/HomepageCS.tsx index d58422202c..359a688bb9 100644 --- a/src/app/components/site/cs/HomepageCS.tsx +++ b/src/app/components/site/cs/HomepageCS.tsx @@ -1,20 +1,23 @@ import React, {useEffect} from "react"; -import {selectors, useAppSelector, useGetNewsPodListQuery} from "../../../state"; +import {useGetNewsPodListQuery} from "../../../state"; import {Link} from "react-router-dom"; -import {Button, Card, CardBody, CardTitle, Col, Container, Row} from "reactstrap"; -import {isLoggedIn, PATHS, SITE_TITLE, useDeviceSize} from "../../../services"; +import {Button, Card, CardBody, CardFooter, CardTitle, Col, Container, Row} from "reactstrap"; +import {PATHS, SITE_TITLE, useDeviceSize} from "../../../services"; import {AdaHero2x1} from "../../elements/svg/AdaHero"; -import {FeaturedNewsItem} from "../../elements/FeaturedNewsItem"; import {NewsCard} from "../../elements/cards/NewsCard"; import {AdaHomepageSearch} from "../../elements/SearchInputs"; import {MetaDescription} from "../../elements/MetaDescription"; import classNames from "classnames"; +import { ImageBlock } from "../../elements/layout/ImageBlock"; +import { IconCard } from "../../elements/cards/IconCard"; +import { TextBlock } from "../../elements/layout/TextBlock"; +import { ColumnSlice } from "../../elements/layout/ColumnSlice"; +import { AdaCard } from "../../elements/cards/AdaCard"; export const HomepageCS = () => { useEffect( () => {document.title = SITE_TITLE;}, []); - const user = useAppSelector(selectors.user.orNull); const {data: news} = useGetNewsPodListQuery({subject: "news"}); - const featuredNewsItem = (news && user?.loggedIn) ? news[0] : undefined; + const featuredNewsItem = news ? news[0] : undefined; const deviceSize = useDeviceSize(); return <> @@ -22,9 +25,9 @@ export const HomepageCS = () => {
- - - + + +

/
The free learning platform for computing teachers and students @@ -42,55 +45,69 @@ export const HomepageCS = () => { - - - {isLoggedIn(user) ? -
- - -
- : - - } - + + + +

-
- +
+ + + + +

Our latest updates

+

We're constantly working to improve your experience with Ada Computer Science. Read the latest news and updates from the team.

+
+ {featuredNewsItem && featuredNewsItem.title && featuredNewsItem.value ? :
} + + +
+
+ - + + + + + + +

What we offer

    -
  • Free computer science resources: Tailored for students aged 14 to 19
  • -
  • Interactive questions: Over 1000 questions with instant marking and feedback
  • -
  • Teacher tools: Set quizzes and assignments effortlessly
  • -
  • AI and machine learning resources: Stay ahead of the AI curve
  • -
  • Complete curriculums: For +
  • Free computer science resources: Tailored for students aged 14 to 19
  • +
  • Interactive questions: Over 1000 questions with instant marking and feedback
  • +
  • Teacher tools: Set quizzes and assignments effortlessly
  • +
  • AI and machine learning resources: Stay ahead of the AI curve
  • +
  • Complete curriculums: For {" "}GCSE, {" "}A Level, {" "}National 5, {" "}Higher, and {" "}Advanced Higher
- {!isLoggedIn(user) && - - } - - - - - - +
+ + +
- - - + + +

Questions for classwork, homework, and exam prep

Explore our bank of over 1000 self-marking questions. Filter by topic, concept, and qualification. @@ -100,70 +117,102 @@ export const HomepageCS = () => { - - + + - - + + - - + + + +

+ +
+ + +

More learning resources

+
+ + + + +
- -

Our Core and Advanced global resources

-

- Teaching or learning from outside the UK? We've organised our learning resources by prior - knowledge and age group to make them easy to adapt for curricula in other countries. -

- - - + + +

Teaching outside the UK?

+

We've organised our learning resources by prior knowledge and age group to make them easy to adapt for curricula around the world.

+
+ + +

Core

- -
    + +
    • For students aged 14 to 16
    • -
    • Gives learners a strong theoretical and practical knowledge of the basics of - computer science -
    • +
    • Gives learners a strong theoretical and practical knowledge of the basics of computer science
    • Suitable for students with no previous knowledge
    + + + - - - + + +

    Advanced

    - -
      + +
      • For students aged 16 to 19
      • Expands on the concepts learnt in the Core curriculum with more detail
      • Covers more advanced concepts that are not in the Core curriculum
      • -
      • Prepares students for a university degree / degree apprenticeship - programme -
      • +
      • Prepares students for a university degree / degree apprenticeship programme
      + + + - - - - - + +
- {news && news.length > 0 &&
- + {news && news.length > 0 &&
+

News

- {news.slice(0, deviceSize === "lg" ? 3 : 4).map((n, i) => )} + {news.slice(0, deviceSize === "lg" ? 3 : 4).map((n, i) => )}
diff --git a/src/app/components/site/cs/RoutesCS.tsx b/src/app/components/site/cs/RoutesCS.tsx index 52f238b91f..31e2fc6b54 100644 --- a/src/app/components/site/cs/RoutesCS.tsx +++ b/src/app/components/site/cs/RoutesCS.tsx @@ -30,6 +30,8 @@ import {Events} from "../../pages/Events"; import {RedirectToEvent} from "../../navigation/RedirectToEvent"; import { OnlineCourses } from "../../pages/OnlineCourses"; import {ExamSpecificationsDirectory} from "../../pages/ExamSpecificationsDirectory"; +import { StudentResources } from "../../pages/StudentResources"; +import { TeacherResources } from "../../pages/TeacherResources"; const Equality = lazy(() => import('../../pages/Equality')); const EventDetails = lazy(() => import('../../pages/EventDetails')); @@ -50,11 +52,9 @@ export const RoutesCS = [ , - // Student and teacher - // , - // , - , - , + // Student and teacher resources + , + , // Assignments , diff --git a/src/scss/common/_mixins.scss b/src/scss/common/_mixins.scss index 10ccb607fd..f9ec7867d0 100644 --- a/src/scss/common/_mixins.scss +++ b/src/scss/common/_mixins.scss @@ -259,4 +259,9 @@ $breakpoints: ( @mixin aspect-ratio($width, $height) { aspect-ratio: calc($width / $height); -} \ No newline at end of file +} + +@mixin svg-color($image, $color) { + mask: $image no-repeat center center; + background-color: $color; +} diff --git a/src/scss/cs/cards.scss b/src/scss/cs/cards.scss index de979a6278..f9f54ae985 100644 --- a/src/scss/cs/cards.scss +++ b/src/scss/cs/cards.scss @@ -28,40 +28,129 @@ $cards-per-line: ( @each $name, $breakpoint in $grid-breakpoints { @if (map-has-key($cards-per-line, $name)) { @include media-breakpoint-up($name) { - .card-deck:not(.homepage-cards) .cs-card { + .card-deck .cs-card { flex: 0 0 calc(#{math.percentage(math.div(1, map-get($cards-per-line, $name)))} - #{$grid-gutter-width}); } } } } -// number of cards per line for each breakpoint -$homepage-cards-per-line: ( - xs: 1, - lg: 2 -); -@each $name, $breakpoint in $grid-breakpoints { - @if (map-has-key($homepage-cards-per-line, $name)) { - @include media-breakpoint-up($name) { - .homepage-cards .cs-card { - flex: 0 0 calc(#{math.percentage(math.div(1, map-get($homepage-cards-per-line, $name)))} - #{$grid-gutter-width}); - } - } +.card-container { + padding-bottom: $grid-gutter-width; +} + +.cs-card-container { + container: cs-card / inline-size; +} + +.cs-card { + box-shadow: 0px 0px 2px 1px $shadow-08; + border-radius: 1rem 1rem 3rem; + height: 100%; + display: flex; + flex-direction: column; + + > img { + aspect-ratio: 16/9; + border-radius: 1rem 1rem 0 0; + object-fit: cover; } } -.homepage-cards { +@container cs-card (min-width: 560px) { .cs-card { - @extend .mt-4; - @extend .my-lg-0; + flex-direction: row-reverse; + + > div { + width: 50%; + } + + > img { + width: 50%; + border-radius: 0 1rem 3rem 0; + } } } -.card-container { - padding-bottom: $grid-gutter-width; +.icon-card { + box-shadow: 0px 0px 2px 1px $shadow-08; + border-radius: 1rem; + height: 100%; + display: flex; + flex-direction: column; + + > img { + width: 25px; + height: 25px; + margin-top: 2rem; + margin-left: 1.5rem; + } + + .icon-card-tag { + position: absolute; + background-color: $pink-400; + height: 44px; + margin-top: -22px; + right: 2rem; + padding: 0.8rem 1rem; + border-radius: 2rem; + } } -.cs-card, .news-card { +.icon-card-container { + container: icon-card / inline-size; + max-width: unset; +} + +a.icon-card, a.cs-card { + text-decoration: none !important; + transition: all 0.2s; + + &:hover { + transform: scale(1.05); + } +} + +@container icon-card (min-width: 480px) { + .icon-card { + flex-direction: row; + + > .icon-card-main-content > * { + padding-left: 1rem !important; + + h3 { + margin-top: 8px; + } + } + } +} + +.cs-card, .icon-card { + .card-footer { + .btn-link::after { + content: ""; + display: inline-flex; + width: 6px; + height: 8px; + margin-top: -3px; + margin-left: 10px; + @include svg-color(url('/assets/common/icons/chevron_right.svg'), $dark-pink-300); + mask-size: cover; + } + } + + .external-link::after { + content: ""; + display: inline-block; + width: 30px; + height: 30px; + margin: -1px -4px 0 4px; + background: url(/assets/cs/icons/external-link.svg) no-repeat center center; + vertical-align: middle; + } +} + +.cs-card-plain, .news-card { position: relative; border-radius: 15px; display: inline-block; @@ -106,7 +195,7 @@ $homepage-cards-per-line: ( } } -.cs-card, .news-card, .board-card { +.cs-card-plain, .news-card, .board-card { // This is to make sure that the "footers" of multiple cards line up nicely &::after { @extend .mb-5; @@ -116,7 +205,6 @@ $homepage-cards-per-line: ( position: relative; } .card-footer { - background-color: transparent !important; position: absolute; bottom: 0; width: 100%; @@ -127,6 +215,12 @@ $homepage-cards-per-line: ( } } +.cs-card, .cs-card-plain, .icon-card, .news-card, .board-card { + .card-footer { + background-color: transparent !important; + } +} + .featured-news-item { color: $cs-black; -} \ No newline at end of file +} diff --git a/src/scss/cs/elements.scss b/src/scss/cs/elements.scss new file mode 100644 index 0000000000..f9ef047882 --- /dev/null +++ b/src/scss/cs/elements.scss @@ -0,0 +1,37 @@ +@import "../common/elements"; + +.text-block { + h2, p { + margin-bottom: 1.2rem; + } +} + +.image-block { + object-fit: contain; + @extend .vertical-center; + + > img { + width: 100%; + } +} + +.bg-dark-pink-200 { + background-color: $dark-pink-200; +} + +.bg-dark-pink-300 { + background-color: $dark-pink-300; +} + +.bg-cyan-200 { + background-color: $cyan-200; +} + +img.full-background-img { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + object-fit: cover; +} diff --git a/src/scss/cs/homepage.scss b/src/scss/cs/homepage.scss index 138f9b8874..511e13c473 100644 --- a/src/scss/cs/homepage.scss +++ b/src/scss/cs/homepage.scss @@ -57,7 +57,6 @@ } section#benefits-for-teachers-and-students { - background-color: $cs-white; ul { padding-inline-start: 20px; li { @@ -132,6 +131,14 @@ } } +.homepage-x-padding { + @extend .px-md-4; + @include media-breakpoint-up(lg) { + padding-left: 28px !important; + padding-right: 28px !important; + } +} + .ada-pink { height: 100%; width: 100%; diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss index 9095bcc02b..15afed4024 100644 --- a/src/scss/cs/isaac.scss +++ b/src/scss/cs/isaac.scss @@ -26,7 +26,7 @@ $cs-white: #ffffff; // Dark pinks $dark-pink-100: #510937; $dark-pink-200: #6C0A48; -$dark-pink-300: #870C5A; // theme colour +$dark-pink-300: #870D5A; // theme colour $dark-pink-400: #9E2372; $dark-pink-500: #D94BAA; // black text this and below $dark-pink-600: #F07DD2; @@ -348,7 +348,7 @@ $enable-negative-margins: true; @import "../common/modals"; @import "questions"; @import "forms"; -@import "../common/elements"; +@import "elements"; @import "breadcrumbs"; @import "../common/media"; @import "table"; @@ -402,6 +402,7 @@ $enable-negative-margins: true; @import "../common/callout"; @import "finder"; @import "topics"; +@import "resources"; @import "expansion-layout"; diff --git a/src/scss/cs/resources.scss b/src/scss/cs/resources.scss new file mode 100644 index 0000000000..144393afc3 --- /dev/null +++ b/src/scss/cs/resources.scss @@ -0,0 +1,18 @@ +#student-resources, #teacher-resources { + .backslash-left { + position: relative; + + > div { + padding-left: 48px; + } + + &::before { + content: "/"; + color: $pink-300; + font-size: 3.5rem; + position: absolute; + top: 34px; + left: 6px; + } + } +}