Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-04-24 23:19:39 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Calendar event list tweaks spacings

Browse Source
This commit is contained in:
Kalle 2022-07-28 21:25:51 +03:00
parent 98d3d3cd72
commit 4a2b974fd3
5 changed files with 63 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/db/models/calendar.server.ts
View File

@ -1,5 +1,4 @@
import { dateToDatabaseTimestamp } from "~/utils/dates";
import { Unpacked } from "~/utils/types";
import { sql } from "../sql";
import type { CalendarEvent, CalendarEventDate, User } from "../types";

80
app/routes/calendar/index.tsx
View File

@ -117,7 +117,7 @@ export default function CalendarPage() {
const isMounted = useIsMounted();
return (
<main>
<main className="stack lg">
<WeekLinks />
{isMounted ? <EventsList /> : <div className="calendar__placeholder" />}
</main>
@ -265,42 +265,51 @@ function EventsList() {
</div>
</div>
<div className="stack md">
{events.map((calendarEvent) => {
return (
{events.flatMap((calendarEvent, i) => {
return [
<section
key={calendarEvent.eventId}
className="calendar__event main"
className="calendar__event main stack md"
>
<div className="calendar__event__top-info-container">
<time
dateTime={databaseTimestampToDate(
calendarEvent.startTime
).toISOString()}
className="calendar__event__time"
<div className="stack sm">
<div
className={clsx(
"calendar__event__top-info-container",
{
"mt-4": i === 0,
}
)}
>
{databaseTimestampToDate(
calendarEvent.startTime
).toLocaleTimeString(i18n.language, {
hour: "numeric",
minute: "numeric",
})}
</time>
<div className="calendar__event__author">
From {discordFullName(calendarEvent)}
<time
dateTime={databaseTimestampToDate(
calendarEvent.startTime
).toISOString()}
className="calendar__event__time"
>
{databaseTimestampToDate(
calendarEvent.startTime
).toLocaleTimeString(i18n.language, {
hour: "numeric",
minute: "numeric",
})}
</time>
<div className="calendar__event__author">
From {discordFullName(calendarEvent)}
</div>
</div>
<div className="stack sm">
<Link to={String(calendarEvent.eventId)}>
<h2 className="calendar__event__title">
{calendarEvent.name}{" "}
{calendarEvent.nthAppearance > 1 ? (
<span className="calendar__event__day">
Day {calendarEvent.nthAppearance}
</span>
) : null}
</h2>
</Link>
<Tags tags={calendarEvent.tags} />
</div>
</div>
<div>
<Link to={String(calendarEvent.eventId)}>
<h2 className="calendar__event__title">
{calendarEvent.name}{" "}
{calendarEvent.nthAppearance > 1 ? (
<span className="calendar__event__day">
Day {calendarEvent.nthAppearance}
</span>
) : null}
</h2>
</Link>
<Tags tags={calendarEvent.tags} />
</div>
{calendarEvent.discordUrl || calendarEvent.bracketUrl ? (
<div className="calendar__event__bottom-info-container">
@ -326,8 +335,11 @@ function EventsList() {
) : null}
</div>
) : null}
</section>
);
</section>,
i < events.length - 1 ? (
<hr className="calendar__event__divider" />
) : null,
];
})}
</div>
</React.Fragment>

8
app/routes/calendar/tags.json
View File

@ -1,5 +1,5 @@
{
"BADGE_PRIZE": {
"color": "#FDFD96"
}
}
"BADGE_PRIZE": {
"color": "#FDFD96"
}
}

17
app/styles/calendar.css
View File

@ -82,7 +82,6 @@
.calendar__events-container {
background-color: var(--bg-lighter);
margin-block-start: var(--s-8);
}
.calendar__event {
@ -114,7 +113,6 @@
align-items: center;
font-size: var(--fonts-sm);
gap: var(--s-2);
margin-block-start: var(--s-2);
}
.calendar__event__author {
@ -125,21 +123,20 @@
color: var(--text);
font-size: var(--fonts-xl);
line-height: 1.35;
margin-block: var(--s-1);
}
.calendar__event__tags {
list-style: none;
padding: 0;
font-size: var(--fonts-xxs);
display: flex;
padding: 0;
color: var(--button-text);
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
list-style: none;
}
.calendar__event__tags > li {
padding-inline: var(--s-1-5);
border-radius: var(--rounded);
padding-inline: var(--s-1-5);
}
.calendar__event__day {
@ -151,5 +148,9 @@
align-items: center;
font-size: var(--fonts-sm);
gap: var(--s-2);
margin-block-start: var(--s-2);
}
.calendar__event__divider {
width: 50rem;
margin: 0 auto;
}

4
app/styles/common.css
View File

@ -221,6 +221,10 @@
margin-block-start: var(--s-2);
}
.mt-4 {
margin-block-start: var(--s-4);
}
.ml-auto {
margin-inline-start: auto;
}