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

Added possibility to remove roundness on preview cards

This commit is contained in:
DrMint 2022-06-06 22:28:44 +02:00
parent e1cd5424f7
commit 2073199971
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Library/PreviewCardCTAs.tsx
View File

@ -23,7 +23,7 @@ export function PreviewCardCTAs(props: Props): JSX.Element {
}`} }`}
> >
{/* TODO: Add to langui */} {/* TODO: Add to langui */}
<ToolTip content="I want it!"> <ToolTip content="I want it!" disabled={expand}>
<Button <Button
icon={Icon.Favorite} icon={Icon.Favorite}
text={expand ? "I want it!" : undefined} text={expand ? "I want it!" : undefined}
@ -46,7 +46,7 @@ export function PreviewCardCTAs(props: Props): JSX.Element {
}} }}
/> />
</ToolTip> </ToolTip>
<ToolTip content="I have it!"> <ToolTip content="I have it!" disabled={expand}>
<Button <Button
icon={Icon.BackHand} icon={Icon.BackHand}
text={expand ? "I have it!" : undefined} text={expand ? "I have it!" : undefined}

28
src/components/PreviewCard.tsx
View File

@ -23,6 +23,7 @@ import { Img } from "./Img";
interface Props { interface Props {
thumbnail?: UploadImageFragment | string | null | undefined; thumbnail?: UploadImageFragment | string | null | undefined;
thumbnailAspectRatio?: string; thumbnailAspectRatio?: string;
thumbnailRounded?: boolean;
href: string; href: string;
pre_title?: string | null | undefined; pre_title?: string | null | undefined;
title: string | null | undefined; title: string | null | undefined;
@ -53,6 +54,8 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
const { const {
href, href,
thumbnail, thumbnail,
thumbnailAspectRatio = "4/3",
thumbnailRounded = true,
pre_title, pre_title,
title, title,
subtitle, subtitle,
@ -61,7 +64,6 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
topChips, topChips,
bottomChips, bottomChips,
keepInfoVisible, keepInfoVisible,
thumbnailAspectRatio,
metadata, metadata,
hoverlay, hoverlay,
infoAppend, infoAppend,
@ -129,9 +131,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
{stackNumber > 0 && ( {stackNumber > 0 && (
<> <>
<div <div
className="absolute inset-0 -top-[var(--stacked-top)*2.1rem] className={`absolute inset-0 -top-[var(--stacked-top)*2.1rem]
scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden rounded-md bg-light scale-[calc(1-0.15*var(--stacked-top))] overflow-hidden ${
brightness-[0.8] sepia-[0.5] transition-[top_transform]" thumbnailRounded && "rounded-md"
} bg-light
brightness-[0.8] sepia-[0.5] transition-[top_transform]`}
> >
{thumbnail && ( {thumbnail && (
<Img <Img
@ -143,9 +147,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
</div> </div>
<div <div
className="absolute inset-0 -top-[var(--stacked-top)*1rem] className={`absolute inset-0 -top-[var(--stacked-top)*1rem]
scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden rounded-md bg-light scale-[calc(1-0.06*var(--stacked-top))] overflow-hidden ${
brightness-[0.9] sepia-[0.2] transition-[top_transform]" thumbnailRounded && "rounded-md"
} bg-light
brightness-[0.9] sepia-[0.2] transition-[top_transform]`}
> >
{thumbnail && ( {thumbnail && (
<Img <Img
@ -162,9 +168,11 @@ export function PreviewCard(props: Immutable<Props>): JSX.Element {
<div className="relative"> <div className="relative">
<Img <Img
className={ className={
keepInfoVisible thumbnailRounded
? "rounded-t-md" ? keepInfoVisible
: "rounded-md coarse:rounded-b-none" ? "rounded-t-md"
: "rounded-md coarse:rounded-b-none"
: undefined
} }
image={thumbnail} image={thumbnail}
quality={ImageQuality.Medium} quality={ImageQuality.Medium}

1
src/pages/library/index.tsx
View File

@ -281,6 +281,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
subtitle={item.attributes.subtitle} subtitle={item.attributes.subtitle}
thumbnail={item.attributes.thumbnail?.data?.attributes} thumbnail={item.attributes.thumbnail?.data?.attributes}
thumbnailAspectRatio="21/29.7" thumbnailAspectRatio="21/29.7"
thumbnailRounded={false}
keepInfoVisible={keepInfoVisible} keepInfoVisible={keepInfoVisible}
topChips={ topChips={
item.attributes.metadata && item.attributes.metadata &&