Merge pull request #132 from EnigmaVSSUT/dev-v2

fix: teams page responsive
EnigmaVSSUT · Feb 29, 2024 · b3970b2 · b3970b2
2 parents ca615f5 + 7210824
commit b3970b2
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/team/components/AllTeams.jsx b/src/app/team/components/AllTeams.jsx
@@ -8,7 +8,7 @@ import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function AllTeam() {
 	const [member, setMember] = useState([]);
-	const { isTablet } = useResponsive();
+	const { isTablet, fontSize, fontWeight } = useResponsive();
 
 	useEffect(() => {
 		const getTeam = async () => {
@@ -19,10 +19,19 @@ export default function AllTeam() {
 		getTeam();
 	}, []);
 
+	console.log("fontSize", fontSize);
+
 	return (
 		<AnimatePage>
 			<Stack justifyContent={"center"} alignItems={"center"} gap={10}>
-				<Typography variant={isTablet ? "h4" : "h2"} color={"#fff"}>
+				<Typography
+					sx={{
+						fontSize: fontSize,
+						fontWeight: fontWeight,
+						textAlign: "center",
+						color: "#fff",
+					}}
+				>
 					Team Enigma
 				</Typography>
 

diff --git a/src/app/team/components/MemberCard.jsx b/src/app/team/components/MemberCard.jsx
@@ -11,113 +11,143 @@ import LanguageIcon from "@mui/icons-material/Language";
 import AndroidIcon from "@mui/icons-material/Android";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import style from "../team.module.css";
+import Link from '@mui/material/Link';
+import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function MemberCard({ memberImage, memberName, memberUsername }) {
 	const profileRedirect = () => {
 		const newPageUrl = "/profile/" + memberUsername;
 		window.open(newPageUrl, "_blank");
 	};
 
+	const {isTablet} = useResponsive();
+
 	return (
-		<Card
-			className={cardStyles.memberCard}
-			sx={{
-				borderRadius: "15px",
-				padding: "3rem",
-				direction: "column",
-				gap: "5px",
-				alignItems: "center",
-				justifyContent: "center",
-				position: "relative",
-				minWidth: "300px",
-				minHeight: "350px",
-			}}
-		>
-			<Stack
-				position={"absolute"}
-				height={"fit-content"}
-				width={"fit-content"}
-				left={20}
-				top={20}
-			>
-				<Typography variant="h6">🎯</Typography>
-			</Stack>
-			<Stack
-				direction={"column"}
-				gap={3}
-				justifyContent={"center"}
-				alignItems={"center"}
-			>
-				<Avatar
-					alt={memberName}
-					sx={{ width: 100, height: 100 }}
-					src={memberImage}
-				/>
+		<>
+		{
+			isTablet ? (
+				<Stack gap={2} paddingBottom={2}>
+					<div className={style.mobileTeams}>
 
+					<Avatar
+						alt={memberName}
+						sx={{ width: 100, height: 100 }}
+						src={memberImage}
+						/>
+						<Typography 
+						component={Button}
+						padding={0}
+						onClick={profileRedirect}
+						 variant="caption">
+							{memberName}
+						</Typography>
+						</div>
+				</Stack>
+			):(
+				<Card
+				className={cardStyles.memberCard}
+				sx={{
+					borderRadius: "15px",
+					padding: "3rem",
+					direction: "column",
+					gap: "5px",
+					alignItems: "center",
+					justifyContent: "center",
+					position: "relative",
+					minWidth: "300px",
+					minHeight: "350px",
+				}}
+			>
 				<Stack
-					className={cardStyles.overlay}
 					position={"absolute"}
-					bottom={0}
-					left={0}
-					right={0}
-					top={"55%"}
-					minHeight={"260px"}
+					height={"fit-content"}
+					width={"fit-content"}
+					left={20}
+					top={20}
+				>
+					<Typography variant="h6">🎯</Typography>
+				</Stack>
+				<Stack
 					direction={"column"}
+					gap={3}
+					justifyContent={"center"}
+					alignItems={"center"}
 				>
-					<IconButton
-							className={cardStyles.newtab}	
-							sx={{ position: "absolute", top: "0px", right: "10px" }}
-							variant="outlined"
-							onClick={profileRedirect}
-						>
-							<OpenInNewIcon style={{ color: "white", fontSize: "20px" }} />
-						</IconButton>
+					<Avatar
+						alt={memberName}
+						sx={{ width: 100, height: 100 }}
+						src={memberImage}
+					/>
+
 					<Stack
-						className="overlay-body"
-						position={"relative"}
-						gap={2}
-						marginTop={"1.5rem"}
-						alignItems={"center"}
+						className={cardStyles.overlay}
+						position={"absolute"}
+						bottom={0}
+						left={0}
+						right={0}
+						top={"55%"}
+						minHeight={"260px"}
+						direction={"column"}
 					>
-
-						<Typography className={cardStyles.memberName} textAlign={"center"} variant="body1">{memberName}</Typography>
-						<Typography variant="caption">Code and coffee is life!</Typography>
-						<Stack direction={"row"} gap={2}>
-							<IconButton
-							className={cardStyles.domainIcon}
-								sx={{
-									border: "1px solid",
-									borderColor: "divider",
-									borderRadius: "50%",
-								}}
+						<IconButton
+								className={cardStyles.newtab}	
+								sx={{ position: "absolute", top: "0px", right: "10px" }}
+								variant="outlined"
+								onClick={profileRedirect}
 							>
-								<LanguageIcon />
-							</IconButton>
-
-							<IconButton
-								sx={{
-									border: "1px solid",
-									borderColor: "divider",
-									borderRadius: "50%",
-								}}
-							>
-								<AndroidIcon />
-							</IconButton>
-
-							<IconButton
-								sx={{
-									border: "1px solid",
-									borderColor: "divider",
-									borderRadius: "50%",
-								}}
-							>
-								<SmartToyIcon />
+								<OpenInNewIcon style={{ color: "white", fontSize: "20px" }} />
 							</IconButton>
+						<Stack
+							className="overlay-body"
+							position={"relative"}
+							gap={2}
+							marginTop={"1.5rem"}
+							alignItems={"center"}
+						>
+
+							<Typography className={cardStyles.memberName} textAlign={"center"} variant="body1">{memberName}</Typography>
+							<Typography variant="caption">Code and coffee is life!</Typography>
+							<Stack direction={"row"} gap={2}>
+								<IconButton
+								className={cardStyles.domainIcon}
+									sx={{
+										border: "1px solid",
+										borderColor: "divider",
+										borderRadius: "50%",
+									}}
+								>
+									<LanguageIcon />
+								</IconButton>
+
+								<IconButton
+									sx={{
+										border: "1px solid",
+										borderColor: "divider",
+										borderRadius: "50%",
+									}}
+								>
+									<AndroidIcon />
+								</IconButton>
+
+								<IconButton
+									sx={{
+										border: "1px solid",
+										borderColor: "divider",
+										borderRadius: "50%",
+									}}
+								>
+									<SmartToyIcon />
+								</IconButton>
+							</Stack>
+
 						</Stack>
-
 					</Stack>
 				</Stack>
-			</Stack>
-		</Card>
+			</Card>
+			)
+		}
+
+		</>
 	);
 }
diff --git a/src/app/team/components/SideTab.jsx b/src/app/team/components/SideTab.jsx
@@ -67,7 +67,7 @@ export default function SideTab() {
 		<Stack
 		className={styles.drawer}
 					sx={{
-						minWidth: "16rem",
+						minWidth: "13rem",
 						height: "100vh",
 						top: "3.8rem",
 						left: "0",

diff --git a/src/app/team/team.module.css b/src/app/team/team.module.css
@@ -81,4 +81,14 @@
   backdrop-filter: blur( 12px );
   -webkit-backdrop-filter: blur( 20px );
   border: 1px solid rgba( 255, 255, 255, 0.18 );
+}
+
+.mobileTeams{
+  display: grid;
+  grid-template-columns: 2;
+  gap: 20px;
+  padding: 20px;
+  padding-top: 0;
+  justify-items: center;
+  align-items: center;
 }
diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.js
@@ -1,14 +1,31 @@
-import * as React from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { useEffect, useState } from "react";
 
 export const useResponsive = () => {
 	const isLaptop = useMediaQuery("(max-width:900px)");
 	const isTablet = useMediaQuery("(max-width:650px)");
-	const isMobile = useMediaQuery("(max-width:600px)");
+	const isMobile = useMediaQuery("(max-width:500px)");
+
+	let fontSize, lineHeight, fontWeight;
+
+	useEffect(() => {
+		window.addEventListener("resize", ()=>{});
+		return () => {
+			window.removeEventListener("resize", ()=>{});
+		}
+	},[]);
+
+
+	 fontSize = isMobile ? "1.4rem" : isTablet ? "2rem" : "2.5rem";
+	 lineHeight = isMobile ? "1.1rem" : isTablet ? "1.3rem" : "1.5rem";
+	 fontWeight = isMobile ? "200" : isTablet ? "300" : "400";
 
 	return {
 		isLaptop,
 		isTablet,
 		isMobile,
+		fontSize,
+		lineHeight,
+		fontWeight,
 	};
 };
diff --git a/src/ui/Header.jsx b/src/ui/Header.jsx
@@ -17,7 +17,7 @@ const DrawerList = ({ activeLink }) => (
 		direction="column"
 		gap="25px"
 		padding="20px"
-		width="230px"
+		width="210px"
 		alignItems="flex-start"
 		height={1}
 		position={"relative"}
@@ -46,7 +46,7 @@ const DrawerList = ({ activeLink }) => (
 		/>
 		<Stack
 			gap={4}
-			paddingLeft={5}
+			paddingLeft={4}
 			justifyContent={"center"}
 			alignItems={"start"}
 		>