Skip to content

Enhanced Catalogue Browser #14

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

Merged
merged 14 commits into from
Jul 13, 2025
Merged

Enhanced Catalogue Browser #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
30c51d3
Merge pull request #8 from ArchAIve-Project/main
JunHammy Jul 10, 2025
e095c1c
Removed chevrons and allowed scrolling for mobile view of catalogueIt…
JunHammy Jul 10, 2025
1d046a1
Removed arrow overlay and allow scrolling for mobile view of catalogue
JunHammy Jul 10, 2025
2db90e9
Removed arrow overlay for MMSection if isMobile
JunHammy Jul 10, 2025
6eff800
Fixed scrollings for mobile view
JunHammy Jul 10, 2025
e6e3874
Made catalogueItemView overlay scrollable using arrow keys
JunHammy Jul 10, 2025
21eda36
Fixed background scrolling when catalogueItemView is scrolling using …
JunHammy Jul 10, 2025
f1788b6
Merge pull request #13 from ArchAIve-Project/main
JunHammy Jul 11, 2025
9f6018e
Added skeleton for cardItem
JunHammy Jul 11, 2025
a8acc0d
Added swipe animation for catalogueItemView
JunHammy Jul 11, 2025
dd05ec1
Tidy up code for catalogueItemView
JunHammy Jul 11, 2025
d6ec960
Updated motion() to use motion.create() instead
JunHammy Jul 11, 2025
a142d4c
Shifted cardItem card into new cardComponent
JunHammy Jul 12, 2025
55953b1
Fixed height for skeleton and image in skeleton
JunHammy Jul 12, 2025
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
30 changes: 30 additions & 0 deletions src/components/Catalogue/cardComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Card, Image, Text, Skeleton } from "@chakra-ui/react";

const CardComponent = ({ imageSrc, itemTitle, itemDescription, isLoading, setIsLoading, isSelected, expanded }) => {
return (
<Card.Root overflow="hidden" boxShadow={isSelected ? "lg" : "md"} transition="all 0.3s ease-in-out">
<Skeleton loading={isLoading} height="180px">
<Image
src={imageSrc}
alt={itemTitle}
loading="lazy"
onLoad={() => setIsLoading(false)}
height="180px"
width="100%"
/>
</Skeleton>
<Card.Body>
<Skeleton loading={isLoading}>
<Card.Title>{itemTitle}</Card.Title>
</Skeleton>
{expanded && (
<Skeleton loading={isLoading} mt={2}>
<Text>{itemDescription}</Text>
</Skeleton>
)}
</Card.Body>
</Card.Root>
);
};

export default CardComponent;
125 changes: 63 additions & 62 deletions src/components/Catalogue/cardItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// CardItem.jsx
import { Box, Card, Image, Text } from "@chakra-ui/react";
import React, { useState, useRef, useEffect } from "react";
import { Box, useBreakpointValue } from "@chakra-ui/react";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import CardComponent from "./cardComponent";

const MotionBox = motion.create(Box);

Expand All @@ -13,8 +13,12 @@ const images = [
];

const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
const isMobile = useBreakpointValue({ base: true, md: false });

const [isHovered, setIsHovered] = useState(false);
const [isSelected, setIsSelected] = useState(selectedTitle === itemTitle);
const [isLoading, setIsLoading] = useState(true);

const cardRef = useRef(null);
const [hoverPos, setHoverPos] = useState({ top: 0, left: 0 });
const scrollContainerRef = useRef(null);
Expand All @@ -24,6 +28,12 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
setIsSelected(selectedTitle === itemTitle);
}, [selectedTitle, itemTitle]);

const imageSrc = images[index % images.length];

useEffect(() => {
setIsLoading(true);
}, [imageSrc]);

