Andreas Reinhold / reiniandClaude Opus 5
0013e0154d
Plan step 35: <x-app-shell> becomes <x-scaffold>, M3's and Compose's name for the structure of bars, rails and panes, with no alias; every package view, the showcase, the tests, the skills, README and UPGRADE follow. Its markup and Tailwind classes stay for the navigation rewrite. The new fab slot places the FAB as Compose's Scaffold does - bottom-end, 16px from the edges below medium and 24px from it, clear of the navigation bar and of a snackbar on screen (resources/css/layout/scaffold.css) - and the content region tells a pane inside that the margin is already drawn. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
126 lines
6.7 KiB
PHP
126 lines
6.7 KiB
PHP
{{-- M3's window size classes, live: the one this window is in, what each one changes, and the
|
||
variants that key on them. The five cards light up through the variants themselves, so the
|
||
page proves the compiled breakpoints rather than describing them. --}}
|
||
|
||
<section id="layout" class="scroll-mt-24 space-y-6">
|
||
<h2 class="type-headline-md">Layout</h2>
|
||
|
||
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
||
Widths are M3's window size classes and nothing else: compact below 600px, then <code>medium:</code> 600,
|
||
<code>expanded:</code> 840, <code>large:</code> 1200 and <code>extra-large:</code> 1600, with
|
||
<code>max-medium:</code> and friends for "below". Tailwind's <code>sm:</code>…<code>2xl:</code> compile to
|
||
nothing. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
|
||
</p>
|
||
|
||
<div
|
||
x-data="{ width: window.innerWidth }"
|
||
x-on:resize.window="width = window.innerWidth"
|
||
class="flex flex-wrap items-baseline gap-x-4 gap-y-1 rounded-corner-lg bg-surface-container-low p-6"
|
||
data-test="window-class"
|
||
>
|
||
<span class="type-label-lg text-on-surface-variant">This window</span>
|
||
<span class="type-emphasized-headline-sm tabular-nums" x-text="width + 'px'"></span>
|
||
<span class="type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
|
||
</div>
|
||
|
||
<div class="grid gap-3 medium:grid-cols-5">
|
||
<div class="rounded-corner-md bg-surface-container p-4 max-medium:bg-primary-container max-medium:text-on-primary-container">
|
||
<p class="type-title-sm">Compact</p>
|
||
<p class="type-body-sm">below 600px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 medium:max-expanded:bg-primary-container medium:max-expanded:text-on-primary-container">
|
||
<p class="type-title-sm">Medium</p>
|
||
<p class="type-body-sm">600–839px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 expanded:max-large:bg-primary-container expanded:max-large:text-on-primary-container">
|
||
<p class="type-title-sm">Expanded</p>
|
||
<p class="type-body-sm">840–1199px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 large:max-extra-large:bg-primary-container large:max-extra-large:text-on-primary-container">
|
||
<p class="type-title-sm">Large</p>
|
||
<p class="type-body-sm">1200–1599px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 extra-large:bg-primary-container extra-large:text-on-primary-container">
|
||
<p class="type-title-sm">Extra-large</p>
|
||
<p class="type-body-sm">from 1600px</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto rounded-corner-lg border border-structure">
|
||
<table class="w-full type-body-md" data-table>
|
||
<thead>
|
||
<tr>
|
||
<th class="text-start">Class</th>
|
||
<th class="text-start">Navigation</th>
|
||
<th class="text-start">Panes</th>
|
||
<th class="text-start">Dialogs and sheets</th>
|
||
<th class="text-start">Margin</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Compact</td>
|
||
<td>Navigation bar; the rail opens as a modal</td>
|
||
<td>One</td>
|
||
<td>Full-screen dialogs, bottom sheets for choices, date pickers as dialogs</td>
|
||
<td>16px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Medium</td>
|
||
<td>Collapsed navigation rail</td>
|
||
<td>One</td>
|
||
<td>Basic dialogs, docked search and pickers</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Expanded</td>
|
||
<td>Navigation rail, collapsible; starts collapsed</td>
|
||
<td>Two: list-detail (<code><x-drawer pane></code>) or a 360px supporting pane</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Large</td>
|
||
<td>Navigation rail, expanded by default</td>
|
||
<td>Two; a fixed pane is 412px</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Extra-large</td>
|
||
<td>Navigation rail, expanded</td>
|
||
<td>Two, a third as a side sheet</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
||
<code><x-scaffold></code> does all of this: resize this showcase and watch the bar, the rail and the
|
||
content margin (<code>--material-margin</code>) change at 600, 840 and 1200px. A visitor who has chosen a rail
|
||
width keeps it; until then the rail follows the class.
|
||
</p>
|
||
|
||
<x-livewire-material::stack gap="space200" data-test="layout-components">
|
||
<h3 class="md-type-title-lg">The layout components</h3>
|
||
|
||
<p class="md-type-body-md md-ink-variant">
|
||
M3 describes a layout as a scaffold of bars and rails around panes, and names three canonical layouts. These are
|
||
those words as components, each taking <code>as</code>, <code>hide-below</code> and <code>hide-from</code>, and
|
||
only the spacing tokens for a gap or padding:
|
||
</p>
|
||
|
||
<x-livewire-material::stack as="ul" gap="space100" class="md-type-body-md">
|
||
<li><code><x-scaffold></code> — the bars, the rail and the FAB around the page (this showcase is one).</li>
|
||
<li><code><x-pane></code> — a content region with M3's margins and its own app bar.</li>
|
||
<li><code><x-list-detail></code> — a list and the detail of its selection: one pane below 840px, two from it.</li>
|
||
<li><code><x-supporting-pane></code> — a focus pane and a pane beside it from 840px, below it or a bottom sheet before.</li>
|
||
<li><code><x-feed></code> — cards in columns that multiply as the room grows, one column below 600px.</li>
|
||
<li><code><x-surface></code> — a tonal region: a surface role, padding, a corner and an outline.</li>
|
||
<li><code><x-stack></code>, <code><x-row></code> and <code><x-grid></code> — arrangement inside a pane.</li>
|
||
</x-livewire-material::stack>
|
||
</x-livewire-material::stack>
|
||
</section>
|