Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-08 20:26:08 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

FIx WeekLinks keyboard navigation

Browse Source
This commit is contained in:
Kalle
2022-07-21 21:25:08 +03:00
parent b5580c347f
commit 12c86ff15e
2 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/routes/calendar.tsx
View File

@@ -80,31 +80,42 @@ function WeekLinks() {
<Flipper flipKey={data.weeks.map(({ number }) => number).join("")}>
<div className="flex justify-center">
<div className="calendar__weeks">
{data.weeks.map((week) => (
<Flipped key={week.number} flipId={week.number}>
<Link
to={`?week=${week.number}&year=${week.year}`}
className="calendar__week"
>
<>
<div>
{week.number === data.thisWeek
? "This"
: week.number - data.thisWeek === 1
? "Next"
: week.number - data.thisWeek === -1
? "Last"
: week.number}{" "}
<br />
Week
</div>
<div className="calendar__event-count">
×{week.numberOfEvents}
</div>
</>
</Link>
</Flipped>
))}
{data.weeks.map((week, i) => {
const hidden = [
0,
1,
data.weeks.length - 2,
data.weeks.length - 1,
].includes(i);
return (
<Flipped key={week.number} flipId={week.number}>
<Link
to={`?week=${week.number}&year=${week.year}`}
className="calendar__week"
aria-hidden={hidden}
tabIndex={hidden ? -1 : 0}
>
<>
<div>
{week.number === data.thisWeek
? "This"
: week.number - data.thisWeek === 1
? "Next"
: week.number - data.thisWeek === -1
? "Last"
: week.number}{" "}
<br />
Week
</div>
<div className="calendar__event-count">
×{week.numberOfEvents}
</div>
</>
</Link>
</Flipped>
);
})}
</div>
</div>
</Flipper>

5
app/styles/calendar.css
View File

@@ -29,6 +29,10 @@
background-color: var(--theme-transparent);
}
.calendar__week:focus {
outline: 2px solid var(--theme);
}
.calendar__event-count {
font-size: var(--fonts-xxxs);
font-weight: var(--body);
@@ -40,6 +44,7 @@
.calendar__week:nth-child(9) {
width: calc(var(--full-size-week-width) - 2.5rem);
height: calc(var(--full-size-week-height) - 2.5rem);
cursor: initial;
font-size: var(--fonts-xxxxs);
opacity: 0;
}