const updateHoverPosition = () => {
const rect = cardRef.current?.getBoundingClientRect();
if (rect) {
Expand All @@ -47,6 +57,7 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
};

const handleMouseEnter = () => {
if (isMobile) return;
hoverTimeoutRef.current = setTimeout(() => {
updateHoverPosition();
setIsHovered(true);
Expand All @@ -59,7 +70,7 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
};

useEffect(() => {
if (isHovered) {
if (isHovered && !isMobile) {
let node = cardRef.current;
while (node) {
const style = window.getComputedStyle(node);
Expand All @@ -78,26 +89,18 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
window.addEventListener("scroll", updateHoverPosition, true);
window.addEventListener("resize", updateHoverPosition);
if (scrollContainerRef.current) {
scrollContainerRef.current.addEventListener(
"scroll",
updateHoverPosition
);
scrollContainerRef.current.addEventListener("scroll", updateHoverPosition);
}

return () => {
window.removeEventListener("scroll", updateHoverPosition, true);
window.removeEventListener("resize", updateHoverPosition);
if (scrollContainerRef.current) {
scrollContainerRef.current.removeEventListener(
"scroll",
updateHoverPosition
);
scrollContainerRef.current.removeEventListener("scroll", updateHoverPosition);
}
};
}
}, [isHovered]);

const imageSrc = images[index % images.length];
}, [isHovered, isMobile]);

return (
<>
Expand All @@ -114,55 +117,53 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, index }) => {
borderRadius="md"
boxShadow={isSelected ? "lg" : "md"}
>
<Card.Root
overflow="hidden"
boxShadow={isSelected ? "lg" : "md"}
transition="all 0.3s ease-in-out"
>
<Image src={imageSrc} alt={itemTitle} />
<Card.Body>
<Card.Title>{itemTitle}</Card.Title>
</Card.Body>
</Card.Root>
<CardComponent
imageSrc={imageSrc}
itemTitle={itemTitle}
itemDescription={itemDescription}
isLoading={isLoading}
setIsLoading={setIsLoading}
isSelected={isSelected}
expanded={false}
/>
</Box>

<AnimatePresence>
{isHovered && (
<MotionBox
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1.1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.25, ease: "easeInOut" }}
style={{
transformOrigin: "top center",
position: "fixed",
top: hoverPos.top,
left: hoverPos.left + 15,
zIndex: 10,
pointerEvents: "auto",
width: "280px",
}}
onMouseLeave={handleMouseLeave}
onMouseEnter={() => setIsHovered(true)}
borderRadius="md"
border={isSelected ? "1px solid" : "none"}
borderColor={isSelected ? "blue.600" : "transparent"}
boxShadow={
isSelected
? "0 0 15px 2px rgba(66,153,225,0.6)"
: "2xl"
}
>
<Card.Root overflow="hidden">
<Image src={imageSrc} alt={itemTitle} />
<Card.Body>
<Card.Title>{itemTitle}</Card.Title>
<Text mt={2}>{itemDescription}</Text>
</Card.Body>
</Card.Root>
</MotionBox>
)}
</AnimatePresence>
{!isMobile && (
<AnimatePresence>
{isHovered && (
<MotionBox
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1.1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.25, ease: "easeInOut" }}
style={{
transformOrigin: "top center",
position: "fixed",
top: hoverPos.top,
left: hoverPos.left + 15,
zIndex: 10,
pointerEvents: "auto",
width: "280px",
}}
onMouseLeave={handleMouseLeave}
onMouseEnter={() => setIsHovered(true)}
borderRadius="md"
border={isSelected ? "1px solid" : "none"}
borderColor={isSelected ? "blue.600" : "transparent"}
boxShadow={isSelected ? "0 0 15px 2px rgba(66,153,225,0.6)" : "2xl"}
>
<CardComponent
imageSrc={imageSrc}
itemTitle={itemTitle}
itemDescription={itemDescription}
isLoading={isLoading}
isSelected={isSelected}
expanded={true}
/>
</MotionBox>
)}
</AnimatePresence>
)}
</>
);
};
Expand Down
Loading