Lift the snackbar above a toolbar placed at the bottom
SealShare's only navigation is a floating toolbar at place="bottom". In 1.x it set --material-bottom-bar to lift the snackbar over it; in 2.0.0 the toolbar reads that variable to place itself, so an application can no longer set it, and the snackbar landed on the toolbar. M3 nudges a snackbar "upward to avoid overlapping FABs/docked toolbars" and never puts one in front of navigation. A bottom-placed toolbar now publishes --material-bottom-toolbar, the distance from the window's bottom edge to its top: floating 64px (as tall as an md or lg FAB beside it), docked 64px plus the safe area it pads, rounded docked floating from 840px. It is declared on :root and again on the scaffold's root, the only place its formula sees the bar. The snackbar clears whichever of the bar and the toolbar reaches higher, and a page pads its end with it. Two Chromium tests, both failing on the old formula: a docked toolbar on a scaffold's navigation bar, and a floating toolbar without a scaffold (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
579af9e7a9
commit
d0bed0da69
@@ -117,6 +117,8 @@ Every component that meets the edge of the screen (app bar, navigation bar and r
|
||||
|
||||
`--material-snackbar-height` is the height of the snackbar on screen, written on `<html>` by `<x-toast>` while one shows and removed when it goes. `<x-button fab>` reads it, so the FAB sits above the snackbar rather than under it, as M3 requires; so does an `<x-fab>` in `<x-scaffold>`'s `fab` slot, which places it.
|
||||
|
||||
`--material-bottom-toolbar` is the distance from the window's bottom edge to the top of a toolbar at `place="bottom"`, unset while there is none: the snackbar clears it, and a page without `<x-scaffold>` pads its end with it (see `<x-toolbar>`).
|
||||
|
||||
`--material-bottom-extra` (default `0px`) is the height of anything the application docks on top of the phone's navigation bar in `<x-scaffold>` (an offline banner): the scaffold adds it to `--material-bottom-bar` (64px + the bottom inset), so the snackbar, a `fab` button, the scaffold's FAB and the page's bottom padding clear it too. Set it while the docked element shows, and remove it when it goes; place the docked element itself directly above the bar, at `bottom: calc(4rem + var(--material-safe-bottom, env(safe-area-inset-bottom)))`, on a compact window (below `medium`) only.
|
||||
|
||||
## Toasts
|
||||
@@ -1027,6 +1029,8 @@ M3 Expressive toolbar, `role="toolbar"` (arrow keys move between controls). `var
|
||||
|
||||
A docked toolbar and a navigation bar occupy the same screen region and must never be on screen together: show the bar on a primary page and the toolbar on a secondary or contextual one. A `place="bottom"` toolbar clears `--material-bottom-bar` if a bar is there anyway, so nothing is buried.
|
||||
|
||||
A `place="bottom"` toolbar publishes `--material-bottom-toolbar`: the distance from the window's bottom edge to its top, bottom safe area and navigation bar included. The snackbar lifts above it by itself; pad the end of the page so its last line clears the toolbar: `padding-block-end: calc(var(--material-bottom-toolbar, 0px) + var(--md-sys-measurement-space200))`. Never set `--material-bottom-bar` for a toolbar: the toolbar reads that variable to place itself.
|
||||
|
||||
Large screens: `rounded` gives a *docked* toolbar M3's web/large-screen form — from `expanded` (840px) fully rounded and spanning its container (at `place="bottom"` it lifts 16px off the window's edges); below `expanded` it stays the square full-width bar M3 requires. Divide groups of controls with `<x-divider vertical />` (`<x-divider />` in a vertical toolbar); inside a toolbar it stands as tall as the icon buttons. A floating toolbar is fully rounded already and has no large-screen form: M3 lets it show more controls there, or splits the actions into two toolbars at opposite edges.
|
||||
|
||||
```blade
|
||||
|
||||
@@ -10,8 +10,10 @@
|
||||
* the text through `[data-md-toast-wrap]`, bound the same way — M3's "two lines with longer
|
||||
* action" configuration.
|
||||
*
|
||||
* It lifts above a bottom bar through `--material-bottom-bar`; `data-md-position="bottom-start"`
|
||||
* moves it to the start edge, with M3's margin growing from `medium`. resources/js/snackbar.js
|
||||
* It lifts above a bottom bar through `--material-bottom-bar`, and above a toolbar placed at the
|
||||
* bottom through the `--material-bottom-toolbar` toolbar.css publishes — whichever reaches higher,
|
||||
* as M3 nudges a snackbar clear of a docked toolbar and never in front of navigation;
|
||||
* `data-md-position="bottom-start"` moves it to the start edge, with M3's margin growing from `medium`. resources/js/snackbar.js
|
||||
* publishes the snackbar's own height as `--material-snackbar-height`, so a FAB (fab.css) can
|
||||
* lift clear of it — M3 puts a snackbar above a FAB, never in front of or behind one (ACT-17).
|
||||
* Below `medium` it is full width; from there it hugs its line length, which an application's own
|
||||
@@ -37,7 +39,7 @@
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
inset-inline: var(--md-sys-measurement-space200);
|
||||
bottom: calc(var(--material-bottom-bar, 0px) + var(--md-sys-measurement-space200));
|
||||
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-bottom-toolbar, 0px)) + var(--md-sys-measurement-space200));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -190,4 +190,44 @@
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* What a toolbar at the bottom covers, published as --material-bottom-toolbar: the distance from
|
||||
* the window's bottom edge to the toolbar's top, each formula the placement above plus the
|
||||
* height. The snackbar clears it (toast.css) — M3 nudges a snackbar "upward to avoid overlapping
|
||||
* FABs/docked toolbars" and never puts one "in front of … navigation"
|
||||
* (docs/reference/m3/components-actions-communication-containment.md § Snackbar) — and a page
|
||||
* pads its end with it, so its last line never hides behind the toolbar.
|
||||
*
|
||||
* Declared on the root and again on <x-scaffold>'s root: a custom property resolves its var()s
|
||||
* where it is declared, and --material-bottom-bar is only set on the scaffold's root, so only
|
||||
* there does the formula see the bar. A floating toolbar is 64px, beside an 80px (`md`) or
|
||||
* 96px (`lg`) FAB as tall as the FAB; a docked one is 64px plus the bottom safe area it pads,
|
||||
* until `rounded` lifts it off the edge from `expanded`. A vertical toolbar, which belongs at
|
||||
* the end edge, publishes nothing. */
|
||||
:root:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])),
|
||||
[data-md-scaffold]:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])) {
|
||||
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
|
||||
}
|
||||
|
||||
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']),
|
||||
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']) {
|
||||
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 80px);
|
||||
}
|
||||
|
||||
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']),
|
||||
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']) {
|
||||
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 96px);
|
||||
}
|
||||
|
||||
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']),
|
||||
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']) {
|
||||
--material-bottom-toolbar: calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
||||
}
|
||||
|
||||
@media (width >= 840px) {
|
||||
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']),
|
||||
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']) {
|
||||
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,9 @@
|
||||
A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
|
||||
show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
|
||||
one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never
|
||||
buried under `<x-scaffold>`'s bar.
|
||||
buried under `<x-scaffold>`'s bar. It publishes what it covers in turn, as
|
||||
`--material-bottom-toolbar` (the distance from the window's bottom edge to its top): the
|
||||
snackbar lifts above it, and a page pads its end with it.
|
||||
|
||||
Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a
|
||||
`role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js,
|
||||
|
||||
Reference in New Issue
Block a user