Give each canonical layout a page of its own in the Layout section
Plan step 38: the Layout section's Overview keeps its breakpoint
table and live "This window" readout (now a shared
<x-showcase::breakpoint-readout> partial, and the five breakpoint
cards a real range-queried data-md-showcase-breakpoint-card instead
of Tailwind's max-medium:/medium:max-expanded: variants), but the
three canonical layouts move off it onto a page of their own:
/material/layout/{list-detail,supporting-pane,feed}
(ShowcaseController::layout(), routes/showcase.php), each built on
the real component, sharing one <x-section-nav> Sections::
layoutPages() feeds. The search index gains an entry per page with
its own URL, and the component-homes scan now also reads the three
pages' own source so <x-list-detail>, <x-supporting-pane> and
<x-feed> keep a home.
The whole section moves onto the layout components and md-* classes:
no bespoke Tailwind grid or table styling remains.
LayoutTest's browser test now visits the three dedicated pages
instead of one shared /material/layout; a new Feature test asserts
each page renders and is linked from the Layout section.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
44a29a8ea2
commit
487176d345
@@ -1,71 +1,13 @@
|
||||
{{-- 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.
|
||||
{{-- M3's breakpoints, live: the one this window is in, what each one changes, and the cards that
|
||||
light up through real media queries, so the page proves the breakpoints rather than only
|
||||
describing them.
|
||||
|
||||
Then the layout components, and an example of each canonical layout — list-detail, supporting
|
||||
pane, feed — written as an application writes them, with the layout components and the md-*
|
||||
text classes and no Tailwind. Resize the window to watch each one change at its breakpoints. --}}
|
||||
Then the layout components, and the way on to the three canonical layouts — list-detail,
|
||||
supporting pane, feed — each on a page of its own (plan step 38), reached through the
|
||||
section navigation below. --}}
|
||||
|
||||
@php
|
||||
$examples = [
|
||||
'List-detail' => <<<'BLADE'
|
||||
<x-surface level="surface" corner="lg" outlined x-data="{ message: null }" style="overflow: clip">
|
||||
<x-list-detail x-model="message">
|
||||
<x-slot:list>
|
||||
<x-pane title="Inbox" heading="h3" :sticky="false">
|
||||
<x-list label="Messages">
|
||||
<x-list-item title="Anna Müller" description="The photos from Saturday" avatar="AM" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 1" x-bind:aria-current="selected === 1 ? 'true' : null" />
|
||||
<x-list-item title="Ben Keller" description="Contract, second draft" avatar="BK" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 2" x-bind:aria-current="selected === 2 ? 'true' : null" />
|
||||
<x-list-item title="Chiara Rossi" description="Train times for Friday" avatar="CR" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 3" x-bind:aria-current="selected === 3 ? 'true' : null" />
|
||||
</x-list>
|
||||
</x-pane>
|
||||
</x-slot:list>
|
||||
|
||||
<x-slot:detail>
|
||||
<x-pane heading="h3" back :sticky="false">
|
||||
<x-stack gap="space200">
|
||||
<p class="md-type-body-lg md-ink-variant" x-show="! selected">Select a message to read it.</p>
|
||||
<p class="md-type-headline-sm" x-show="selected" x-text="{ 1: 'The photos from Saturday', 2: 'Contract, second draft', 3: 'Train times for Friday' }[selected]"></p>
|
||||
<p class="md-type-body-lg" x-show="selected">Below 840px the list gives way to this message, with a back button that returns you — and your focus — to the list. From 840px both panes show, the list 360px wide and 412px from 1200px.</p>
|
||||
</x-stack>
|
||||
</x-pane>
|
||||
</x-slot:detail>
|
||||
</x-list-detail>
|
||||
</x-surface>
|
||||
BLADE,
|
||||
'Supporting pane' => <<<'BLADE'
|
||||
<x-supporting-pane label="Comments" compact="sheet">
|
||||
<x-slot:main>
|
||||
<x-surface level="surface" corner="lg" style="overflow: clip">
|
||||
<x-pane title="Trip proposal" subtitle="Draft · edited today" heading="h3" :sticky="false">
|
||||
<x-stack gap="space200" style="padding-block-end: var(--md-sys-measurement-space300)">
|
||||
<p class="md-type-body-lg">Three days by the lake in June: the train on Friday morning, two nights at the harbour, and a walk round the old town on Sunday before the train home.</p>
|
||||
<p class="md-type-body-lg">From 840px the comments sit beside the proposal, 360px wide (412px from 1200px). Below it they are a bottom sheet docked to the window: press its handle to read them.</p>
|
||||
</x-stack>
|
||||
</x-pane>
|
||||
</x-surface>
|
||||
</x-slot:main>
|
||||
|
||||
<x-slot:supporting>
|
||||
<x-surface level="surface-container-low" corner="lg" padding="space200">
|
||||
<x-list label="Comments">
|
||||
<x-list-item title="Anna Müller" description="Friday works for me." avatar="AM" />
|
||||
<x-list-item title="Ben Keller" description="Can we stay a third night?" avatar="BK" />
|
||||
</x-list>
|
||||
</x-surface>
|
||||
</x-slot:supporting>
|
||||
</x-supporting-pane>
|
||||
BLADE,
|
||||
'Feed' => <<<'BLADE'
|
||||
<x-feed min-item="220px">
|
||||
<x-card title="Harbour at dawn" subtitle="12 photos" variant="outlined">The boats before the ferry.</x-card>
|
||||
<x-card title="Old town" subtitle="31 photos" variant="outlined">Every lane, twice.</x-card>
|
||||
<x-card title="Lake swim" subtitle="4 videos" variant="outlined">Colder than it looks.</x-card>
|
||||
<x-card title="Market" subtitle="18 photos" variant="outlined">Cheese, mostly.</x-card>
|
||||
<x-card title="The long walk" subtitle="9 photos" variant="outlined">Up to the ridge and back.</x-card>
|
||||
<x-card title="Train home" subtitle="3 photos" variant="outlined">Asleep by the second stop.</x-card>
|
||||
</x-feed>
|
||||
BLADE,
|
||||
'Surfaces, stacks, rows and grids' => <<<'BLADE'
|
||||
<x-stack gap="space300">
|
||||
<x-grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 4]" gap="space200">
|
||||
@@ -88,59 +30,48 @@
|
||||
];
|
||||
@endphp
|
||||
|
||||
<section id="layout" class="scroll-mt-24 space-y-6">
|
||||
<h2 class="type-headline-md">Layout</h2>
|
||||
<x-livewire-material::stack as="section" id="layout" gap="space300">
|
||||
<h2 class="md-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 class="md-type-body-md md-ink-variant">
|
||||
Widths are M3's breakpoints and nothing else: compact below 600px, then medium 600, expanded 840, large 1200
|
||||
and extra-large 1600. 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>
|
||||
<x-showcase::breakpoint-readout />
|
||||
|
||||
<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>
|
||||
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 5]" gap="space200">
|
||||
<div data-md-showcase-breakpoint-card="compact">
|
||||
<p class="md-type-title-sm">Compact</p>
|
||||
<p class="md-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 data-md-showcase-breakpoint-card="medium">
|
||||
<p class="md-type-title-sm">Medium</p>
|
||||
<p class="md-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 data-md-showcase-breakpoint-card="expanded">
|
||||
<p class="md-type-title-sm">Expanded</p>
|
||||
<p class="md-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 data-md-showcase-breakpoint-card="large">
|
||||
<p class="md-type-title-sm">Large</p>
|
||||
<p class="md-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 data-md-showcase-breakpoint-card="extra-large">
|
||||
<p class="md-type-title-sm">Extra-large</p>
|
||||
<p class="md-type-body-sm">from 1600px</p>
|
||||
</div>
|
||||
</div>
|
||||
</x-livewire-material::grid>
|
||||
|
||||
<div class="overflow-x-auto rounded-corner-lg border border-structure">
|
||||
<table class="w-full type-body-md" data-md-table>
|
||||
<x-livewire-material::surface corner="lg" outlined style="overflow-x: auto">
|
||||
<x-livewire-material::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>
|
||||
<th>Class</th>
|
||||
<th>Navigation</th>
|
||||
<th>Panes</th>
|
||||
<th>Dialogs and sheets</th>
|
||||
<th>Margin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -180,10 +111,10 @@
|
||||
<td>24px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</x-livewire-material::table>
|
||||
</x-livewire-material::surface>
|
||||
|
||||
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
||||
<p class="md-type-body-md md-ink-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.
|
||||
@@ -209,7 +140,13 @@
|
||||
</x-livewire-material::stack>
|
||||
</x-livewire-material::stack>
|
||||
|
||||
<x-livewire-material::stack gap="space200">
|
||||
<h3 class="md-type-title-lg">Each canonical layout, on a page of its own</h3>
|
||||
|
||||
<x-livewire-material::section-nav :items="array_values(\NoNameWeb\LivewireMaterial\Showcase\Sections::layoutPages())" label="Layout pages" />
|
||||
</x-livewire-material::stack>
|
||||
|
||||
@foreach ($examples as $title => $code)
|
||||
<x-showcase::example :$title :$code stack />
|
||||
@endforeach
|
||||
</section>
|
||||
</x-livewire-material::stack>
|
||||
|
||||
Reference in New Issue
Block a user