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

Generalized card element

This commit is contained in:
DrMint 2024-03-10 14:55:55 +01:00
parent 6dd1780925
commit 73cbe448db
4 changed files with 85 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO.md
View File

@ -2,8 +2,11 @@
## Short term
- Translate new wording keys
- [Collectibles] Create page for gallery
- [Collectibles] Create page for scans
## Long term
- Global search function
- Convert Rich text to simple text for indexing and open graph purposes
- Anonymous comments

52
src/components/Card.astro Normal file
View File

@ -0,0 +1,52 @@
---
import ConditionalWrapper from "./ConditionalWrapper.astro";
import Link from "./Link.astro";
interface Props {
href?: string | undefined;
disableRoundedTop?: boolean;
}
const { href, disableRoundedTop = false } = Astro.props;
---
<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
<div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
<slot />
</div>
</ConditionalWrapper>
<style>
#card {
backdrop-filter: blur(10px);
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
&.rounded-top {
border-radius: 1em;
overflow: hidden;
}
border: 1px solid var(--color-base-300);
box-shadow: 0 1px 2px 0 var(--color-shadow-2);
background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
}
:global(a) > #card {
transition-duration: 150ms;
transition-property: border-color, box-shadow, background-color;
&:hover {
border-color: var(--color-base-650);
box-shadow: 0 2px 2px var(--color-shadow-2);
background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
}
&:active {
border-color: var(--color-base-1000);
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
background-color: var(--color-elevation-2);
}
}
</style>

44
src/components/Previews/GenericPreview.astro
View File

@ -1,8 +1,7 @@
---
import type { EndpointTagsGroup, PayloadImage } from "src/shared/payload/payload-sdk";
import ConditionalWrapper from "../ConditionalWrapper.astro";
import Link from "../Link.astro";
import InlineTagGroups from "pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro";
import Card from "components/Card.astro";
interface Props {
thumbnail?: PayloadImage | undefined;
@ -25,8 +24,8 @@ const {
} = Astro.props;
---
<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
<div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
<Card href={href} disableRoundedTop={disableRoundedTop}>
<div id="card">
{
thumbnail && (
<img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
@ -52,38 +51,25 @@ const {
}
</div>
</div>
</ConditionalWrapper>
</Card>
<style>
#card {
box-shadow: 0 1px 2px 0 var(--color-shadow-2);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-elevation-2) 50%, transparent);
border: 1px solid var(--color-base-300);
&.rounded-top {
border-radius: 1em;
overflow: hidden;
}
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
:global(a > #card) {
& > #card > div > p > #title {
transition-duration: 150ms;
transition-property: border-color, box-shadow;
&:hover {
border-color: var(--color-base-650);
box-shadow: 0 2px 2px var(--color-shadow-2);
transition-property: color;
}
&:active {
border-color: var(--color-base-1000);
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
&:hover > #card > div > p {
color: var(--color-base-750);
}
&:active > #card > div > p {
color: var(--color-base-1000);
}
}
#card {
& > img {
width: 100%;
height: auto;

33
src/pages/[locale]/collectibles/_components/ContentsSection/ContentRow.astro
View File

@ -5,8 +5,7 @@ import { getI18n } from "src/i18n/i18n";
import type { EndpointCollectible } from "src/shared/payload/payload-sdk";
import { formatInlineTitle } from "src/utils/format";
import InlineTagGroups from "./InlineTagGroups.astro";
import ConditionalWrapper from "components/ConditionalWrapper.astro";
import Link from "components/Link.astro";
import Card from "components/Card.astro";
interface Props {
content: EndpointCollectible["contents"][number];
@ -23,7 +22,7 @@ const href =
{/* ------------------------------------------- HTML ------------------------------------------- */}
<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
<Card href={href}>
<div id="row">
<div id="title">
{
@ -71,15 +70,12 @@ const href =
)
}
</div>
</ConditionalWrapper>
</Card>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
:global(a) > #row {
transition-duration: 150ms;
transition-property: border-color, box-shadow;
:global(a > #card) > #row {
& > #title {
transition-duration: 150ms;
transition-property: text-decoration-color, color;
@ -88,35 +84,18 @@ const href =
text-decoration-color: transparent;
}
&:hover {
border-color: var(--color-base-650);
box-shadow: 0 2px 2px var(--color-shadow-2);
& > #title {
&:hover > #title {
color: var(--color-base-750);
text-decoration-color: var(--color-base-650);
}
}
&:active {
border-color: var(--color-base-1000);
box-shadow: 0 6px 12px 2px var(--color-shadow-2);
& > #title {
&:active > #title {
color: var(--color-base-1000);
text-decoration-color: var(--color-base-1000);
}
}
}
#row {
border-radius: 1em;
box-shadow: 0 1px 2px 0 var(--color-shadow-2);
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-elevation-2) 50%, transparent);
border: 1px solid var(--color-base-300);
padding: 1.5em;
display: grid;