Merge pull request #133 from aodn/bugfix/5807-fix-landing-page

🐛 fix browser compatibility and footer
aodn · Aug 27, 2024 · c3ae92a · c3ae92a
2 parents 44a7d57 + 09272b9
commit c3ae92a
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 68 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,11 +5,13 @@ import Fallback from "./pages/Fallback";
 import { ThemeProvider } from "@mui/material/styles";
 import AppTheme from "./utils/AppTheme";
 import AppRouter from "./utils/AppRouter";
+import { CssBaseline } from "@mui/material";
 
 const app = () => {
   return (
     <div>
       <ThemeProvider theme={AppTheme}>
+        <CssBaseline />
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
       </ThemeProvider>
     </div>

diff --git a/src/components/layout/components/Footer.tsx b/src/components/layout/components/Footer.tsx
@@ -8,6 +8,7 @@ import {
   IconButton,
   InputBase,
   Paper,
+  SxProps,
   Typography,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
@@ -24,11 +25,22 @@ import {
   color,
   fontSize,
   gap,
+  margin,
   padding,
 } from "../../../styles/constants";
 import AODNSiteLogo from "./AODNSiteLogo";
 import SectionContainer from "./SectionContainer";
 
+interface IconContainerProps {
+  children: JSX.Element;
+  sx?: SxProps;
+}
+const IconContainer: FC<IconContainerProps> = ({ children, sx }) => (
+  <Icon sx={{ color: "#000", display: "flex", alignItems: "center", ...sx }}>
+    {children}
+  </Icon>
+);
+
 const handleBackToTop = () => {
   window.scrollTo({
     top: 0,
@@ -37,6 +49,7 @@ const handleBackToTop = () => {
 };
 
 const currentYear = dayjs(new Date()).year();
+const version = import.meta.env.VITE_APP_VERSION;
 
 const Footer: FC = () => {
   return (
@@ -46,18 +59,18 @@ const Footer: FC = () => {
           <AODNSiteLogo />
           <Box>
             <Button>
-              <Icon sx={{ color: "#000", paddingBottom: padding.small }}>
+              <IconContainer>
                 <MenuIcon fontSize="small" />
-              </Icon>
-              <Typography color="#000" paddingTop={gap.md}>
+              </IconContainer>
+              <Typography color="#000" paddingTop={0}>
                 Site Menu
               </Typography>
             </Button>
             <Button onClick={handleBackToTop}>
-              <Icon sx={{ color: "#000", paddingBottom: padding.small }}>
+              <IconContainer>
                 <NorthIcon fontSize="small" />
-              </Icon>
-              <Typography color="#000" paddingTop={gap.md}>
+              </IconContainer>
+              <Typography color="#000" paddingTop={0}>
                 Back to Top
               </Typography>
             </Button>
@@ -106,9 +119,11 @@ const Footer: FC = () => {
                     overflow: "hidden",
                   }}
                 >
-                  <Icon sx={{ p: padding.extraSmall, pb: "8px" }}>
+                  <IconContainer
+                    sx={{ marginX: margin.lg, color: color.blue.extraDark }}
+                  >
                     <MailOutlineIcon />
-                  </Icon>
+                  </IconContainer>
                   <InputBase
                     sx={{ flex: 1, p: 0 }}
                     placeholder="[email protected]"
@@ -171,7 +186,8 @@ const Footer: FC = () => {
           <Grid container>
             <Grid item xs={6}>
               <Typography color="#000" fontSize={fontSize.subscription}>
-                @IMOS {currentYear}
+                Copyright © {currentYear}. All rights reserved. Version :&nbsp;
+                {version}
               </Typography>
             </Grid>
             <Grid

diff --git a/src/components/layout/components/Header.tsx b/src/components/layout/components/Header.tsx
@@ -1,7 +1,6 @@
-import { Box } from "@mui/material";
-
-import MainMenu from "../../menu/MainMenu";
 import { FC } from "react";
+import { Box } from "@mui/material";
+import MainMenu from "./MainMenu";
 import { padding } from "../../../styles/constants";
 import AODNSiteLogo from "./AODNSiteLogo";
 

diff --git a/src/components/menu/MainMenu.tsx → ...components/layout/components/MainMenu.tsx b/src/components/menu/MainMenu.tsx → ...components/layout/components/MainMenu.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import PlainMenu, { type Menu } from "./PlainMenu";
+import PlainMenu, { type Menu } from "../../menu/PlainMenu";
 import { Stack } from "@mui/material";
 
 // TODO: implement items abd handlers once the menu function is designed

diff --git a/src/pages/landing-page/subpages/smartpanel/SmartPanel.tsx b/src/pages/landing-page/subpages/smartpanel/SmartPanel.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useRef } from "react";
+import { FC, useCallback, useMemo, useRef } from "react";
 import ImageList from "@mui/material/ImageList";
 import ImageListItem from "@mui/material/ImageListItem";
 import Box from "@mui/material/Box";
@@ -7,21 +7,30 @@ import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { color, gap } from "../../../../styles/constants";
 import {
-  DEFAULT_CARD_SIZE,
-  DEFAULT_GAP,
+  SMART_PANEL_CARD_SIZE,
+  SMART_PANEL_GAP,
   ITEM_DATA,
   ItemType,
   SCROLL_DISTANCE,
   SMART_PANEL_HEIGHT,
   SMART_PANEL_WIDTH,
 } from "./constants";
-import { getItemCols, getItemRows } from "./utils";
+import {
+  calculateImageListWidth,
+  calculateTotalCols,
+  getItemCols,
+  getItemRows,
+} from "./utils";
 import SmallCard from "./components/SmallCard";
 import MediumCard from "./components/MediumCard";
 import LargeCard from "./components/LargeCard";
 
 const SmartPanel: FC = () => {
   const boxRef = useRef<HTMLDivElement>(null);
+
+  const imageListTotalCols = useMemo(() => calculateTotalCols(ITEM_DATA), []);
+  const imageListWidth = useMemo(() => calculateImageListWidth(ITEM_DATA), []);
+
   const handleScroll = useCallback(
     (scrollOffset: number) => {
       if (boxRef && boxRef.current) {
@@ -60,7 +69,7 @@ const SmartPanel: FC = () => {
       >
         <ImageList
           sx={{
-            width: "fit-content",
+            width: imageListWidth,
             height: SMART_PANEL_HEIGHT,
             m: 0,
             p: 0,
@@ -71,9 +80,9 @@ const SmartPanel: FC = () => {
             "scrollbar-width": "none",
           }}
           variant="quilted"
-          cols={18}
-          rowHeight={DEFAULT_CARD_SIZE}
-          gap={DEFAULT_GAP}
+          cols={imageListTotalCols}
+          rowHeight={SMART_PANEL_CARD_SIZE}
+          gap={SMART_PANEL_GAP}
         >
           {ITEM_DATA.map((item) => (
             <ImageListItem
@@ -82,9 +91,10 @@ const SmartPanel: FC = () => {
               rows={getItemRows(item.type)}
               sx={{
                 width:
-                  item.type === ItemType.small
-                    ? DEFAULT_CARD_SIZE
-                    : getItemCols(item.type) * DEFAULT_CARD_SIZE + DEFAULT_GAP,
+                  item.type === ItemType.Small
+                    ? SMART_PANEL_CARD_SIZE
+                    : getItemCols(item.type) * SMART_PANEL_CARD_SIZE +
+                      SMART_PANEL_GAP,
               }}
             >
               {item.type === "small" && <SmallCard cardData={item} />}

diff --git a/src/pages/landing-page/subpages/smartpanel/components/CardContainer.tsx b/src/pages/landing-page/subpages/smartpanel/components/CardContainer.tsx
@@ -20,6 +20,7 @@ const CardContainer: FC<CardContainerProps> = ({
       flexDirection: "column",
       justifyContent: "center",
       alignItems: "center",
+      overflow: "hidden",
       bgcolor: color.white.twoTenTransparent,
       border: `${border.xs} ${color.brightBlue.semiTransparentDark}`,
       color: "#fff",