From d65e25b208f0e40aac2f762774724d68ff283c6d Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 14:52:01 +0200 Subject: [PATCH] Show each canonical layout on the showcase's Layout page Plan step 35: the Layout section gains a working example of list-detail, supporting pane and feed, and one of surfaces, stacks, rows and grids, written with the layout components and md-* text classes only; the panes table names and . The showcase's own Tailwind stays for step 38. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- .../views/showcase/sections/layout.blade.php | 94 ++++++++++++++++++- tests/Browser/LayoutTest.php | 23 +++++ 2 files changed, 115 insertions(+), 2 deletions(-) diff --git a/resources/views/showcase/sections/layout.blade.php b/resources/views/showcase/sections/layout.blade.php index 2dac0eb3..94cce751 100644 --- a/resources/views/showcase/sections/layout.blade.php +++ b/resources/views/showcase/sections/layout.blade.php @@ -1,6 +1,92 @@ {{-- 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. --}} + page proves the compiled breakpoints rather than 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. --}} + +@php + $examples = [ + 'List-detail' => <<<'BLADE' + + + + + + + + + + + + + + + +

Select a message to read it.

+

+

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.

+ + + + + + BLADE, + 'Supporting pane' => <<<'BLADE' + + + + + +

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.

+

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.

+ + + + + + + + + + + + + + + BLADE, + 'Feed' => <<<'BLADE' + + The boats before the ferry. + Every lane, twice. + Colder than it looks. + Cheese, mostly. + Up to the ridge and back. + Asleep by the second stop. + + BLADE, + 'Surfaces, stacks, rows and grids' => <<<'BLADE' + + +

lowest, outlined

 +

low

 +

high

 +

highest

 + + + + +

A row that stacks below 600px

+

Its middle item is hidden from 840px.

+ +

Widen the window past 840px and this goes.

 + + + + BLADE, + ]; +@endphp

Layout

@@ -75,7 +161,7 @@ Expanded Navigation rail, collapsible; starts collapsed - Two: list-detail (<x-drawer pane>) or a 360px supporting pane + Two: <x-list-detail>, or <x-supporting-pane> at 360px Basic dialogs, side sheets 24px @@ -122,4 +208,8 @@
  • <x-stack>, <x-row> and <x-grid> — arrangement inside a pane.
    • + + @foreach ($examples as $title => $code) + + @endforeach
    diff --git a/tests/Browser/LayoutTest.php b/tests/Browser/LayoutTest.php index 29d7ddda..af83448e 100644 --- a/tests/Browser/LayoutTest.php +++ b/tests/Browser/LayoutTest.php @@ -463,3 +463,26 @@ it('draws no second margin for a pane or a canonical layout inside the scaffold\ ->assertScript(layoutRect('#text', 'left').' - '.layoutRect('main', 'left').' === 24') ->assertScript(layoutStyle('#pane [data-md-pane-body]', 'paddingLeft')." === '0px'"); }); + +it('shows each canonical layout working on the showcase\'s Layout page', function () { + $example = fn (string $title): string => "#example-{$title}"; + + $page = layoutReady(visit('/material/layout')->resize(1280, 900)) + ->assertScript("document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]').length === 2") + ->assertScript("[...document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]')].every((pane) => pane.checkVisibility())") + ->assertScript(layoutRect($example('supporting-pane').' [data-md-supporting-pane-supporting]', 'top').' === '.layoutRect($example('supporting-pane').' [data-md-supporting-pane-main]', 'top')) + ->assertScript(layoutColumns($example('feed').' [data-md-feed]').' > 1'); + + $page->click('#example-list-detail a:has-text("Ben Keller")') + ->assertSeeIn('#example-list-detail [data-md-list-detail-pane="detail"]', 'Contract, second draft') + ->assertNoJavaScriptErrors(); + + $compact = layoutReady(visit('/material/layout')->resize(599, 900)); + + $compact->click('#example-list-detail a:has-text("Chiara Rossi")') + ->assertSeeIn('#example-list-detail [data-md-list-detail-pane="detail"]', 'Train times for Friday') + ->assertScript("! document.querySelector('#example-list-detail [data-md-list-detail-pane=\"list\"]').checkVisibility()") + ->assertScript(layoutColumns($example('feed').' [data-md-feed]').' === 1') + ->assertScript("document.querySelector('#example-supporting-pane [data-md-supporting-pane-handle]').checkVisibility()") + ->assertNoJavaScriptErrors(); +});