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

Added stacked previewCard effect even to cards without thumbnails

This commit is contained in:
DrMint 2022-05-15 03:07:15 +02:00
parent 16df351741
commit 0b97d9f73d
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/PreviewCard.tsx
View File

@ -117,26 +117,34 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
hover:[--play-opacity:100] transition-transform hover:[--play-opacity:100] transition-transform
[--stacked-top:0] hover:[--stacked-top:1]" [--stacked-top:0] hover:[--stacked-top:1]"
> >
{thumbnail && stackNumber > 0 && ( {stackNumber > 0 && (
<> <>
<Img <div
className="opacity-30 rounded-md overflow-hidden absolute transition-[top_transform] className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
-top-[var(--stacked-top)*1.5rem] inset-0 -top-[var(--stacked-top)*2.1rem] brightness-[0.8] sepia-[0.5]
scale-[calc(1-0.15*var(--stacked-top))]" scale-[calc(1-0.15*var(--stacked-top))]"
image={thumbnail} >
quality={ImageQuality.Medium} {thumbnail && (
/> <Img
className="opacity-30 "
image={thumbnail}
quality={ImageQuality.Medium}
/>
)}
</div>
<div <div
className="bg-light rounded-md overflow-hidden absolute transition-[top_transform] className="bg-light rounded-md overflow-hidden absolute transition-[top_transform]
-top-[var(--stacked-top)*0.7rem] -top-[var(--stacked-top)*1rem] inset-0 brightness-[0.9] sepia-[0.2]
scale-[calc(1-0.06*var(--stacked-top))]" scale-[calc(1-0.06*var(--stacked-top))]"
> >
<Img {thumbnail && (
className="opacity-70" <Img
image={thumbnail} className="opacity-70"
quality={ImageQuality.Medium} image={thumbnail}
/> quality={ImageQuality.Medium}
/>
)}
</div> </div>
</> </>
)} )}
@ -186,12 +194,21 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
) : ( ) : (
<div <div
style={{ aspectRatio: thumbnailAspectRatio }} style={{ aspectRatio: thumbnailAspectRatio }}
className={`w-full bg-light ${ className={`w-full bg-light relative ${
keepInfoVisible keepInfoVisible
? "rounded-t-md" ? "rounded-t-md"
: "rounded-md coarse:rounded-b-none" : "rounded-md coarse:rounded-b-none"
}`} }`}
></div> >
{stackNumber > 0 && (
<div
className="absolute right-2 top-2 text-light bg-black
bg-opacity-60 px-2 rounded-full"
>
{stackNumber}
</div>
)}
</div>
)} )}
<div <div
className={`linearbg-obi ${ className={`linearbg-obi ${