@synopackageland/ui 0.20.11 → 0.20.12

package/docs/adaptive-layout.md

@@ -146,6 +146,40 @@ this in Chromium at 390 and 768 with touch, with Android emulated by a
 viewport resize and iOS by a stand-in visual viewport. A real-device pass on
 iOS Safari and Android Chrome is still needed (spec D6).
 
+## Short screens
+
+A screen at most 480px tall (a phone in landscape: 753×279, 667×375,
+844×390) is too short for a page header, a section strip, the settings rows and
+an Apply footer stacked over each other. Outside the phone presentation,
+`AppLayout` then switches to its short mode (`SHORT_VIEWPORT_QUERY`,
+`(max-height: 480px)` of the viewport, so a DSM window on a desktop never gets
+it). The root carries `data-ui-layout-short`, and `APP_SHORT_KEY` tells
+components below it. Every App gets it; there is nothing to set.
+
+- **The title is in the bar.** The page's title (AppLayout's `title`, else
+  its `PageHeader`'s) leads the bar above the page (`data-ui-layout-bar`),
+  in the row of the `toolbar` slot. A `PageHeader` with the same title keeps
+  its heading for screen readers only, and takes no room when it has nothing
+  else to show.
+- **The page scrolls as one.** A page holding a `SettingsPage` or a
+  `SectionTabs fill` no longer squeezes the settings body between the bar,
+  the strip and the footer: in a layout with a height of its own (`height="fill"`,
+  or a content area the App clips or scrolls) the whole column scrolls, the
+  bar and the header scroll away, the section strip sticks at the top and
+  Reset / Apply at the bottom.
+  Other pages, such as a DataGrid that scrolls itself, keep their layout.
+- **The header does not stick.** A `PageHeader` scrolls with the page, in a
+  tight row (8px above and below).
+
+At any height, a `SectionTabs fill` strip (and a pushed section's Back header on a phone) sticks below a sticky `PageHeader`
+in the same `PageContent` (`--ui-page-sticky-top`, the header's height)
+instead of sliding under it.
+
+A phone in portrait keeps the phone presentation unchanged. `node
+scripts/check-short-viewport.mjs [out-dir]` (after `pnpm build`) checks the
+three landscape sizes, 360×697 and 1280×800 for a shell that hides its title,
+one that shows a `PageHeader` (filled or not) and a filled AppLayout.
+
 ## Web presentation sidebar
 
 In `web`, the sidebar's 48px head row ends with a collapse button, and a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.20.11",
+  "version": "0.20.12",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",
@@ -92,6 +92,7 @@
     "check:text-select": "node scripts/check-text-select.mjs",
     "check:date-picker": "node scripts/check-date-picker.mjs",
     "check:full-page": "node scripts/check-full-page.mjs",
+    "check:short-viewport": "node scripts/check-short-viewport.mjs",
     "check:detail-surface": "node scripts/check-detail-surface.mjs",
     "check:internal": "node --test scripts/check-internal-content.test.mjs scripts/check-npm-metadata.test.mjs && node scripts/check-internal-content.mjs --repo .",
     "check:npm-metadata": "node scripts/check-npm-metadata.mjs",