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

New design for timeline

This commit is contained in:
DrMint 2024-05-27 15:08:19 +02:00
parent 701d60a0e5
commit 9a8991aa7f
7 changed files with 143 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/[locale]/api/timeline/partial.astro
View File

@ -1,6 +1,7 @@
---
import Card from "components/Card.astro";
import MasoTarget from "components/Maso/MasoTarget.astro";
import TimelineEventTranslation from "pages/[locale]/timeline/_components/TimelineEventTranslation.astro";
import RichText from "components/RichText/RichText.astro";
import TimelineLanguageOverride from "pages/[locale]/timeline/_components/TimelineLanguageOverride.astro";
import TimelineNote from "pages/[locale]/timeline/_components/TimelineNote.astro";
import TimelineSourcesButton from "pages/[locale]/timeline/_components/TimelineSourcesButton.astro";
@ -32,8 +33,12 @@ const { title, description, notes, credits } = getLocalizedMatch(translations);
{/* ------------------------------------------- HTML ------------------------------------------- */}
<MasoTarget>
<Card>
<div class="event">
<TimelineEventTranslation title={title} description={description} />
<div id="content">
{title && <h4 class="font-xl">{title}</h4>}
{description && <RichText content={description} />}
</div>
<div id="bottom" class="when-js when-no-print">
<TimelineSourcesButton sources={sources} />
{notes && <TimelineNote notes={notes} />}
@ -46,6 +51,7 @@ const { title, description, notes, credits } = getLocalizedMatch(translations);
/>
</div>
</div>
</Card>
</MasoTarget>
{/* ------------------------------------------- CSS -------------------------------------------- */}
@ -55,12 +61,27 @@ const { title, description, notes, credits } = getLocalizedMatch(translations);
display: flex;
flex-direction: column;
gap: 1em;
padding: 1em;
& > #content {
padding-left: 0.9em;
padding-right: 1.2em;
padding-top: 0.5em;
display: flex;
flex-direction: column;
gap: 0.5em;
& > h4 {
line-height: 1.2;
max-width: 35rem;
}
}
& > #bottom {
display: flex;
place-items: start;
gap: 0.3em;
font-size: 85%;
gap: 0.4em;
}
}
</style>

68
src/pages/[locale]/timeline/_components/TimelineEvent.astro
View File

