Animated bars, inline ProdCom timestamps, fullscreen auto-fit, dual resize corners
Title bars (tiles and the main menubar, which gains the same notch tab) now collapse and reopen with a height animation instead of popping. The menubar's hidden state persists per browser. ProdCom timestamps move inline to the right of the channel name, keeping their text style; the clock button toggles just their visibility. New fullscreen button (left of +): entering fullscreen auto-hides the menubar and auto-fits the layout — occupied columns stretch proportionally across the width, tiles whose bottom edge lands within two rows of the viewport bottom stretch to end exactly at it, small tiles (h ≤ 2) alone in their columns are exempt, and scrolling is disabled when nothing extends below the fold (deeper layouts keep natural rows and scrolling). All fullscreen fitting is visual-only and reverts on exit; editing affordances are parked while in it. Corner resize indicators now appear only on tile hover, and a second resize handle on the bottom-left corner resizes from that edge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
This commit is contained in:
@@ -19,6 +19,13 @@
|
||||
|
||||
<span class="spacer"></span>
|
||||
|
||||
<button class="tb-btn icon" id="fs-btn" title="Fullscreen — auto-fits the layout to the screen" aria-label="Fullscreen">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M4 9V5a1 1 0 0 1 1-1h4"/><path d="M20 9V5a1 1 0 0 0-1-1h-4"/>
|
||||
<path d="M4 15v4a1 1 0 0 0 1 1h4"/><path d="M20 15v4a1 1 0 0 1-1 1h-4"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="dropdown" id="add-dd">
|
||||
<button class="tb-btn icon" id="add-btn" title="Add a module tile" aria-label="Add tile">+</button>
|
||||
<div class="menu" id="add-menu" hidden></div>
|
||||
@@ -43,6 +50,8 @@
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<button id="topbar-notch" title="Hide / show the menu bar" aria-label="Hide or show the menu bar"></button>
|
||||
|
||||
<main id="gridwrap">
|
||||
<div id="grid">
|
||||
<div id="empty-state">No tiles yet — use “+ Add tile” to build this dashboard.<br>
|
||||
|
||||
Reference in New Issue
Block a user