engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

zebra-report: deploy — thumbs use freed width when panel hidden

Browse source
This commit is contained in:
russell@unturf.com 2026-06-02 19:25:15 -04:00
parent d6b28e6c78
commit 474bf19baa
No known key found for this signature in database
1 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
zebra-report/zebra-spaces.html
View file

@ -146,10 +146,14 @@
.page:has(> .cameras-col.hidden) > .timeline { grid-column: 1; }
.page:has(> .cameras-col.hidden) > .controls { grid-column: 2; }
/* state: controls collapsed (right column gone) */
/* state: controls collapsed (right column gone). The cameras column
* grows from its 220px default up to ~35% of the viewport so the
* thumbnails actually use the freed horizontal space — combined with
* the auto-fill #tiles-thumbs grid below, wide columns flow into
* multiple thumb columns instead of leaving the row half-empty. */
.page.controls-collapsed > .controls { display: none; }
.page.controls-collapsed:not(:has(> .cameras-col.hidden)) {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-columns: minmax(220px, 35%) minmax(0, 1fr);
}
/* state: controls collapsed AND no cameras → timeline owns the viewport */
.page.controls-collapsed:has(> .cameras-col.hidden) {
@ -162,7 +166,7 @@
/* pre-paint pref so a 'hidden' reload doesn't flash the panel */
html.controls-collapsed-pref .page > .controls { display: none; }
html.controls-collapsed-pref .page:not(:has(> .cameras-col.hidden)) {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-columns: minmax(220px, 35%) minmax(0, 1fr);
}
html.controls-collapsed-pref .page:has(> .cameras-col.hidden) {
grid-template-columns: minmax(0, 1fr); gap: 0;
@ -248,8 +252,14 @@
* and demotes the current one back to the column. */
#spotlight { display: grid; grid-template-columns: 1fr; gap: 0; }
/* unified popularity-sorted thumb list — screens + cameras + game-shares
* all flow through here, ordered by tileScore() */
#tiles-thumbs { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
* all flow through here, ordered by tileScore(). auto-fill with a
* 180px floor means: narrow columns get 1 thumb per row, wide
* columns (e.g. panel hidden) flow into 2 / 3 / N columns naturally. */
#tiles-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.45rem;
}
#tiles-h2 { margin-top: 0.5rem; }
#tiles-h2.hidden { display: none; }
/* a thumbnail tile is the same DOM as a spotlight tile but with a
@ -3771,8 +3781,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-06-02</span><br>
md5 <span class="stamp-md5">d6220b4e18f5dbe18bcce34b3762e67b</span><br>
sha256 <span class="stamp-sha">eae5efabeda7df668ae9b10cd962d49e2bc3dfb370fa38041a373591afcf3e4e</span><br>
md5 <span class="stamp-md5">43d3252c4a29fca1a2eb007cddb0909d</span><br>
sha256 <span class="stamp-sha">3ec3f9e27f6286b46c57d4d82ccf099770ab0b308b09e26b418e8ccbb5104107</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>