Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image tile on Chromium browsers

This commit is contained in:
DrMint 2024-06-07 17:50:12 +02:00
parent 84b6823a55
commit 9d8a29e7bb
2 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/[locale]/collectibles/[slug]/_components/ImageTile.astro
View File

@ -11,7 +11,6 @@ interface Props {
title: string; title: string;
subtitle: string; subtitle: string;
href: string; href: string;
class?: string | undefined;
} }
const { const {
@ -19,13 +18,12 @@ const {
title, title,
subtitle, subtitle,
href, href,
...otherProps
} = Astro.props; } = Astro.props;
--- ---
{/* ------------------------------------------- HTML ------------------------------------------- */} {/* ------------------------------------------- HTML ------------------------------------------- */}
<a href={href} {...otherProps.class ? otherProps : {}}> <a href={href}>
<img <img
src={url} src={url}
srcset={sizesToSrcset(sizes)} srcset={sizesToSrcset(sizes)}
@ -37,18 +35,59 @@ const {
height={height} height={height}
/> />
<div>
<div> <div>
<p id="title" class="font-2xl">{title}</p> <p id="title" class="font-2xl">{title}</p>
<p>{subtitle}</p> <p>{subtitle}</p>
</div> </div>
</div>
</a> </a>
{/* ------------------------------------------- CSS -------------------------------------------- */} {/* ------------------------------------------- CSS -------------------------------------------- */}
<style> <style>
a { a {
position: relative;
width: 100%; width: 100%;
aspect-ratio: 1 / 1; height: 8em;
border-radius: 12px;
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
transition: 100ms scale;
&:hover,
&:focus-visible {
scale: 104%;
}
& > img {
position: absolute;
inset: 0;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
& > div {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
& > div {
padding: 1em;
border-radius: 1em;
background-color: color-mix(in srgb, var(--color-elevation-0) 70%, transparent);
backdrop-filter: blur(8px);
}
}
}
/* a {
width: 100%;
height: 64px;
overflow: hidden;
display: grid; display: grid;
place-items: center; place-items: center;
grid-template-areas: "center"; grid-template-areas: "center";
@ -81,5 +120,5 @@ const {
box-shadow: 0 5px 20px -10px var(--color-shadow-0); box-shadow: 0 5px 20px -10px var(--color-shadow-0);
border-radius: 12px; border-radius: 12px;
} }
} } */
</style> </style>

12
src/pages/[locale]/collectibles/[slug]/index.astro
View File

@ -179,7 +179,6 @@ if (price) {
class:list={{ "when-no-print": true, "with-two": gallery && scans }}> class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
{gallery && ( {gallery && (
<ImageTile <ImageTile
class="collectibles_id-image_tile"
image={gallery.thumbnail} image={gallery.thumbnail}
title={t("collectibles.gallery.title")} title={t("collectibles.gallery.title")}
subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })} subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
@ -189,7 +188,6 @@ if (price) {
{scans && ( {scans && (
<ImageTile <ImageTile
class="collectibles_id-image_tile"
image={scans.thumbnail} image={scans.thumbnail}
title={t("collectibles.scans.title")} title={t("collectibles.scans.title")}
subtitle={t("collectibles.scans.subtitle", { count: scans.count })} subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
@ -252,22 +250,12 @@ if (price) {
} }
& > #gallery-scans { & > #gallery-scans {
&:not(.with-two) {
& > .collectibles_id-image_tile {
aspect-ratio: 2 / 1;
}
}
&.with-two { &.with-two {
display: flex; display: flex;
gap: 24px; gap: 24px;
@media (max-width: 400.5px) { @media (max-width: 400.5px) {
flex-direction: column; flex-direction: column;
& > .collectibles_id-image_tile {
aspect-ratio: 2 / 1;
}
} }
} }