Changed positions of DayTwo circles for mobile

HackAtUCI · Nov 1, 2024 · d789e3f · d789e3f
1 parent 300e8d5
commit d789e3f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/apps/site/src/app/schedule/Assets/Circle.tsx b/apps/site/src/app/schedule/Assets/Circle.tsx
@@ -55,7 +55,7 @@ const EventCircle: React.FC<CircleProps> = ({
 					}
 				></div>
 			)}
-			<div className={styles.textContainer} style={up ? { top: "-155px" } : {}}>
+			<div className={styles.textContainer} style={up ? { top: "-145px" } : {}}>
 				<h5 className={styles.title}>{title}</h5>
 				<p className={styles.location}>{location}</p>
 				<p className={styles.time}>{convertTime(startTime, endTime)}</p>

diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
@@ -8,28 +8,47 @@ import MobilePath from "@/assets/images/map2/map_2_path_mobile.png";
 import styles from "./DayTwo.module.scss";
 import Image from "next/image";
 import EventCircle from "../Assets/Circle";
+import useWindowWidth from "@/lib/useWindowWidth";
 
 interface DayTwoProps {
 	schedule: Array<any>;
 	time: number;
 }
 
 const DayTwo: React.FC<DayTwoProps> = ({ schedule, time }) => {
-	const positions = [
-		{ top: "-0.5%", left: "16%" },
-		{ top: "1.5%", left: "60%" },
-		{ top: "13.5%", left: "65%" },
-		{ top: "24%", left: "55%" },
-		{ top: "28.5%", left: "32%" },
-		{ top: "43%", left: "23%" },
-		{ top: "44.8%", left: "60%" },
-		{ top: "59.5%", left: "38%" },
-		{ top: "70%", left: "30%" },
-		{ top: "80.5%", left: "70%" },
-		{ top: "82.5%", left: "20%" },
-		{ top: "95%", left: "50%" },
-		{ top: "99%", left: "92%" },
-	];
+	const windowWidth = useWindowWidth();
+	const positions =
+		windowWidth > 768
+			? [
+					{ top: "-0.5%", left: "16%" },
+					{ top: "1.5%", left: "60%" },
+					{ top: "13.5%", left: "65%" },
+					{ top: "24%", left: "55%" },
+					{ top: "28.5%", left: "32%" },
+					{ top: "43%", left: "23%" },
+					{ top: "44.8%", left: "60%" },
+					{ top: "59.5%", left: "38%" },
+					{ top: "70%", left: "30%" },
+					{ top: "80.5%", left: "70%" },
+					{ top: "82.5%", left: "20%" },
+					{ top: "95%", left: "50%" },
+					{ top: "99%", left: "92%" },
+				]
+			: [
+					{ top: "-0.5%", left: "16%" },
+					{ top: "-0.4%", left: "70%" },
+					{ top: "13.5%", left: "65%" },
+					{ top: "20%", left: "18%" },
+					{ top: "28%", left: "32%" },
+					{ top: "43%", left: "23%" },
+					{ top: "50%", left: "74%" },
+					{ top: "59%", left: "38%" },
+					{ top: "71%", left: "30%" },
+					{ top: "80.5%", left: "70%" },
+					{ top: "82.5%", left: "20%" },
+					{ top: "94%", left: "10%" },
+					{ top: "98.5%", left: windowWidth < 576 ? "82%" : "90%" },
+				];
 	return (
 		<>
 			<div className={styles.mapContainer}>