StackedLayout

import ui/theme.qwe use theme_cssuse ui/stacked_layout.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

view StackedLayoutDemoBar(label: str) =    <div style="padding: 10px 16px; background: var(--ui-subtle); border-block: 1px solid var(--ui-border); font-size: 13px; font-weight: 500">{label}</div>view StackedLayoutDemo() =    <div.demo-stack>        <div id="stacked-layout-demo-short" style="height: 300px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: auto">            <StackedLayout height="100%" pad={16} header={<StackedLayoutDemoBar label="Header"/>} footer={<StackedLayoutDemoBar label="Footer, kept at the bottom"/>}>                <p style="margin: 0">Short content: the footer stays at the bottom of the window anyway.</p>            </StackedLayout>        </div>        <div id="stacked-layout-demo-long" style="height: 220px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: auto">            <StackedLayout height="100%" pad={16} sticky={true} header={<StackedLayoutDemoBar label="Sticky header"/>} footer={<StackedLayoutDemoBar label="Footer, pushed down by the content"/>}>                {for i in range(1, 9) => <p>Paragraph {i}: long content pushes the footer down; scroll to see the header stay.</p>}            </StackedLayout>        </div>    </div>

// StackedLayout: a page in three bands, a header, the content and a footer, with// the footer kept at the bottom of the window when the content is short, and// pushed down by it when it is long. The header can stay put as the page scrolls.////   <StackedLayout header={<Navbar .../>} footer={<Footer .../>}>//       <Container> ... </Container>//   </StackedLayout>//// header, footer: HTML for the bands at the top and bottom. children: the content.// height: the whole thing's least height, as CSS ("100vh"; "100dvh" on phones with// a bar that hides). sticky: the header stays at the top as the content scrolls.// pad: room around the content, in pixels (0; the content usually brings its own).import ui/theme.qwe use ui_clslet stacked_layout_css = css`.ui-stacked { display: flex; flex-direction: column; min-height: var(--ui-stacked-h, 100vh); min-width: 0; color: var(--ui-fg); font: 15px/1.5 var(--ui-font); }.ui-stacked-header, .ui-stacked-footer { flex: none; }.ui-stacked-sticky > .ui-stacked-header { position: sticky; top: 0; z-index: 10; }.ui-stacked-main { flex: 1 1 auto; min-width: 0; padding: var(--ui-stacked-pad, 0); }.ui-stacked-main > :first-child { margin-top: 0; }.ui-stacked-main > :last-child { margin-bottom: 0; }`view StackedLayout(header = null, footer = null, height: str = "100vh", sticky: bool = false, pad: int = 0,                   id: str? = null, class: str? = null, children) {    style global stacked_layout_css    <div class={ui_cls(["ui-stacked", sticky && "ui-stacked-sticky", class])} id={id}         style={`--ui-stacked-h: ${height}; --ui-stacked-pad: ${pad}px`}>        {header != null && <header.ui-stacked-header>{header}</header>}        <div.ui-stacked-main>{children}</div>        {footer != null && <footer.ui-stacked-footer>{footer}</footer>}    </div>}