jfork/octane-website
1
0
Fork 0
mirror of https://github.com/nfonteyne/octane-website.git synced 2026-09-03 23:24:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: better calendar display on mobile device

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-10 15:41:49 +02:00
parent 16110d8ad3
commit 247323654e
2 changed files with 39 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/calendar.html
View file

@ -18,7 +18,7 @@
<h1 style="margin:0">Disponibilités</h1> <h1 style="margin:0">Disponibilités</h1>
<p class="page-subtitle" id="last-checked" style="margin:0.25rem 0 0">Chargement…</p> <p class="page-subtitle" id="last-checked" style="margin:0.25rem 0 0">Chargement…</p>
</div> </div>
<div style="display:flex; gap:0.5rem;"> <div class="calendar-header-actions">
<button type="button" class="secondary nav-toggle calendar-filters-toggle" id="btn-filters-toggle">Filtres</button> <button type="button" class="secondary nav-toggle calendar-filters-toggle" id="btn-filters-toggle">Filtres</button>
<button type="button" class="secondary" id="btn-my-calendars">Mes calendriers</button> <button type="button" class="secondary" id="btn-my-calendars">Mes calendriers</button>
<button type="button" id="btn-refresh">Actualiser les disponibilités</button> <button type="button" id="btn-refresh">Actualiser les disponibilités</button>

42
public/css/style.css
View file

@ -889,6 +889,12 @@ a.back-link:hover { color: var(--accent); }
.calendar-filters-toggle, .calendar-filters-toggle,
.calendar-filters-close { display: none; } .calendar-filters-close { display: none; }
.calendar-header-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.calendar-layout { .calendar-layout {
display: grid; display: grid;
grid-template-columns: 220px 1fr; grid-template-columns: 220px 1fr;
@ -924,9 +930,11 @@ a.back-link:hover { color: var(--accent); }
.calendar-filters-backdrop { display: none; } .calendar-filters-backdrop { display: none; }
.calendar-main { min-width: 0; }
.calendar-header-row { .calendar-header-row {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem; gap: 0.5rem;
color: var(--muted); color: var(--muted);
font-size: 0.8rem; font-size: 0.8rem;
@ -937,13 +945,14 @@ a.back-link:hover { color: var(--accent); }
.calendar-grid { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem; gap: 0.5rem;
} }
.cal-cell { .cal-cell {
position: relative; position: relative;
min-height: 92px; min-height: 92px;
min-width: 0;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--surface); background: var(--surface);
@ -952,6 +961,7 @@ a.back-link:hover { color: var(--accent); }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
overflow: hidden;
} }
.cal-cell.today { border-color: var(--accent); border-width: 2px; } .cal-cell.today { border-color: var(--accent); border-width: 2px; }
@ -1155,6 +1165,14 @@ a.back-link:hover { color: var(--accent); }
.calendar-filters-close { display: inline-flex; } .calendar-filters-close { display: inline-flex; }
.calendar-header-actions { width: 100%; }
.calendar-header-actions button {
flex: 1 1 auto;
white-space: normal;
line-height: 1.2;
font-size: 0.82rem;
}
.calendar-layout { grid-template-columns: 1fr; } .calendar-layout { grid-template-columns: 1fr; }
.calendar-filters { .calendar-filters {
@ -1183,9 +1201,25 @@ a.back-link:hover { color: var(--accent); }
.calendar-filters-backdrop.open { display: block; } .calendar-filters-backdrop.open { display: block; }
.calendar-header-row span:nth-child(n) { font-size: 0.7rem; } .calendar-header-row { gap: 0.25rem; }
.calendar-header-row span:nth-child(n) { font-size: 0.62rem; }
.cal-cell { min-height: 64px; font-size: 0.7rem; } .calendar-grid { gap: 0.25rem; }
.cal-cell { min-height: 56px; font-size: 0.62rem; padding: 0.3rem 0.25rem; gap: 0.15rem; }
/* Per-person names/times don't fit on a phone-width column — the heat
color + the "avail/total" count already convey availability at a
glance; full detail is one tap away via the day modal. */
.cell-time,
.cell-dots { display: none; }
.cell-date { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cell-date .day-num { margin-right: 0; font-size: 0.85rem; }
.cell-badges { position: static; align-self: center; }
.cell-count { align-self: center; margin-top: auto; }
.timeline-song-row { flex-wrap: wrap; } .timeline-song-row { flex-wrap: wrap; }
.timeline-embed, .timeline-embed,