rays/ipx
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

Admin page laid out as a feed's settings are (#414)

Browse Source 
Prototype for approval on the issue; not to be merged until then.

The page had grown one captioned box at a time: at 390 px the tabs ran off
the edge and hid Log, Server was eleven full-width boxes (1150 px wide on a
desktop for a one-digit number) with units and the meaning of 0 in the
labels, and Directory's Save sat between its settings and the lists below.

Each tab is now named parts in .fsec, the layout #290 gave a feed's settings,
with its switches, numbers with their unit after the box, Server's Save
sticky and greyed until a change, the tabs in their own row on a phone, the
Proxy tag by the account's name, and the log's explanation moved into each
source tab's tooltip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqkrVDqdiQEMWAkNGQ2tYA
This commit is contained in:
Ray Slakinski
2026-11-07 17:07:19 +00:00
parent 88f4e4765b
commit c6dcb7f34e
3 changed files with 134 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/app.css
View File

@@ -962,12 +962,49 @@ body.adminpage #topbar > a.btn{text-decoration:none}
/* The link to Admin, for admins only: the page is the same for everyone now (#203), and the head
script marks an admin's from the last visit before the first frame. */
html:not([data-admin]) #topbar a#admin{display:none}
body.adminpage #admin{max-width:780px;margin:0 auto}
body.adminpage #admin h2{font-size:18px;margin:0 0 12px}
/* The directory's Servers and Blocked follow its Save and each other's rows (#206). */
body.adminpage #dadmin h2{margin-top:32px}
/* Sections laid out as a feed's settings are (#290, #414): .fsec's name beside its controls,
above them when the column is narrow, which the container query on #admin decides. */
body.adminpage #admin{max-width:780px;margin:0 auto;container-type:inline-size}
body.adminpage #admin h2{font-size:22px;margin:0 0 6px;letter-spacing:-.01em}
body.adminpage #admin h2+.cap{margin-bottom:14px}
body.adminpage #admin .fsec:last-of-type{border-bottom:1px solid var(--line)}
body.adminpage #log{max-width:none}
.urow{padding:9px 0;border-bottom:1px solid var(--line)}
/* A setting's caption belongs to the field above it, not halfway to the next. */
#admin .fsecin>.ffield:has(+.cap){margin-bottom:0}
#admin .fsecin>.cap{margin-bottom:6px}
#admin .unit{align-self:center;color:var(--dim);font-size:14px}
#admin .apath{font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
#admin .cardacts{margin-top:8px}
/* Save stays on screen at the foot of a long section, as a feed's settings keep theirs (#167). */
.afoot{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding-top:12px;padding-bottom:calc(12px + var(--safe-b));margin-top:4px;background:var(--bg)}
.afoot .btn:disabled{opacity:.45;cursor:default}
/* How the directory answers, above what sets it up. */
.astatus{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;line-height:1.5}
.urow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.urow:last-child{border-bottom:0}
.urow .uwho{flex:1;min-width:0}
.urow .uwho b{display:block;overflow-wrap:anywhere}
.urow .uwho .tag{margin-left:4px;vertical-align:1px}
.urow .uwho small{display:block;color:var(--faint);font-size:12.5px}
.urow .switch{min-height:0;gap:8px;font-size:13px;font-weight:400;color:var(--dim)}
.loghead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.loghead h2{margin:0!important}
.loghead .tabs button{white-space:nowrap}
.logbar select{width:auto}
body.adminpage #logbox{height:calc(100dvh - 230px);min-height:240px}
#log>.cap{margin-top:8px}
/* On a phone the tabs take a row of their own under the title, where all four fit. */
@media (max-width:600px){
body.adminpage #topbar{flex-wrap:wrap;row-gap:8px}
body.adminpage #atabs{order:9;flex:1 1 100%}
body.adminpage #atabs a{flex:1;text-align:center}
.loghead .tabs{flex:1 1 100%}
.loghead .tabs button{flex:1;padding:5px 4px}
.logbar select{flex:1}
body.adminpage #logbox{height:calc(100dvh - 300px)}
#logbox .l{display:grid;grid-template-columns:auto 1fr;gap:0 8px;padding:5px 0;border-bottom:1px solid var(--line)}
#logbox .l>span:last-child{grid-column:1/-1}
}
.toolbar .grow{flex:1;min-width:150px;max-width:320px}
/* ---------- items ---------- */