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

24
src/components/PreviewCard.tsx
View File

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