Commit 1c77da20 authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

fix: Standardize card view across chrome and firefox

parent 4f2e266a

package.json

+4 −4
Original line number Diff line number Diff line
@@ -8,17 +8,17 @@ 
    "dev": "astro dev --host --open",

    "dev:mac": "astro dev --host",

    "predownload": "npm run clean",

    "download": "./acorn download --buckets buckets.json --output src/data",

    "download": "acorn.exe download --buckets buckets.json --output src/data",

    "postdownload": "run-s format copy",

    "start": "astro dev",

    "build:pdf": "./acorn export src/data --output public/pdf",

    "build:pdf": "acorn.exe export src/data --output public/pdf",

    "build:src": "astro build",

    "build": "run-p build:*",

    "preview": "astro preview",

    "astro": "astro",

    "format": "./acorn format src/data --ignore highlight -vv",

    "format": "acorn.exe format src/data --ignore highlight -vv",

    "lint:code": "eslint --fix --config ./eslint.config.js",

    "lint:data": "./acorn check src/data",

    "lint:data": "acorn.exe check src/data",

    "lint": "run-p lint:*"

  },

  "dependencies": {

src/components/Catalog.astro

+6 −0
Original line number Diff line number Diff line
@@ -36,11 +36,17 @@ const { items } = Astro.props; 
        overflow: hidden;

        &:hover {

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

            top: -5px;

        }

        & img {

            height: 100%;

        }

    }

    .card-image {

        background-position: center center;

        background-size: cover;

        height: 300px;

    }

    .card-title {

        -webkit-line-clamp: 1;

        line-clamp: 1;

src/components/Listing.tsx

+4 −1
Original line number Diff line number Diff line
@@ -39,12 +39,15 @@ 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 style: CSSProperties = {

        "backgroundImage": `url(${src})`

    };

    const onClick = () => {

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

    };

    return (

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

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

            <div className="card-image" style={style} title={caption}></div>

            <CardHeader>

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

                <CardDescription className="card-description">{item.subtitle}</CardDescription>