From 33acfe4743dd33cd73461845552d3f9a6b71d67b Mon Sep 17 00:00:00 2001 From: Antti Leinonen Date: Wed, 4 Oct 2023 15:06:02 +0300 Subject: [PATCH 1/3] Remove background pattern --- frontend/components/NewLayout/Footer/Footer.tsx | 1 + .../NewLayout/Modules/StudyModuleListItem.tsx | 2 -- frontend/pages/_new/admin/index.tsx | 3 --- frontend/pages/_new/courses/index.tsx | 10 ++-------- frontend/pages/_new/index.tsx | 3 --- frontend/pages/_new/profile/index.tsx | 2 -- frontend/pages/_new/study-modules/index.tsx | 3 --- 7 files changed, 3 insertions(+), 21 deletions(-) diff --git a/frontend/components/NewLayout/Footer/Footer.tsx b/frontend/components/NewLayout/Footer/Footer.tsx index 73870419b..302b54be0 100644 --- a/frontend/components/NewLayout/Footer/Footer.tsx +++ b/frontend/components/NewLayout/Footer/Footer.tsx @@ -20,6 +20,7 @@ const FooterContainer = styled("footer")( display: block; background-color: ${theme.palette.common.grayscale.black}; max-width: 100%; + margin-top: 5rem; `, ) diff --git a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx index 366919a43..4c7169045 100644 --- a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx +++ b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx @@ -10,7 +10,6 @@ import CTALink from "../Common/CTALink" import CourseCard, { CourseCardSkeleton } from "../Courses/CourseCard" import useIsomorphicLayoutEffect from "/hooks/useIsomorphicLayoutEffect" import { useTranslator } from "/hooks/useTranslator" -import backgroundPattern from "/public/images/new/background/backgroundPattern.svg" import StudyModulesTranslations from "/translations/_new/study-modules" import { @@ -220,7 +219,6 @@ export function ListItem({ return ( - diff --git a/frontend/pages/_new/admin/index.tsx b/frontend/pages/_new/admin/index.tsx index ed56c3358..0511b1075 100644 --- a/frontend/pages/_new/admin/index.tsx +++ b/frontend/pages/_new/admin/index.tsx @@ -1,5 +1,3 @@ -import Background from "components/NewLayout/Background" - import Container from "/components/Container" import { Links } from "/components/NewLayout/Admin" import { useBreadcrumbs } from "/hooks/useBreadcrumbs" @@ -15,7 +13,6 @@ const Admin = () => { return ( - ) diff --git a/frontend/pages/_new/courses/index.tsx b/frontend/pages/_new/courses/index.tsx index 74e82cbb2..01bcf1d8d 100644 --- a/frontend/pages/_new/courses/index.tsx +++ b/frontend/pages/_new/courses/index.tsx @@ -1,5 +1,3 @@ -import backgroundPattern from "public/images/new/background/backgroundPattern2.svg" - import { styled } from "@mui/material/styles" import Catalogue from "/components/NewLayout/Courses/Catalogue" @@ -16,18 +14,14 @@ import { useBreadcrumbs } from "/hooks/useBreadcrumbs" BEC3C7 */ -const Background = styled("div")( - ({ theme }) => ` +const Background = styled("div")` position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; - background-color: ${theme.palette.common.grayscale.slightlyGray}; - background-image: url(${backgroundPattern.src}); -`, -) +` function Courses() { useBreadcrumbs([ diff --git a/frontend/pages/_new/index.tsx b/frontend/pages/_new/index.tsx index df8bc86cc..d5dd7f298 100644 --- a/frontend/pages/_new/index.tsx +++ b/frontend/pages/_new/index.tsx @@ -1,5 +1,3 @@ -import Background from "components/NewLayout/Background" - import { styled } from "@mui/material/styles" import FrontpageHero from "/components/NewLayout/Frontpage/FrontpageHero" @@ -20,7 +18,6 @@ const ContentContainer = styled("div")` const Home = () => { return ( - {/**/} diff --git a/frontend/pages/_new/profile/index.tsx b/frontend/pages/_new/profile/index.tsx index 49be7ed22..169c0ba26 100644 --- a/frontend/pages/_new/profile/index.tsx +++ b/frontend/pages/_new/profile/index.tsx @@ -14,7 +14,6 @@ import { styled } from "@mui/material/styles" import Container from "/components/Container" import ErrorMessage from "/components/ErrorMessage" -import Background from "/components/NewLayout/Background" import ProfilePageHeader from "/components/NewLayout/Profile/Header" import ConsentNotification from "/components/Profile/ConsentNotification" import ProfileTabs from "/components/Profile/ProfileTabs" @@ -102,7 +101,6 @@ function Profile() { return ( <> - diff --git a/frontend/pages/_new/study-modules/index.tsx b/frontend/pages/_new/study-modules/index.tsx index 98585b57b..482686c99 100644 --- a/frontend/pages/_new/study-modules/index.tsx +++ b/frontend/pages/_new/study-modules/index.tsx @@ -1,5 +1,3 @@ -import Background from "components/NewLayout/Background" - import { StudyModuleList } from "/components/NewLayout/Modules" import { useBreadcrumbs } from "/hooks/useBreadcrumbs" @@ -13,7 +11,6 @@ function StudyModules() { return ( <> - ) From e320b6bedcc2988eb3db865d9f894acf202e5f6e Mon Sep 17 00:00:00 2001 From: Antti Leinonen Date: Wed, 4 Oct 2023 15:07:18 +0300 Subject: [PATCH 2/3] Update hero text boxes --- frontend/components/Home/NaviCard.tsx | 133 +++++++++++----- frontend/components/Home/NaviCardList.tsx | 6 +- frontend/components/Home/WideNaviCard.tsx | 143 ++++++++++++------ .../components/NewLayout/Common/LinkBox.tsx | 38 ++++- .../NewLayout/Common/LinkBoxList.tsx | 8 +- .../components/NewLayout/Frontpage/Hype.tsx | 17 ++- frontend/translations/navi/fi.ts | 29 ++-- 7 files changed, 260 insertions(+), 114 deletions(-) diff --git a/frontend/components/Home/NaviCard.tsx b/frontend/components/Home/NaviCard.tsx index 24e5853dc..d69bfd5f0 100644 --- a/frontend/components/Home/NaviCard.tsx +++ b/frontend/components/Home/NaviCard.tsx @@ -1,4 +1,4 @@ -import { ClickableDiv } from "components/Surfaces/ClickableCard" +import { ClickableDiv, ShadowedDiv } from "components/Surfaces/ClickableCard" import { CardTitle } from "components/Text/headers" import Image from "next/image" @@ -20,6 +20,19 @@ const NaviItemBase = styled(ClickableDiv)` align-items: flex-start; ` +const NaviItemBaseNonClickable = styled(ShadowedDiv)` + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + align-items: flex-start; +` + +const NoLinkContainer = styled("div")` + height: 100%; +` + const NaviItemTextBackground = styled(FullCoverTextBackground)` width: 100%; ` @@ -45,9 +58,9 @@ const StyledLink = styled(Link)` type NaviItem = { title: string text: string - linkText: string - img: string - link: string + linkText?: string + img?: string + link?: string titleImg?: string } @@ -82,44 +95,80 @@ function NaviCard(props: NaviCardProps) { return ( - - - {item.img ? ( - - ) : null} - - - {item.titleImg ? ( - - ) : ( - item.title - )} - - - {item.text} - - {item.linkText ? ( - - ) : undefined} - - - + {item.link && item.linkText ? ( + + + {item.img ? ( + + ) : null} + + + {item.titleImg ? ( + + ) : ( + item.title + )} + + + {item.text} + + {item.linkText ? ( + + ) : undefined} + + + + ) : ( + + + {item.img ? ( + + ) : null} + + + {item.titleImg ? ( + + ) : ( + item.title + )} + + + {item.text} + + + + + )} ) } diff --git a/frontend/components/Home/NaviCardList.tsx b/frontend/components/Home/NaviCardList.tsx index c346a84a9..358874641 100644 --- a/frontend/components/Home/NaviCardList.tsx +++ b/frontend/components/Home/NaviCardList.tsx @@ -12,9 +12,9 @@ import NaviTranslations from "/translations/navi" type NaviItem = { title: string text: string - linkText: string - img: string - link: string + linkText?: string + img?: string + link?: string } const NaviCardGrid = styled(Grid)` diff --git a/frontend/components/Home/WideNaviCard.tsx b/frontend/components/Home/WideNaviCard.tsx index a73638e20..1462ff65f 100644 --- a/frontend/components/Home/WideNaviCard.tsx +++ b/frontend/components/Home/WideNaviCard.tsx @@ -1,4 +1,4 @@ -import { ClickableDiv } from "components/Surfaces/ClickableCard" +import { ClickableDiv, ShadowedDiv } from "components/Surfaces/ClickableCard" import { CardTitle } from "components/Text/headers" import { Button, EnhancedLink, Grid, Link } from "@mui/material" @@ -20,6 +20,19 @@ const NaviItemBase = styled(ClickableDiv)` align-items: flex-start; ` +const NaviItemBaseNonClickable = styled(ShadowedDiv)` + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; + align-items: flex-start; +` + +const NoLinkContainer = styled("div")` + height: 100%; +` + const StyledLink = styled(Link)` color: black; text-decoration: none; @@ -28,10 +41,10 @@ const StyledLink = styled(Link)` type NaviItem = { title?: string text: string - linkText: string + linkText?: string img?: string imgDimensions?: { width: number; height: number } - link: string + link?: string titleImg?: string titleImgDimensions?: { width: number; height: number } } @@ -82,48 +95,92 @@ function WideNaviCard(props: NaviCardProps) { return ( - - - {item.img && ( - - )} - - {item.titleImg ? ( - - - - ) : ( - - {item.title} - + {item.link && item.linkText ? ( + + + {item.img && ( + )} - - {item.text} - - {item.linkText && ( - - {item.linkText} - + + {item.titleImg ? ( + + + + ) : ( + + {item.title} + + )} + + {item.text} + + {item.linkText && ( + + {item.linkText} + + )} + + + + ) : ( + + + {item.img && ( + )} - - - + + {item.titleImg ? ( + + + + ) : ( + + {item.title} + + )} + + {item.text} + + + + + )} ) } diff --git a/frontend/components/NewLayout/Common/LinkBox.tsx b/frontend/components/NewLayout/Common/LinkBox.tsx index d5a2795b0..1245b06ad 100644 --- a/frontend/components/NewLayout/Common/LinkBox.tsx +++ b/frontend/components/NewLayout/Common/LinkBox.tsx @@ -39,6 +39,18 @@ const LinkBoxContainer = styled("article")( `, ) +const LinkBoxContainerNonClickable = styled("article")( + ({ theme }) => ` + background-color: ${theme.palette.common.grayscale.backgroundBox}; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + position: relative; +`, +) + const LinkBoxContent = styled("div")` /* */ ` @@ -132,7 +144,7 @@ export interface LinkBoxProps { title: string titleImageProps?: ImageProps description?: string - linkProps: CTALinkProps + linkProps?: CTALinkProps } const LinkBox = ({ @@ -143,7 +155,7 @@ const LinkBox = ({ linkProps, ...props }: LinkBoxProps & PropsOf) => { - return ( + return linkProps ? ( {imageProps && ( @@ -166,6 +178,28 @@ const LinkBox = ({ + ) : ( + + + {imageProps && ( + + + + )} + + {titleImageProps ? ( + + + + ) : ( + {title} + )} + {description && ( + {description} + )} + + + ) } diff --git a/frontend/components/NewLayout/Common/LinkBoxList.tsx b/frontend/components/NewLayout/Common/LinkBoxList.tsx index 9d57c3bbe..3fd711cb6 100644 --- a/frontend/components/NewLayout/Common/LinkBoxList.tsx +++ b/frontend/components/NewLayout/Common/LinkBoxList.tsx @@ -86,7 +86,13 @@ const LinkBoxList = (props: LinkBoxListProps) => { )) : items?.map((item) => ( -
  • +
    • ))} diff --git a/frontend/components/NewLayout/Frontpage/Hype.tsx b/frontend/components/NewLayout/Frontpage/Hype.tsx index 1b518a3b0..efe9bf742 100644 --- a/frontend/components/NewLayout/Frontpage/Hype.tsx +++ b/frontend/components/NewLayout/Frontpage/Hype.tsx @@ -12,9 +12,9 @@ import NaviTranslations from "/translations/navi" type NaviItem = { title: string text: string - linkText: string - img: string - link: string + linkText?: string + img?: string + link?: string } /*type CustomNaviItem = { @@ -44,10 +44,13 @@ function Hype() { alt: item.title, fill: true },*/ - linkProps: { - href: link, - children: linkText, - }, + linkProps: + link && linkText + ? { + href: link, + children: linkText, + } + : undefined, })), [items], ) diff --git a/frontend/translations/navi/fi.ts b/frontend/translations/navi/fi.ts index 95e0b8b30..95c5f5b5f 100644 --- a/frontend/translations/navi/fi.ts +++ b/frontend/translations/navi/fi.ts @@ -1,33 +1,30 @@ export default { naviItems: [ { - title: "Kaikille avoimia kursseja", - text: "Verkko-oppimista parhaimmillaan. Älä huolehdi kurssimaksuista tai koulumatkoista, vaan opiskele siellä missä sinulle sopii. MOOCit eli kaikille avoimet verkkokurssit (Massive Open Online Course) ovat nimensä mukaisesti avoimia, ilmaisia ja verkkopohjaisia kursseja.", + title: "Avoimia kursseja, kaikille", + text: "Kurssimme ovat avoinna kaikille ilman osallistumismaksuja. Voit selata materiaaleja myös ilman tunnuksia.", linkText: "Kurssit", img: "AllCourses.webp", link: "#courses", }, { - title: "Ensimmäisen vuoden opinnot kaikille", - text: "Digital Education for All -hanke avaa tietojenkäsittelytieteen ensimmäisen vuoden kaikille. Helsingin yliopiston johtamassa Digital Education for All -hankkeessa ovat myös mukana Aalto-yliopisto, Jyväskylän yliopisto, Oulun yliopisto ja Turun yliopisto.", - linkText: "DEFA-hanke", - img: "DEFA.webp", - link: "https://www.helsinki.fi/fi/projektit/digital-education-for-all", + title: "Yliopisto-opetusta, kotonasi", + text: "Opiskele yliopistokursseja missä vain. Suorituksen rekisteröimällä saat opinnoistasi myös opintopisteitä.", }, { - title: "Opeta kursseja omassa luokassasi", - text: "Opettaja! Haluatko kurssimme luokkaasi omilla pistelistoillasi ja omalla aikataulullasi. Kaikkia kurssejamme saa käyttää osana omaa opetustaan. Katso lisää Opettajalle-sivulta!", - linkText: "Opettajien sivut", - img: "Opettajien.webp", - link: "/teachers", - }, - { - title: "Opiskele kokonaisuuksia", - text: "Kokoa oma kurssivalikoimasi laajemmista opintokokonaisuuksista.", + title: "Kokonaisuuksia tai yksittäisiä kursseja", + text: "Voit suorittaa joko laajemman kokoelman kursseja, tai poimia valikoimastamme vain sinua kiinnostavat kurssit.", linkText: "Opintokokonaisuudet", img: "taydennysKoulutus.webp", link: "#modules", }, + { + title: "Käytä kurssejamme opetuksessasi", + text: "Haluatko kurssimme luokkaasi omilla pistelistoillasi? Katso lisää Opettajalle-sivulta! ", + linkText: "Opettajien sivut", + img: "Opettajien.webp", + link: "/teachers", + }, ], customNaviItems: [ { From eb339524ff3637b02c2f3523ec0fd3aad199db7f Mon Sep 17 00:00:00 2001 From: Antti Leinonen Date: Wed, 4 Oct 2023 15:19:20 +0300 Subject: [PATCH 3/3] Remove unused variable --- .../components/NewLayout/Modules/StudyModuleListItem.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx index 4c7169045..2627e3019 100644 --- a/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx +++ b/frontend/components/NewLayout/Modules/StudyModuleListItem.tsx @@ -112,14 +112,6 @@ const ImageBackgroundBase = css` z-index: -5; ` -const ImageBackground = styled("span", { - shouldForwardProp: (prop) => prop !== "src", -})<{ src: string }>` - ${ImageBackgroundBase.styles}; - filter: brightness(0) invert(1) opacity(20%); - background-image: url(${(props) => props.src}); -` - const SkeletonBackground = styled("span")` ${ImageBackgroundBase.styles}; background-color: #eee;