DashboardGrid

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

view DashboardGridDemo() =    <div.demo-stack>        <DashboardGrid id="dashboard-grid-demo">            <DashboardCell span={8}>                <Widget title="Revenue" subtitle="Last 8 weeks">                    <BarChart labels={["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]} values={[31, 34, 33, 38, 41, 40, 45, 48]} label="Revenue by week"/>                </Widget>            </DashboardCell>            <DashboardCell span={4}>                <Widget title="Orders"><Stat label="This week" value="312" delta={8.1} delta_suffix="%" card={false}/></Widget>            </DashboardCell>            <DashboardCell span={4} rows={2}>                <Widget title="Activity">                    <Timeline items={[{ title: "Order #1041 paid", time: "9:12" }, { title: "Refund #1033", time: "8:50", tone: "warning" }, { title: "New customer: Ada L.", time: "8:02", tone: "success" }]}/>                </Widget>            </DashboardCell>            <DashboardCell span={4}>                <Widget title="Visitors"><Stat label="Today" value="4,180" delta={-2.4} delta_suffix="%" card={false}/></Widget>            </DashboardCell>            <DashboardCell span={4}>                <Widget title="Conversion"><Stat label="Today" value="3.1%" delta={0.3} delta_suffix=" pts" card={false}/></Widget>            </DashboardCell>            <DashboardCell span={12}>                <Widget title="Recent orders" href="#dashboard_grid" padding="none">                    <DataTable columns={[{ key: "id", label: "Order" }, { key: "who", label: "Customer" }, { key: "total", label: "Total", align: "right" }]}                               rows={[{ id: "#1041", who: "Ada L.", total: "$120.00" }, { id: "#1040", who: "Grace H.", total: "$64.50" }]}/>                </Widget>            </DashboardCell>        </DashboardGrid>        <p.demo-note>Twelve columns: 8 + 4, then 4 + 4 + 4 (the tall one spans two rows), then 12. Narrow the window to see them stack.</p>    </div>

// DashboardGrid: widgets laid out on a grid of twelve columns, each spanning as// many as it asks for, and all of them stacking on a phone. DashboardCell is one// place on it; a Widget (or anything) goes inside.////   <DashboardGrid>//       <DashboardCell span={8}><Widget title="Revenue">...</Widget></DashboardCell>//       <DashboardCell span={4}><Widget title="Orders">...</Widget></DashboardCell>//       <DashboardCell span={4} rows={2}><Widget title="Activity">...</Widget></DashboardCell>//       <DashboardCell span={12}><Widget title="Recent orders">...</Widget></DashboardCell>//   </DashboardGrid>//// DashboardGrid: columns (12), gap in pixels (16), children (DashboardCells).// DashboardCell: span, how many columns it takes (4 by default: three in a row);// rows, how many rows (1). Between 600 and 900px wide the grid has half the// columns, so a cell takes half as many (at least one); under 600px every cell// takes the whole width. Cells in a row stretch to the tallest, so widgets line// up along the bottom.import ui/theme.qwe use ui_clslet dashboard_grid_css = css`.ui-dash { display: grid; gap: var(--ui-dash-gap, 16px); grid-template-columns: repeat(var(--ui-dash-cols, 12), minmax(0, 1fr)); grid-auto-rows: auto; }.ui-dash-cell { display: grid; min-width: 0; grid-column: span min(var(--c, 4), var(--ui-dash-cols, 12)); grid-row: span var(--r, 1); }.ui-dash-cell > * { min-width: 0; }@media (max-width: 899px) {  .ui-dash { grid-template-columns: repeat(max(1, calc(var(--ui-dash-cols, 12) / 2)), minmax(0, 1fr)); }  .ui-dash-cell { grid-column: span max(1, min(round(var(--c, 4) / 2), calc(var(--ui-dash-cols, 12) / 2))); }}@media (max-width: 599px) {  .ui-dash { grid-template-columns: minmax(0, 1fr); }  .ui-dash-cell { grid-column: 1 / -1; grid-row: auto; }}`view DashboardGrid(columns: int = 12, gap: int = 16, id: str? = null, class: str? = null, children) {    style global dashboard_grid_css    <div id={id} class={ui_cls(["ui-dash", class])} style={`--ui-dash-cols: ${columns}; --ui-dash-gap: ${gap}px`}>{children}</div>}view DashboardCell(span: int = 4, rows: int = 1, class: str? = null, children) {    style global dashboard_grid_css    <div class={ui_cls(["ui-dash-cell", class])} style={`--c: ${span}; --r: ${rows}`}>{children}</div>}