@ -8,23 +8,35 @@ interface Props {
displayDate: boolean;
}
const { event, displayDate } = Astro.props;
const {
event,
event: { date, events },
displayDate,
} = Astro.props;
const { formatTimelineDate, t } = await getI18n(Astro.locals.currentLocale);
const displayedDate =
!event.date.month && !event.date.day
? t("timeline.year.during", { year: formatTimelineDate(event.date) })
: formatTimelineDate(event.date);
!date.month && !date.day
? t("timeline.year.during", { year: formatTimelineDate(date) })
: formatTimelineDate(date);
const multiple = displayDate && events.length > 1;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div class="event-container">
{displayDate && <h3>{displayedDate}</h3>}
<div>
{
event.events.map((_, index) => (
displayDate && (
<h3 class="font-xl" class:list={{ multiple }}>
{displayedDate}
</h3>
)
}
<div class="date-container" class:list={{ multiple }}>
{
events.map((_, index) => (
<TimelineEventPartial
event={event}
index={index}
@ -40,24 +52,30 @@ const displayedDate =
<style>
.event-container {
&:has(h3) > div {
border-left: 1px solid var(--color-base-600);
padding-left: 1em;
padding-block: 1em;
}
& > div {
display: flex;
flex-direction: column;
gap: 2em;
}
& > h3 {
padding-bottom: 0.3em;
padding-inline: 0.2em;
color: var(--color-base-700);
border-bottom: 1px solid var(--color-base-600);
width: fit-content;
color: var(--color-base-600);
line-height: 2;
margin-bottom: 0.1em;
margin-left: 16px;
&.multiple {
margin-left: 16px;
}
}
& > .date-container {
display: flex;
align-items: start;
flex-direction: column;
gap: 1em;
&.multiple {
border-left: 1px solid;
border-top: 1px solid;
border-color: var(--color-base-450);
border-radius: calc(26px);
padding: 1em;
}
}
}
</style>

33
src/pages/[locale]/timeline/_components/TimelineEventTranslation.astro
View File

@ -1,33 +0,0 @@
---
import RichText from "components/RichText/RichText.astro";
import type { RichTextContent } from "src/shared/payload/payload-sdk";
interface Props {
title?: string | undefined;
description?: RichTextContent | undefined;
}
const { title, description } = Astro.props;
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<div>
{title && <h4>{title}</h4>}
{description && <RichText content={description} />}
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
div {
display: flex;
flex-direction: column;
gap: 0.5em;
& > h4 {
font-size: 120%;
max-width: 35rem;
}
}
</style>

11
src/pages/[locale]/timeline/_components/TimelineLanguageOverride.astro
View File

@ -35,25 +35,28 @@ const { t } = await getI18n(Astro.locals.currentLocale);
{credits.length > 0 && <InlineCredits credits={credits} />}
</div>
<div class="pressable-label">
<button class="pressable-label">
<Icon name="material-symbols:translate" />
<p>
<p class="font-s">
{
t("timeline.eventFooter.languages", {
count: availableLanguages.length,
})
}
</p>
</div>
</button>
</Tooltip>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
button {
padding-block: 0.5em;
}
#tooltip-content {
display: grid;
gap: 0.5em;
font-size: 1rem;
& .current {
color: var(--color-base-750);

14
src/pages/[locale]/timeline/_components/TimelineNote.astro
View File

@ -20,8 +20,16 @@ const { t } = await getI18n(Astro.locals.currentLocale);
<div id="tooltip-content" slot="tooltip-content">
<RichText content={notes} />
</div>
<div class="pressable-label">
<button class="pressable-label">
<Icon name="material-symbols:comment-outline" />
<p>{t("timeline.eventFooter.note")}</p>
</div>
<p class="font-s">{t("timeline.eventFooter.note")}</p>
</button>
</Tooltip>
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
button {
padding-block: 0.5em;
}
</style>

21
src/pages/[locale]/timeline/_components/TimelineSourcesButton.astro
View File

@ -20,7 +20,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
sources.length === 0 ? (
<div class="no-sources error-message">
<Icon name="material-symbols:warning-outline" />
<p>{t("timeline.eventFooter.sources", { count: sources.length })}</p>
<p class="font-s">{t("timeline.eventFooter.sources", { count: sources.length })}</p>
</div>
) : (
<Tooltip trigger="click">
@ -29,10 +29,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
<SourceRow source={source} />
))}
</div>
<div class="pressable-label">
<button class="pressable-label">
<Icon name="material-symbols:edit-note" />
<p>{t("timeline.eventFooter.sources", { count: sources.length })}</p>
</div>
<p class="font-s">{t("timeline.eventFooter.sources", { count: sources.length })}</p>
</button>
</Tooltip>
)
}
@ -40,11 +40,16 @@ const { t } = await getI18n(Astro.locals.currentLocale);
{/* ------------------------------------------- CSS -------------------------------------------- */}
<style>
#tooltip-content {
display: grid;
gap: 0.5em;
font-size: 1rem;
button {
padding-block: 0.5em;
}
#tooltip-content {
display: flex;
flex-direction: column;
gap: 1em;
}
.no-sources {
flex-shrink: 0;
display: flex;

42
src/pages/[locale]/timeline/_components/TimelineYear.astro
View File

@ -11,18 +11,28 @@ interface Props {
const { year, events } = Astro.props;
const { formatTimelineDate } = await getI18n(Astro.locals.currentLocale);
const eventsHaveDifferentDates = events.some(
({ date }) => JSON.stringify(date) !== JSON.stringify(events[0]?.date)
);
const date = eventsHaveDifferentDates ? { year } : events[0]!.date;
const multiple = events.flatMap(({ events }) => events).length > 1;
if (year === 856) {
console.log({ eventsHaveDifferentDates, events: events.map(({ date }) => date) });
}
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
{cache.config.timeline.breaks.includes(year) && <hr id={`hr-${year}`} />}
<h2 id={year.toString()}>
{formatTimelineDate(events.length === 1 ? events[0]!.date : { year })}
<h2 class="font-2xl" class:list={{ multiple }} id={year.toString()}>
{formatTimelineDate(date)}
</h2>
<div class="year-container">
{events.map((event) => <TimelineEvent event={event} displayDate={events.length > 1} />)}
<div class="year-container" class:list={{ multiple }}>
{events.map((event) => <TimelineEvent event={event} displayDate={eventsHaveDifferentDates} />)}
</div>
{/* ------------------------------------------- CSS -------------------------------------------- */}
@ -36,22 +46,32 @@ const { formatTimelineDate } = await getI18n(Astro.locals.currentLocale);
}
.year-container {
border-left: 1px solid var(--color-base-600);
padding-left: 1em;
padding-block: 1em;
margin-bottom: 3em;
width: fit-content;
&.multiple {
display: flex;
flex-direction: column;
gap: 2em;
gap: 2.5em;
border-left: 1px solid;
border-top: 1px solid;
border-color: var(--color-base-600);
border-radius: calc(26px);
padding: 1em;
}
}
h2 {
padding-bottom: 0.2em;
padding-inline: 0.2em;
color: var(--color-base-700);
border-bottom: 1px solid var(--color-base-600);
scroll-margin-block: 1em;
width: fit-content;
line-height: 2;
margin-left: 12px;
&.multiple {
margin-left: 18px;
}
}
</style>