refactor: switch how tabs work in an effort to make downstream stuff

easier
This commit is contained in:
Andy Burke 2026-02-23 11:49:23 -08:00
parent 7c4649924e
commit 873773bc91
14 changed files with 846 additions and 947 deletions

View file

@ -1,73 +1,71 @@
<script></script>
<style></style>
<div id="live-tab" class="tab">
<input
type="radio"
name="top-level-tabs"
id="live-tab-input"
class="tab-switch"
data-view="profile"
/>
<label for="live-tab-input" class="tab-label mockup"
><div class="icon live"></div>
<div class="label">Live</div></label
<input
type="radio"
name="top-level-tabs"
id="live-tab-input"
class="tabswitch"
data-view="profile"
/>
<label for="live-tab-input" class="tablabel mockup"
><div class="icon live"></div>
<div class="label">Live</div></label
>
<div class="panel">
<div
class="live-container"
style="
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-content: center;
justify-content: center;
flex-flow: wrap;
"
>
<div class="tab-content">
<div
class="live-container"
class="mockup"
style="
position: relative;
width: 100%;
height: 100%;
width: 95%;
max-width: 1024px;
border: 1px solid rgba(128, 128, 128, 0.5);
height: 66vh;
overflow: hidden;
"
></div>
<div
class="live-actions-container"
style="
width: 80%;
margin: 0 auto;
display: flex;
align-content: center;
justify-content: center;
flex-flow: wrap;
align-items: center;
justify-content: space-evenly;
height: 4rem;
"
>
<div
class="mockup"
style="
width: 95%;
max-width: 1024px;
border: 1px solid rgba(128, 128, 128, 0.5);
height: 66vh;
overflow: hidden;
"
></div>
<input
id="toggle-live-audio"
type="checkbox"
style="display: none; visibility: hidden"
/>
<label for="toggle-live-audio" class="mockup">
<i class="icon phone"></i>
<span>Audio</span>
</label>
<div
class="live-actions-container"
style="
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-evenly;
height: 4rem;
"
>
<input
id="toggle-live-audio"
type="checkbox"
style="display: none; visibility: hidden"
/>
<label for="toggle-live-audio" class="mockup">
<i class="icon phone"></i>
<span>Audio</span>
</label>
<input
id="toggle-live-video"
type="checkbox"
style="display: none; visibility: hidden"
/>
<label for="toggle-live-video" class="mockup">
<i class="icon camera"></i>
<span>Video</span>
</label>
</div>
<input
id="toggle-live-video"
type="checkbox"
style="display: none; visibility: hidden"
/>
<label for="toggle-live-video" class="mockup">
<i class="icon camera"></i>
<span>Video</span>
</label>
</div>
</div>
</div>