Commit 6e7a843f authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

feat: Add shadow to cards; Make entire card click-able link

parent 6f71c604

src/components/Catalog.astro

+4 −0
Original line number Diff line number Diff line
@@ -25,6 +25,7 @@ const { items } = Astro.props; 
        margin: 10px;

    }

    .card-container {

        cursor: pointer;

        display: flex;

        position: relative;

        flex-direction: column;
@@ -33,6 +34,9 @@ const { items } = Astro.props; 
        width: 30%;

        min-width: 280px;

        overflow: hidden;

        &:hover {

            box-shadow: 0px 8px 12px 4px #DDD;

        }

        & img {

            height: 100%;

        }

src/components/Listing.tsx

+4 −1
Original line number Diff line number Diff line
@@ -33,8 +33,11 @@ const CardItem = ({ item }) => { 
    const id = item.meta.identifier;

    const src = `/data/${id}/${item.meta.media[0].contentUrl}`;

    const caption = item.meta.media[0].caption;

    const onClick = () => {

        window.location.href = `${origin}/${id}`;

    };

    return (

        <Card className="card-container" key={id}>

        <Card className="card-container" key={id} onClick={onClick}>

            <img src={src} alt={caption} title={caption} />

            <CardHeader>

                <CardTitle className="card-title"><a href={`/${id}`}>{item?.title}</a></CardTitle>