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

Jump to bottom

Newlayout improvements #1244

Merged
merged 3 commits into from
Oct 4, 2023
Merged

Newlayout improvements #1244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33acfe4
Remove background pattern
Redande Oct 4, 2023
e320b6b
Update hero text boxes
Redande Oct 4, 2023
eb33952
Remove unused variable
Redande Oct 4, 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
133 changes: 91 additions & 42 deletions frontend/components/Home/NaviCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"

Expand All @@ -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%;
`
Expand All @@ -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
}

Expand Down Expand Up @@ -82,44 +95,80 @@ function NaviCard(props: NaviCardProps) {

return (
<Grid item {...gridProps}>
<StyledLink href={item.link} aria-label={item.linkText}>
<NaviItemBase>
{item.img ? (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
priority
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
fill
/>
) : null}
<NaviItemTextBackground>
<NaviItemCardTitle component="h2" variant="h3" align="left">
{item.titleImg ? (
<TitleImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
priority
alt={item.title}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
) : (
item.title
)}
</NaviItemCardTitle>
<NaviItemCardText paragraph variant="body1" align="left">
{item.text}
</NaviItemCardText>
{item.linkText ? (
<Button fullWidth aria-disabled="true">
{item.linkText}
</Button>
) : undefined}
</NaviItemTextBackground>
</NaviItemBase>
</StyledLink>
{item.link && item.linkText ? (
<StyledLink href={item.link} aria-label={item.linkText}>
<NaviItemBase>
{item.img ? (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
priority
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
fill
/>
) : null}
<NaviItemTextBackground>
<NaviItemCardTitle component="h2" variant="h3" align="left">
{item.titleImg ? (
<TitleImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
priority
alt={item.title}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
) : (
item.title
)}
</NaviItemCardTitle>
<NaviItemCardText paragraph variant="body1" align="left">
{item.text}
</NaviItemCardText>
{item.linkText ? (
<Button fullWidth aria-disabled="true">
{item.linkText}
</Button>
) : undefined}
</NaviItemTextBackground>
</NaviItemBase>
</StyledLink>
) : (
<NoLinkContainer>
<NaviItemBaseNonClickable>
{item.img ? (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
priority
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
fill
/>
) : null}
<NaviItemTextBackground>
<NaviItemCardTitle component="h2" variant="h3" align="left">
{item.titleImg ? (
<TitleImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
priority
alt={item.title}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
) : (
item.title
)}
</NaviItemCardTitle>
<NaviItemCardText paragraph variant="body1" align="left">
{item.text}
</NaviItemCardText>
</NaviItemTextBackground>
</NaviItemBaseNonClickable>
</NoLinkContainer>
)}
</Grid>
)
}
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/Home/NaviCardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand Down
143 changes: 100 additions & 43 deletions frontend/components/Home/WideNaviCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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;
Expand All @@ -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 }
}
Expand Down Expand Up @@ -82,48 +95,92 @@ function WideNaviCard(props: NaviCardProps) {

return (
<Grid item xs={12}>
<StyledLink href={item.link} prefetch={false} aria-label={item.linkText}>
<NaviItemBase>
{item.img && (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
aria-hidden
{...(item.imgDimensions ?? { fill: true })}
/>
)}
<Background>
{item.titleImg ? (
<TitleImageContainer>
<ContainedImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
alt={item.title ?? ""}
{...(item.titleImgDimensions ?? {
sizes:
"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
fill: true,
})}
/>
</TitleImageContainer>
) : (
<WideNaviCardTitle component="h2" variant="h3" align="left">
{item.title}
</WideNaviCardTitle>
{item.link && item.linkText ? (
<StyledLink
href={item.link}
prefetch={false}
aria-label={item.linkText}
>
<NaviItemBase>
{item.img && (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
aria-hidden
{...(item.imgDimensions ?? { fill: true })}
/>
)}
<WideNaviCardText paragraph variant="body1" align="left">
{item.text}
</WideNaviCardText>
{item.linkText && (
<WideNaviCardbutton aria-disabled>
{item.linkText}
</WideNaviCardbutton>
<Background>
{item.titleImg ? (
<TitleImageContainer>
<ContainedImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
alt={item.title ?? ""}
{...(item.titleImgDimensions ?? {
sizes:
"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
fill: true,
})}
/>
</TitleImageContainer>
) : (
<WideNaviCardTitle component="h2" variant="h3" align="left">
{item.title}
</WideNaviCardTitle>
)}
<WideNaviCardText paragraph variant="body1" align="left">
{item.text}
</WideNaviCardText>
{item.linkText && (
<WideNaviCardbutton aria-disabled>
{item.linkText}
</WideNaviCardbutton>
)}
</Background>
</NaviItemBase>
</StyledLink>
) : (
<NoLinkContainer>
<NaviItemBaseNonClickable>
{item.img && (
<BackgroundImage
src={require(`/public/images/navi/${item.img}`)}
placeholder="blur"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
alt=""
aria-hidden
{...(item.imgDimensions ?? { fill: true })}
/>
)}
</Background>
</NaviItemBase>
</StyledLink>
<Background>
{item.titleImg ? (
<TitleImageContainer>
<ContainedImage
src={require(`/public/images/navi/${item.titleImg}`)}
placeholder="blur"
alt={item.title ?? ""}
{...(item.titleImgDimensions ?? {
sizes:
"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
fill: true,
})}
/>
</TitleImageContainer>
) : (
<WideNaviCardTitle component="h2" variant="h3" align="left">
{item.title}
</WideNaviCardTitle>
)}
<WideNaviCardText paragraph variant="body1" align="left">
{item.text}
</WideNaviCardText>
</Background>
</NaviItemBaseNonClickable>
</NoLinkContainer>
)}
</Grid>
)
}
Expand Down
Loading