marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Admin: group the fourteen panels into tabs

Browse Source 
The page was a fixed 1.5fr/.75fr split — ten tall panels on the left, four
short config forms on the right. The right column ran out about a quarter of
the way down, so the rest of the page scrolled past an empty gutter, and
finding anything meant scrolling through everything.

Five tabs now, each using the full width: Team (queue, add sponsor, coaching
radar, award capacity, messages), Traffic (conversions, org vs network),
Members (submissions, lookup, matrix), My Money (positions income), Settings
(AI chat, SendGrid, public page).

The panels themselves are untouched — same markup, same ids, same JS. Only
their grouping changed. Panes are moved in the HTML rather than by script, so
the layout does not depend on JS running; the tab file only toggles which
pane is visible and remembers the last one.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-30 06:16:05 -05:00
parent ee87408dec
commit 7452490a78
3 changed files with 75 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+13
View File
@@ -248,3 +248,16 @@ a.brand{text-decoration:none;color:inherit}
.pay-diagram{width:100%;min-width:640px;height:auto;display:block}
img.brand-mark{object-fit:cover;font-size:0}
/* Admin tabs — replaces the old fixed 1.5fr/.75fr admin-grid, which left the
right column empty for most of the page. */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #27445e;margin-bottom:18px}
.tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:#8da3b5;font:inherit;font-weight:800;font-size:14px;letter-spacing:.4px;padding:12px 17px;cursor:pointer;border-radius:10px 10px 0 0;transition:.15s ease}
.tab:hover{color:var(--text);background:rgba(255,255,255,.035)}
.tab.on{color:var(--gold);border-bottom-color:var(--gold);background:rgba(243,190,67,.07)}
.tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.tabpane{display:none;gap:18px;grid-template-columns:1fr;align-content:start}
.tabpane.on{display:grid}
.pane-split{display:grid;grid-template-columns:1.6fr .9fr;gap:18px;align-items:start}
#grantCard summary::-webkit-details-marker{display:none}
@media(max-width:900px){.pane-split{grid-template-columns:1fr}.tab{padding:10px 12px;font-size:13px}}