engineering/zebra-report
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-spaces: mod-action buttons drop to a new row under each member

Browse source 
The grid was packing badge | handle | pubkey | mic | meter | buttons on
one line, which got crowded with three or four actions visible. Drop
mod-actions to a second grid row spanning the full width, indented
under the handle column. Hides itself entirely when empty so rows with
nothing to act on don't reserve dead space.
This commit is contained in:
Russell Ballestrini 2026-05-31 12:00:10 -04:00
parent a038adde7b
commit cd4a0ff6f5
No known key found for this signature in database
1 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/zebra-spaces.html
View file

@ -83,10 +83,11 @@
.note { font-size: 0.75rem; color: #555; line-height: 1.5; }
.meter { height: 8px; border: 1px solid #000; background: #fff; position: relative; overflow: hidden; }
.meter-fill { height: 100%; background: #000; width: 0%; transition: width 0.06s linear; }
/* member rows: badge | handle | pubkey short | meter | mod actions */
/* member rows: badge | handle | pubkey short | mic | meter — mod actions
* wrap to a 2nd row underneath, indented under the handle */
.member {
display: grid;
grid-template-columns: 5.5rem 1fr 4rem 1.4rem 1fr auto;
grid-template-columns: 5.5rem 1fr 4rem 1.4rem 1fr;
align-items: center; gap: 0.55rem; padding: 0.35rem 0;
border-bottom: 1px dotted #ccc; font-size: 0.85rem;
}
@ -105,7 +106,14 @@
.raised { color: #b00; font-weight: bold; }
.mic { width: 18px; height: 18px; }
.mic svg { width: 18px; height: 18px; display: block; }
.mod-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.mod-actions {
display: flex; gap: 0.3rem; flex-wrap: wrap;
grid-column: 1 / -1; /* second row, full width */
justify-content: flex-start;
padding-left: 6.05rem; /* line up under the handle (badge col + gap) */
margin-top: 0.2rem;
}
.mod-actions:empty { display: none; } /* no row gap when nothing to do */
.log { border: 1px solid #000; height: 150px; overflow-y: auto; padding: 0.5rem; font-size: 0.75rem; line-height: 1.5; background: #fafafa; }
.log-line { margin-bottom: 0.2rem; word-wrap: break-word; }
.log-line .ts { color: #888; }
@ -119,7 +127,7 @@
@media (max-width: 500px) {
.member { grid-template-columns: 5rem 1fr 1.4rem; }
.member .pub-short, .member .meter { display: none; }
.mod-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 5.6rem; }
.mod-actions { padding-left: 5.55rem; }
}
</style>
</head>
@ -1013,8 +1021,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
<footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
<span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
md5 <span class="stamp-md5">fa6e17c1461aba88dae3253450aa0824</span><br>
sha256 <span class="stamp-sha">9a371e4eafa1486ddf3a70b04030757aa14a4c1cf3e5b03ae355e3ca197ad364</span><br>
md5 <span class="stamp-md5">c5bb52fca1002251e888aa7effa2cf91</span><br>
sha256 <span class="stamp-sha">d1082ceeb95d3c616a63d522922e919b60cc7bfef9bb5bc49921008b75064310</span><br>
<span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
<span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
</footer>