mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
Merge pr/panel-resize into pr/mapillary-layer
Bring in portable, resizable rail panels. The Street Level rail rules get the same :not(.panel-floating) guard as CCTV's so the panel can float too. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Said TurkseverandClaude Opus 5.5 committed
commit
768f256720
19 files changed
+1045
-38
No files matched your search
@@ -103,6 +103,116 @@
|
||||
opacity: 0.96;
|
||||
}
|
||||
|
||||
/* ── Portable rail panels ────────────────────
|
||||
A header drag lifts a portable panel (PanelPositionControls) out of its
|
||||
rail into a fixed window that remembers its place and size. The rail's
|
||||
own placement rules in layers.css are guarded with :not(.panel-floating),
|
||||
so these only have to beat a panel's base placement (one id). */
|
||||
.panel-portable .panel-header {
|
||||
cursor: grab;
|
||||
}
|
||||
.panel-portable.panel-dragging .panel-header {
|
||||
cursor: grabbing;
|
||||
}
|
||||
#right-context-rail > .panel-floating {
|
||||
position: fixed;
|
||||
inset: auto;
|
||||
max-height: calc(100vh - 12px);
|
||||
margin: 0;
|
||||
flex: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
/* A collapsed window keeps its stored height for later but shows only its
|
||||
header strip, so the resize handles have nothing to attach to. */
|
||||
#right-context-rail > .panel-floating.collapsed {
|
||||
max-height: max-content;
|
||||
}
|
||||
.panel-floating[style*='height'] > .cctv-panel-inner {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
.panel-resize-edge,
|
||||
.panel-resize-grip {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
touch-action: none;
|
||||
}
|
||||
.panel-resize-edge[data-dir='n'],
|
||||
.panel-resize-edge[data-dir='s'] {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 7px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.panel-resize-edge[data-dir='n'] {
|
||||
top: -3px;
|
||||
}
|
||||
.panel-resize-edge[data-dir='s'] {
|
||||
bottom: -3px;
|
||||
}
|
||||
.panel-resize-edge[data-dir='e'],
|
||||
.panel-resize-edge[data-dir='w'] {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
width: 7px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.panel-resize-edge[data-dir='e'] {
|
||||
right: -3px;
|
||||
}
|
||||
.panel-resize-edge[data-dir='w'] {
|
||||
left: -3px;
|
||||
}
|
||||
.panel-resize-edge[data-dir='ne'],
|
||||
.panel-resize-edge[data-dir='nw'],
|
||||
.panel-resize-edge[data-dir='sw'] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.panel-resize-edge[data-dir='ne'] {
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.panel-resize-edge[data-dir='nw'] {
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.panel-resize-edge[data-dir='sw'] {
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.panel-resize-grip {
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: nwse-resize;
|
||||
opacity: 0.55;
|
||||
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
transparent 0 3px,
|
||||
rgba(0, 212, 255, 0.6) 3px 4px
|
||||
);
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
.panel-portable:hover .panel-resize-grip,
|
||||
.panel-resizing .panel-resize-grip {
|
||||
opacity: 1;
|
||||
}
|
||||
.panel-collapsible.collapsed > .panel-resize-edge,
|
||||
.panel-collapsible.collapsed > .panel-resize-grip {
|
||||
display: none;
|
||||
}
|
||||
.panel-resizing,
|
||||
.panel-resizing * {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
|
||||
+18
-13
@@ -161,8 +161,8 @@
|
||||
max-height var(--transition-fast);
|
||||
}
|
||||
#right-context-rail > #pp-toggles,
|
||||
#right-context-rail > #cctv-panel,
|
||||
#right-context-rail > #street-level-panel,
|
||||
#right-context-rail > #cctv-panel:not(.panel-floating),
|
||||
#right-context-rail > #street-level-panel:not(.panel-floating),
|
||||
#right-context-rail > #weather-panel,
|
||||
#right-context-rail > #recent-imagery-panel,
|
||||
#right-context-rail > #global-context-panel {
|
||||
@@ -176,8 +176,8 @@
|
||||
max-height: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#right-context-rail #cctv-panel,
|
||||
#right-context-rail #street-level-panel,
|
||||
#right-context-rail #cctv-panel:not(.panel-floating),
|
||||
#right-context-rail #street-level-panel:not(.panel-floating),
|
||||
#right-context-rail #weather-panel,
|
||||
#right-context-rail #recent-imagery-panel {
|
||||
width: 100%;
|
||||
@@ -192,8 +192,8 @@
|
||||
flex-shrink: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
#right-context-rail #cctv-panel.collapsed,
|
||||
#right-context-rail #street-level-panel.collapsed,
|
||||
#right-context-rail #cctv-panel.collapsed:not(.panel-floating),
|
||||
#right-context-rail #street-level-panel.collapsed:not(.panel-floating),
|
||||
#right-context-rail #weather-panel.collapsed,
|
||||
#right-context-rail #recent-imagery-panel.collapsed {
|
||||
width: var(--right-display-collapsed-width);
|
||||
@@ -257,19 +257,24 @@
|
||||
#right-context-rail.layout-focus {
|
||||
height: var(--right-stack-max-height);
|
||||
}
|
||||
#right-context-rail.layout-exclusive > [data-panel-id].collapsed {
|
||||
#right-context-rail.layout-exclusive
|
||||
> [data-panel-id].collapsed:not(.panel-floating) {
|
||||
display: none;
|
||||
}
|
||||
#right-context-rail.layout-focus > [data-panel-id].collapsed {
|
||||
#right-context-rail.layout-focus
|
||||
> [data-panel-id].collapsed:not(.panel-floating) {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
#right-context-rail.layout-focus.layout-exclusive > [data-panel-id].collapsed {
|
||||
#right-context-rail.layout-focus.layout-exclusive
|
||||
> [data-panel-id].collapsed:not(.panel-floating) {
|
||||
display: none;
|
||||
}
|
||||
#right-context-rail.layout-focus > #pp-toggles:not(.collapsed),
|
||||
#right-context-rail.layout-focus > #cctv-panel:not(.collapsed),
|
||||
#right-context-rail.layout-focus > #street-level-panel:not(.collapsed),
|
||||
#right-context-rail.layout-focus
|
||||
> #cctv-panel:not(.collapsed):not(.panel-floating),
|
||||
#right-context-rail.layout-focus
|
||||
> #street-level-panel:not(.collapsed):not(.panel-floating),
|
||||
#right-context-rail.layout-focus > #weather-panel:not(.collapsed),
|
||||
#right-context-rail.layout-focus > #recent-imagery-panel:not(.collapsed),
|
||||
#right-context-rail.layout-focus > #global-context-panel:not(.collapsed) {
|
||||
@@ -288,10 +293,10 @@
|
||||
> #weather-panel:not(.collapsed)
|
||||
.weather-panel-inner,
|
||||
#right-context-rail.layout-focus
|
||||
> #cctv-panel:not(.collapsed)
|
||||
> #cctv-panel:not(.collapsed):not(.panel-floating)
|
||||
.cctv-panel-inner,
|
||||
#right-context-rail.layout-focus
|
||||
> #street-level-panel:not(.collapsed)
|
||||
> #street-level-panel:not(.collapsed):not(.panel-floating)
|
||||
.street-level-panel-inner,
|
||||
#right-context-rail.layout-focus
|
||||
> #recent-imagery-panel:not(.collapsed)
|
||||
|
||||
@@ -216,10 +216,10 @@
|
||||
}
|
||||
|
||||
#right-context-rail #pp-toggles.collapsed .pp-header-row,
|
||||
#right-context-rail #cctv-panel,
|
||||
#right-context-rail #street-level-panel,
|
||||
#right-context-rail #cctv-panel.collapsed,
|
||||
#right-context-rail #street-level-panel.collapsed,
|
||||
#right-context-rail #cctv-panel:not(.panel-floating),
|
||||
#right-context-rail #cctv-panel.collapsed:not(.panel-floating),
|
||||
#right-context-rail #street-level-panel:not(.panel-floating),
|
||||
#right-context-rail #street-level-panel.collapsed:not(.panel-floating),
|
||||
#right-context-rail #recent-imagery-panel,
|
||||
#right-context-rail #recent-imagery-panel.collapsed,
|
||||
#right-context-rail #radio-panel,
|
||||
|
||||
Reference in new issue
Block a user