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

zebra-spaces: shared screens render in the left column (full width), game iframe hides while sharing

Browse source 
Previously sec-screens lived inside the controls aside, capped at 520px
wide — useless for any real screen view. Move it into the timeline
column at the top, where there's actual horizontal space. CSS :has()
on .timeline hides the game tabs + iframe whenever a screen tile is
visible, so the screen owns the full left column. As soon as the last
sharer stops, the game switcher returns.
This commit is contained in:
Russell Ballestrini 2026-06-01 15:21:38 -04:00
parent 70de089754
commit e8ba836b9c
No known key found for this signature in database
1 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
web/zebra-spaces.html
View file

@ -57,19 +57,24 @@
* sinks for the WebRTC track, no UI required */
audio { display: none; }
/* screen-share thumbnails */
/* screen-share tiles render in the LEFT (timeline) column at full width.
* When sec-screens is shown the game tabs + iframe are hidden so the
* screen owns the column. */
#screens { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.screen-tile {
border: 1px solid #000; background: #000; padding: 0;
display: flex; flex-direction: column;
}
.screen-tile video {
width: 100%; height: auto; max-height: 70vh; display: block; background: #000;
width: 100%; height: auto; max-height: 80vh; display: block; background: #000;
}
.screen-tile .screen-meta {
background: #111; color: #ddd; font-size: 0.7rem; padding: 0.3rem 0.5rem;
display: flex; justify-content: space-between;
}
/* sec-screens visible → push everything else in the timeline column down or hide */
.timeline:has(> #sec-screens:not(.hidden)) > .game-tabs,
.timeline:has(> #sec-screens:not(.hidden)) > #game-frame { display: none; }
h1 {
font-family: 'chunkfiveregular', serif;
font-size: 3rem; font-weight: normal; letter-spacing: 0.02em;
@ -179,6 +184,14 @@
<div class="page">
<main class="timeline">
<!-- shared-screen tiles take priority over the game iframe. When sec-screens
is visible (someone is sharing) the game tabs + iframe get hidden via
CSS so the screen has the full left column. -->
<section id="sec-screens" class="hidden">
<h2>screens</h2>
<div id="screens"></div>
</section>
<!-- placeholder content until the v0.3 event timeline lands: a game switcher
framing an external playable. Iframes load unsandboxed so the game JS can
run; if a target refuses framing (X-Frame-Options / CSP frame-ancestors)
@ -303,11 +316,6 @@
<div id="members"></div>
</section>
<section id="sec-screens" class="hidden">
<h2>screens</h2>
<div id="screens"></div>
</section>
<section id="sec-screen-share" class="hidden">
<h2>share</h2>
<div class="row">
@ -1561,8 +1569,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-01</span><br>
md5 <span class="stamp-md5">751ccf227c674271a292fde8951760b7</span><br>
sha256 <span class="stamp-sha">19eb0dd6678ad1ff7d3efdcacc16f3df2b307ce277f5c1bef586632c20d127de</span><br>
md5 <span class="stamp-md5">008a832a8d63dfcdc90c233c788d06ed</span><br>
sha256 <span class="stamp-sha">da27ddaf0020e72ece6bdb1c15c32bcdfc63de5b286e09c1602bffdb4109d137</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>