mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
feat(ui): join the open right rail tab to its panel
The open tab and its panel share one glass surface and one outline, like a folder tab: the panel card draws no border of its own, the rail's ::before draws the outline with a notch at the tab, the tab closes the shape with its own borders and two concave fillets round the inner corners. The strip publishes the open tab's extent and the panel's height on the rail; a short panel grows to reach its tab. Cyber joins square below its chamfer. Unselected tabs are plain labels. Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
1 parent
f2e23249eb
commit
65c1ae67f2
6 files changed
+345
-45
No files matched your search
@@ -1509,6 +1509,21 @@ the panels' own translated header titles. The strip marks the rail with
|
||||
rail without the strip keeps its legacy geometry. Phones hide the strip and
|
||||
keep the sheet shell; Cockpit hides the rail and the strip with it.
|
||||
|
||||
The open tab and its panel read as one shape, like a folder tab: they share
|
||||
the glass surface and one outline, and the other tabs are borderless labels.
|
||||
The panel card keeps its surface but draws no border; the rail's `::before`
|
||||
draws the outline around the card with a notch where the tab joins, the open
|
||||
tab closes the shape with its own top, right and bottom borders, and two
|
||||
concave fillets round the inner corners (Cyber's chamfered frames join
|
||||
square, and its strip starts below the frame's upper chamfer). The strip
|
||||
publishes the join on the rail as inline custom properties, re-measured
|
||||
through a ResizeObserver and on strip scroll: `--rail-tab-top` and
|
||||
`--rail-tab-bottom` place the notch and set the open panel's minimum height,
|
||||
so a short panel such as Context still reaches its tab, and
|
||||
`--rail-panel-height` sizes the outline, since the rail is taller than its
|
||||
panel in the focus layout. The first tab starts level with the panel's top
|
||||
edge, so the outline's top runs straight into it with no corner.
|
||||
|
||||
## Phone layout
|
||||
|
||||
At 720px and narrower, `src/ui/mobileShell.js` keeps the globe full screen and
|
||||
|
||||
Reference in new issue
Block a user