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

zebra-report: pin cameras column + focus-mode collapse — mirror

Browse source
This commit is contained in:
russell@unturf.com 2026-06-02 09:03:12 -04:00
parent 493f9fff86
commit 03afea7dd6
No known key found for this signature in database
1 changed files with 22 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -100,35 +100,41 @@
* controls (kept narrow so the screen share gets maximum pixels).
* Both columns get min-width:0 so they shrink without forcing a
* horizontal scrollbar. */
/* three columns: cameras-vertical | screen/timeline | controls.
* The cameras column auto-collapses to width:0 when nobody has a
* camera on (.hidden), so a typical mic-only room reads as the
* original two-column layout. */
/* three columns: cameras (left) | timeline/screen (middle) | controls (right).
* The 220px cameras track stays reserved even when no camera is live —
* .hidden hides the section content but the column itself stays put so
* the timeline (with the game iframe or a screen share) keeps its
* middle position instead of sliding leftmost. */
.page {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 360px);
grid-template-columns: 220px minmax(0, 1fr) minmax(0, 360px);
gap: 1.25rem;
align-items: start;
}
.cameras-col {
width: 220px; min-width: 0;
min-width: 0;
border-right: 1px solid #ddd; padding-right: 1.25rem;
display: flex; flex-direction: column;
}
.cameras-col.hidden { display: none; }
/* collapsed: right column folds away so the screen+cameras layout
* fills the viewport. */
.cameras-col.hidden h2,
.cameras-col.hidden #cameras { display: none; }
/* hide-panel = focus mode: both side columns fold away, screen+timeline
* fills the full viewport. Cameras and controls both go to display:none
* so the screen-share / game iframe has nothing competing with it. */
.page.controls-collapsed {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: 1.25rem;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.page.controls-collapsed > .controls { display: none; }
.page.controls-collapsed > .controls,
.page.controls-collapsed > .cameras-col { display: none; }
.page.controls-collapsed > .timeline { border-right: none; padding-right: 0; }
/* honour the pre-paint pref so first-paint matches saved state */
html.controls-collapsed-pref .page {
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
html.controls-collapsed-pref .page > .controls { display: none; }
html.controls-collapsed-pref .page > .controls,
html.controls-collapsed-pref .page > .cameras-col { display: none; }
html.controls-collapsed-pref .page > .timeline { border-right: none; padding-right: 0; }
.timeline {
border-right: 1px solid #ddd; padding-right: 1.25rem; min-height: 60vh;
@ -2249,8 +2255,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">8adf0c5717ac94980b9f3f986f6c947b</span><br>
sha256 <span class="stamp-sha">60d9c9bb2e8c72334e53847efd8f151b972235a2425b39c2302f4fe5c0897fc7</span><br>
md5 <span class="stamp-md5">a6c36b06668308278c7645054fb5e432</span><br>
sha256 <span class="stamp-sha">cc3fe5cbc7e83183066c4ea09d1bb9d261a1a75c1abe51edfd6f2898e44d5374</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>