jason.woltje
5f57008aed
One observer per pane element, disconnected on leaving the page, so a closed and reopened pane rewrites links for its current organization. Project reads check the pane generation and organization before any DOM write. Request selection and expanded PRDs are kept per pane. A late navigation focuses its heading only when focus has not moved to the other pane. Project pages in a pane use a compact layout with container queries.
84 lines
7.8 KiB
CSS
84 lines
7.8 KiB
CSS
/* Side by side (U5, sample 07 "EXT 8"): a bar, then two panes with a divider between them. Each pane
|
|
has its own header with the organization's mark and edge, and its own scroll. One pane and a
|
|
shown-pane switch on a phone. Loaded after shell.css; every rule is scoped to the side-by-side page. */
|
|
html[data-organizations] .content:has(> #bus-view > .sbs){padding:0}
|
|
html[data-organizations] .sbs{margin:0;display:flex;flex-direction:column;min-height:0;height:calc(100vh - var(--bar-h,53px) - var(--foot-h,33px))}
|
|
html[data-organizations] .sbs .panebar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--canvas);flex-wrap:wrap}
|
|
html[data-organizations] .sbs .panebar h1{font-size:16px;font-weight:700;margin:0;line-height:1.4}
|
|
html[data-organizations] .sbs .panebar h1:focus{outline:none}
|
|
html[data-organizations] .sbs .panebar .note{font-size:13px;color:var(--muted)}
|
|
html[data-organizations] .sbs .panebar [data-pane-add]{margin-left:auto}
|
|
html[data-organizations] .sbs .ws-seg.pane-tabs{display:none;margin-left:0}
|
|
html[data-organizations] .sbs .pane-tabs>button{gap:5px;max-width:44vw}
|
|
html[data-organizations] .sbs .pane-tabs>button>span:last-child{overflow:hidden;text-overflow:ellipsis}
|
|
|
|
html[data-organizations] .panes{--sbs-a:1fr;--sbs-b:1fr;display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0}
|
|
html[data-organizations] .panes.two{grid-template-columns:minmax(0,var(--sbs-a)) 1px minmax(0,var(--sbs-b))}
|
|
html[data-organizations] .pane{display:flex;flex-direction:column;min-width:0;min-height:0}
|
|
html[data-organizations] .pane[hidden]{display:none}
|
|
html[data-organizations] .pane-h{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:inset 0 3px 0 var(--org,var(--line));min-width:0}
|
|
html[data-organizations] .pane-h .ttl{font-weight:700;color:var(--strong,var(--text));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
|
|
html[data-organizations] .pane-h .ttl small{font-weight:500;color:var(--muted);margin-left:6px;font-size:inherit}
|
|
html[data-organizations] .pane-h [data-pane-state]:empty{display:none}
|
|
html[data-organizations] .pane-pick{flex:0 1 180px;min-width:0;max-width:220px;margin-left:auto;font:500 12px/1.4 var(--font);color:var(--text);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);padding:3px 6px;min-height:0}
|
|
html[data-organizations] .pane-h .tools{display:flex;gap:2px;flex:none}
|
|
html[data-organizations] .pane-tool{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r);color:var(--muted);border:0;background:none;padding:0;min-height:0;cursor:pointer}
|
|
html[data-organizations] .pane-tool:hover{background:var(--raised);color:var(--text)}
|
|
html[data-organizations] .pane-tool[hidden]{display:none}
|
|
html[data-organizations] .pane-tool svg.i{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
|
html[data-organizations] .pane-line{margin:0;padding:6px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--text);background:color-mix(in srgb,var(--warn,#b7791f) 12%,var(--surface))}
|
|
html[data-organizations] .pane-line[hidden]{display:none}
|
|
html[data-organizations] .pane-body{overflow:auto;padding:14px;min-height:0;flex:1}
|
|
html[data-organizations] .pane-body:focus{outline:none}
|
|
html[data-organizations] .pane-body:focus-visible{outline:2px solid var(--focus,var(--action));outline-offset:-2px}
|
|
/* A page inside a pane is a section of the side-by-side page: smaller headings, no page chrome. */
|
|
html[data-organizations] .pane-body .ws h1{font-size:20px}
|
|
html[data-organizations] .pane-body .chat-area.pane-project{display:block;height:auto;min-height:0;overflow:visible;padding:0}
|
|
/* A project in a pane is compact (sample 07): the pane header already names the project and its
|
|
organization, so the page heading stays only for assistive technology and focus, the full-page
|
|
actions give way (North star and PRD are on the Requirements tab, Settings in the full view), and
|
|
the tabs, measures and current work come first. Project pages size some parts from the window
|
|
(projects.css); in a pane they size from the pane. */
|
|
html[data-organizations] .pane-body{container-type:inline-size}
|
|
html[data-organizations] .pane-body .project-header{display:block;width:auto;max-width:100%;margin:0 0 6px;padding:0}
|
|
html[data-organizations] .pane-body .project-header .project-heading,html[data-organizations] .pane-body .project-header .project-heading>div{display:block}
|
|
html[data-organizations] .pane-body .project-header-icon,html[data-organizations] .pane-body .project-actions{display:none}
|
|
html[data-organizations] .pane-body .project-header h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
|
html[data-organizations] .pane-body:has(.project-header h1:focus-visible){outline:2px solid var(--focus,var(--action));outline-offset:-2px}
|
|
html[data-organizations] .pane-body .project-header .project-heading p{margin:0;font-size:13px;color:var(--muted)}
|
|
html[data-organizations] .pane-body .project-tabs a{min-height:40px;padding:0 12px;font-size:14px}
|
|
html[data-organizations] .pane-body .project-metrics{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;padding:6px 0}
|
|
html[data-organizations] .pane-body .project-metrics a{padding:4px 12px;border-right:0;border-bottom:0;line-height:1.3}
|
|
html[data-organizations] .pane-body .project-metrics a span,html[data-organizations] .pane-body .project-metrics small{font-size:12px;overflow-wrap:anywhere}
|
|
html[data-organizations] .pane-body .project-metrics strong{font-size:20px}
|
|
html[data-organizations] .pane-body .project-metrics p{margin:6px 12px 0;padding-top:6px}
|
|
html[data-organizations] .pane-body .project-columns{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:12px}
|
|
html[data-organizations] .pane-body .project-columns h2{font-size:16px;margin:12px 0 8px}
|
|
html[data-organizations] .pane-body .project-columns h3{font-size:14px}
|
|
html[data-organizations] .pane-body .project-columns .project-section-title h2,html[data-organizations] .pane-body .project-columns aside>h2:first-child{margin-top:0}
|
|
@container (min-width:560px){
|
|
html[data-organizations] .pane-body .project-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
html[data-organizations] .pane-body .project-metrics a:not(:nth-child(4)){border-right:1px solid var(--line)}
|
|
}
|
|
/* The side-by-side page has its own bar; the page breadcrumb would name only one pane. */
|
|
body:has(#bus-view > .sbs) #breadcrumbs{display:none}
|
|
html[data-organizations] .content:has(> #bus-view > .sbs) > .org-cue{margin:8px 14px}
|
|
|
|
html[data-organizations] .pane-div{position:relative;background:var(--line);cursor:col-resize;touch-action:none;outline:none}
|
|
html[data-organizations] .pane-div::before{content:"";position:absolute;inset:0 -4px;z-index:1}
|
|
html[data-organizations] .pane-div:hover,html[data-organizations] .pane-div.dragging{background:var(--action)}
|
|
html[data-organizations] .pane-div:focus-visible{background:var(--action);box-shadow:0 0 0 2px var(--action)}
|
|
html[data-organizations] .pane-div[hidden]{display:none}
|
|
|
|
@media (max-width:760px){
|
|
html[data-organizations] .content:has(> #bus-view > .sbs){padding:0}
|
|
html[data-organizations] .sbs{height:auto}
|
|
html[data-organizations] .sbs .ws-seg.pane-tabs{display:inline-flex}
|
|
html[data-organizations] .sbs .hide-m{display:none}
|
|
html[data-organizations] .panes,html[data-organizations] .panes.two{grid-template-columns:minmax(0,1fr)}
|
|
html[data-organizations] .pane.alt,html[data-organizations] .pane-div{display:none}
|
|
html[data-organizations] .pane-body{overflow:visible}
|
|
html[data-organizations] .pane-h{flex-wrap:wrap}
|
|
html[data-organizations] .pane-pick{flex:1 1 100%;max-width:none;order:5;margin-left:0}
|
|
}
|