Newlayout improvements (#1244)

* Remove background pattern * Update hero text boxes * Remove unused variable
rage · Oct 4, 2023 · 26c96c0 · 26c96c0
1 parent a73770a
commit 26c96c0
Show file tree

Hide file tree

Showing 14 changed files with 263 additions and 143 deletions.
diff --git 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 (
     <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>
   )
 }

diff --git 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
@@ -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 (
     <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>
   )
 }