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

fix(rchoices): fix tab overlap + show icons-only on mobile 

Adds margin-top to demo-tabs to prevent overlap with shell nav.
Hides tab labels on narrow screens (<=480px), showing only icons
so all 4 tabs fit. Bumps JS cache to v=4.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-16 16:47:10 -07:00
parent e7f0181f70
commit b80275abcb
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/rchoices/components/folk-choices-dashboard.ts
View File

@ -525,11 +525,12 @@ class FolkChoicesDashboard extends HTMLElement {
.demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--rs-primary); color: #fff; font-weight: 500; } .demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--rs-primary); color: #fff; font-weight: 500; }
/* Tabs */ /* Tabs */
.demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; background: var(--rs-bg-page); border-radius: 10px; padding: 4px; } .demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; margin-top: 4px; background: var(--rs-bg-page); border-radius: 10px; padding: 4px; }
.demo-tab { flex: 1; text-align: center; padding: 0.6rem 0.75rem; border-radius: 8px; border: none; background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; } .demo-tab { flex: 1; text-align: center; padding: 0.6rem 0.75rem; border-radius: 8px; border: none; background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; }
.demo-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); } .demo-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); }
.demo-tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); box-shadow: var(--rs-shadow-sm); } .demo-tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); box-shadow: var(--rs-shadow-sm); }
.demo-tab-icon { margin-right: 6px; } .demo-tab-icon { margin-right: 6px; }
.demo-tab-label { }
/* Spider chart */ /* Spider chart */
.spider-wrap { display: flex; flex-direction: column; align-items: center; } .spider-wrap { display: flex; flex-direction: column; align-items: center; }
@ -580,6 +581,8 @@ class FolkChoicesDashboard extends HTMLElement {
.create-btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } .create-btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.demo-tabs { gap: 2px; padding: 3px; } .demo-tabs { gap: 2px; padding: 3px; }
.demo-tab { padding: 0.5rem; font-size: 0.8125rem; } .demo-tab { padding: 0.5rem; font-size: 0.8125rem; }
.demo-tab-label { display: none; }
.demo-tab-icon { margin-right: 0; font-size: 1.1rem; }
.rank-item { padding: 0.625rem 0.75rem; gap: 8px; } .rank-item { padding: 0.625rem 0.75rem; gap: 8px; }
.rank-name { font-size: 0.875rem; } .rank-name { font-size: 0.875rem; }
.vote-option { padding: 0.625rem 0.75rem; } .vote-option { padding: 0.625rem 0.75rem; }
@ -594,7 +597,7 @@ class FolkChoicesDashboard extends HTMLElement {
</div> </div>
<div class="demo-tabs"> <div class="demo-tabs">
${tabs.map((t) => `<button class="demo-tab${this.demoTab === t.key ? " active" : ""}" data-tab="${t.key}"><span class="demo-tab-icon">${t.icon}</span>${this.esc(t.label)}</button>`).join("")} ${tabs.map((t) => `<button class="demo-tab${this.demoTab === t.key ? " active" : ""}" data-tab="${t.key}"><span class="demo-tab-icon">${t.icon}</span><span class="demo-tab-label">${this.esc(t.label)}</span></button>`).join("")}
</div> </div>
<div class="demo-content"> <div class="demo-content">

2
modules/rchoices/mod.ts
View File

@ -56,7 +56,7 @@ routes.get("/", (c) => {
modules: getModuleInfoList(), modules: getModuleInfoList(),
theme: "dark", theme: "dark",
body: `<folk-choices-dashboard space="${spaceSlug}"></folk-choices-dashboard>`, body: `<folk-choices-dashboard space="${spaceSlug}"></folk-choices-dashboard>`,
scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=3"></script>`, scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=4"></script>`,
styles: `<link rel="stylesheet" href="/modules/rchoices/choices.css">`, styles: `<link rel="stylesheet" href="/modules/rchoices/choices.css">`,
})); }));
}); });