jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rcal): replace event dots with thin colored bars on mobile 

Dots were overlapping in small day cells. Now renders full-width 2px
color-coded stripes (solid for confirmed, dashed for tentative). Multi-day
spans also thinner (10px) with hidden text on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-25 15:21:15 -07:00
parent 0753b31990
commit 4a43ecdee0
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
modules/rcal/components/folk-calendar-view.ts
View File

@ -1287,6 +1287,9 @@ class FolkCalendarView extends HTMLElement {
let gridRow = row + 1; let gridRow = row + 1;
if (detailAfterGridRow > 0 && gridRow > detailAfterGridRow) gridRow++; if (detailAfterGridRow > 0 && gridRow > detailAfterGridRow) gridRow++;
const mob = window.innerWidth <= 768;
const spanTop = mob ? 16 : 22;
const spanGap = mob ? 12 : 18;
for (let l = 0; l < lanes.length; l++) { for (let l = 0; l < lanes.length; l++) {
for (const re of lanes[l]) { for (const re of lanes[l]) {
const color = re.ev.source_color || "#6366f1"; const color = re.ev.source_color || "#6366f1";
@ -1296,11 +1299,11 @@ class FolkCalendarView extends HTMLElement {
const contR = realEnd > rowEnd; const contR = realEnd > rowEnd;
const rL = contL ? "0" : "4px"; const rL = contL ? "0" : "4px";
const rR = contR ? "0" : "4px"; const rR = contR ? "0" : "4px";
html += `<div class="ev-span" style="grid-row:${gridRow};grid-column:${re.c0 + 1}/${re.c1 + 2};left:0;right:0;margin-top:${22 + l * 18}px;background:${color}25;border-left:2px solid ${color};border-radius:${rL} ${rR} ${rR} ${rL}" data-event-id="${re.ev.id}" title="${this.esc(re.ev.title)}"><span class="ev-span-text" style="color:${color}">${this.esc(re.ev.title)}</span></div>`; html += `<div class="ev-span" style="grid-row:${gridRow};grid-column:${re.c0 + 1}/${re.c1 + 2};left:0;right:0;margin-top:${spanTop + l * spanGap}px;background:${color}25;border-left:2px solid ${color};border-radius:${rL} ${rR} ${rR} ${rL}" data-event-id="${re.ev.id}" title="${this.esc(re.ev.title)}"><span class="ev-span-text" style="color:${color}">${this.esc(re.ev.title)}</span></div>`;
} }
} }
if (overflow > 0) { if (overflow > 0) {
html += `<div class="ev-span-more" style="grid-row:${gridRow};grid-column:1;left:0;margin-top:${22 + MAX_LANES * 18}px">+${overflow} more</div>`; html += `<div class="ev-span-more" style="grid-row:${gridRow};grid-column:1;left:0;margin-top:${spanTop + MAX_LANES * spanGap}px">+${overflow} more</div>`;
} }
} }
return html; return html;
@ -3076,10 +3079,18 @@ class FolkCalendarView extends HTMLElement {
.resize-handle { display: none; } .resize-handle { display: none; }
.year-grid { grid-template-columns: repeat(3, 1fr); } .year-grid { grid-template-columns: repeat(3, 1fr); }
.season-grid { grid-template-columns: 1fr; } .season-grid { grid-template-columns: 1fr; }
.day { min-height: 52px; padding: 4px; } .day { min-height: 48px; padding: 4px; }
.day-num { font-size: 11px; } .day-num { font-size: 11px; }
.ev-label { display: none; } .ev-label { display: none; }
.dot { width: 5px; height: 5px; } /* Dots → thin colored bars on mobile */
.dots { flex-direction: column; gap: 1px; margin-top: 2px; }
.dot { width: 100%; height: 2px; border-radius: 1px; margin: 0; }
.dot--tentative { width: 100%; height: 0; border-radius: 0; margin: 0; border: none; border-top: 2px dashed; }
.dot--reminder { width: 100%; height: 2px; border-radius: 1px; margin: 0; }
/* Thinner multi-day spans */
.ev-span { height: 10px; line-height: 10px; font-size: 0; }
.ev-span-text { display: none; }
.ev-span-more { font-size: 8px; height: 10px; line-height: 10px; }
.moon { font-size: 8px; } .moon { font-size: 8px; }
.nav-title { font-size: 13px; } .nav-title { font-size: 13px; }
.nav { gap: 4px; } .nav { gap: 4px; }
@ -3103,8 +3114,10 @@ class FolkCalendarView extends HTMLElement {
.mt-day-name { width: 30px; font-size: 10px; } .mt-day-name { width: 30px; font-size: 10px; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.day { min-height: 44px; padding: 3px; } .day { min-height: 40px; padding: 3px; }
.day-num { font-size: 10px; } .day-num { font-size: 10px; }
.dot { height: 1.5px; }
.dot--tentative { border-top-width: 1.5px; }
.wd { font-size: 9px; padding: 2px; } .wd { font-size: 9px; padding: 2px; }
.nav { flex-wrap: wrap; justify-content: center; } .nav { flex-wrap: wrap; justify-content: center; }
.nav-title { width: 100%; order: -1; margin-bottom: 4px; } .nav-title { width: 100%; order: -1; margin-bottom: 4px; }

2
modules/rcal/mod.ts
View File

@ -985,7 +985,7 @@ routes.get("/", (c) => {
modules: getModuleInfoList(), modules: getModuleInfoList(),
theme: "dark", theme: "dark",
body: `<folk-calendar-view space="${space}"></folk-calendar-view>`, body: `<folk-calendar-view space="${space}"></folk-calendar-view>`,
scripts: `<script type="module" src="/modules/rcal/folk-calendar-view.js?v=2"></script>`, scripts: `<script type="module" src="/modules/rcal/folk-calendar-view.js?v=3"></script>`,
styles: `<link rel="stylesheet" href="/modules/rcal/cal.css"> styles: `<link rel="stylesheet" href="/modules/rcal/cal.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">`, <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">`,
})); }));