Skip to content

Let a declared page use the screen it is given #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
czpython merged 1 commit into from
Aug 31, 2026
+18 −4
Merged

Let a declared page use the screen it is given #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/druks-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -526,6 +526,13 @@ shows an app-scoped error and names the block.

Every block carries a `block` discriminator.

A page fills the screen it is given, and each block decides what to do with the
room. A table, an image gallery, `Columns`, a timeline and a metric row take the
width. A fact list is as wide as its facts. A chart and a progress bar grow with
the page and stop where more width stops helping them. Prose keeps a line
length, measured against the type size rather than the screen, so it stays
readable however wide the display is.

A block whose one required value is the thing it shows — its words, its
content, its identity — takes that value positionally, and every other value
by keyword:
Expand Down
15 changes: 11 additions & 4 deletions frontend/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2476,7 +2476,12 @@ textarea.set-textarea { background-image: none; height: auto; min-height: 96px;
/* ============================================================
DRUKS UI — the shell renders an app's Python page declarations
============================================================ */
.dui-page { max-width: 900px; padding: 20px 24px 40px; }
/* A declared page fills the screen, the way every other app page does. A block
that draws rather than reads takes the measure below: it grows with the page
and stops where more width stops helping. rem, so it follows the density the
operator chose; per cent, so it follows the page. Prose sets its own measure
in ch, which is the type size and not the screen. */
.dui-page { padding: 20px 24px 40px; --dui-measure: clamp(20rem, 60%, 63rem); }
.dui-parent { display: inline-block; margin-bottom: 10px; }
.dui-title { font-size: 20px; font-weight: 600; margin: 0; }
.dui-description { font-size: 13px; margin: 6px 0 0; line-height: 1.55; max-width: 68ch; }
Expand Down Expand Up @@ -2552,7 +2557,7 @@ textarea.set-textarea { background-image: none; height: auto; min-height: 96px;
.dui-timeline-at { font-size: 11px; min-width: 72px; }
.dui-timeline-desc { font-size: 12px; flex-basis: 100%; }

.dui-progress { margin: 14px 0; }
.dui-progress { margin: 14px 0; max-width: var(--dui-measure); }
.dui-progress-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.dui-progress-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.dui-progress-fill { display: block; height: 100%; background: var(--bucket-run); }
Expand Down Expand Up @@ -2590,7 +2595,9 @@ textarea.set-textarea { background-image: none; height: auto; min-height: 96px;
.dui-metric-value .dui-number { font-size: inherit; }
.dui-metric-desc { margin: 3px 0 0; font-size: 11.5px; }

.dui-fact-list { margin: 10px 0; display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; }
/* Both columns size to what they hold, so a fact list is as wide as its facts
and a label never drifts away from its value on a wide page. */
.dui-fact-list { margin: 10px 0; display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, max-content); gap: 6px 16px; }
.dui-fact { display: contents; }
.dui-fact-label { font-size: 12px; }
.dui-fact-value { margin: 0; font-size: 12.5px; }
Expand All @@ -2611,7 +2618,7 @@ textarea.set-textarea { background-image: none; height: auto; min-height: 96px;
.dui-list li { padding: 2px 0; }
.dui-unit { font-size: 11px; }

.dui-chart { margin: 16px 0; }
.dui-chart { margin: 16px 0; max-width: var(--dui-measure); }
.dui-chart-plot { display: block; width: 100%; height: 140px; }
.dui-chart-zero { stroke: var(--border-loud); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dui-chart-bar { fill: var(--bucket-run); }
Expand Down