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

Better tournament organization calendar styles for mobile

Browse Source
This commit is contained in:
Kalle 2026-01-04 13:51:47 +02:00
parent 497c3677be
commit a9f72e9a02
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/features/tournament-organization/components/EventCalendar.tsx
View File

@ -93,8 +93,6 @@ function EventCalendarCell({
<img
className="org__calendar__day__logo"
src={events[0].logoUrl ?? fallbackLogoUrl}
width={32}
height={32}
alt={events[0].name}
/>
) : null}

35
app/features/tournament-organization/tournament-organization.css
View File

@ -1,9 +1,9 @@
.org__calendar {
display: grid;
grid-template-columns: repeat(7, max-content);
grid-template-columns: repeat(7, minmax(0, 55px));
gap: var(--s-2);
--cell-size: 55px;
overflow-x: auto;
width: max-content;
max-width: 100%;
}
.org__calendar__container {
@ -12,6 +12,7 @@
gap: var(--s-2);
height: max-content;
overflow-x: visible;
max-width: 100%;
}
.org__calendar__day-header {
@ -20,12 +21,11 @@
}
.org__calendar__day {
width: var(--cell-size);
height: var(--cell-size);
aspect-ratio: 1;
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
background-color: var(--bg-lighter);
padding: var(--s-1) var(--s-2);
padding: var(--s-1);
position: relative;
display: grid;
place-items: center;
@ -40,17 +40,26 @@
.org__calendar__day__logo {
position: absolute;
border-radius: var(--rounded);
top: 18px;
left: 18px;
top: 50%;
left: 50%;
transform: translate(-15%, -20%);
width: 48%;
height: auto;
max-width: 28px;
max-height: 28px;
}
.org__calendar__day__many-events {
position: absolute;
border-radius: var(--rounded);
top: 18px;
left: 18px;
width: 32px;
height: 32px;
top: 50%;
left: 50%;
transform: translate(-15%, -20%);
width: 48%;
height: auto;
aspect-ratio: 1;
max-width: 28px;
max-height: 28px;
border: 2px solid var(--border);
display: grid;
place-items: center;
@ -97,6 +106,7 @@
display: flex;
flex-direction: column;
gap: var(--s-16);
align-items: center;
}
@media screen and (min-width: 768px) {
@ -104,6 +114,7 @@
flex-direction: row;
gap: var(--s-8);
overflow-x: initial;
align-items: flex-start;
}
.org__calendar__container {