noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give each canonical layout a page of its own in the Layout section

Browse Source 
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
2026-09-15 04:22:38 +02:00
co-authored by Claude Sonnet 5
parent 44a29a8ea2
commit 487176d345
11 changed files with 355 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/LayoutTest.php
+19 -11
View File
@@ -529,25 +529,33 @@ it('draws no second margin for a pane or a canonical layout inside the scaffold\
->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))
it('shows each canonical layout working on its own Layout page', function () {
$listDetail = layoutReady(visit('/material/layout/list-detail')->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');
->assertScript("[...document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]')].every((pane) => pane.checkVisibility())");
$page->click('#example-list-detail a:has-text("Ben Keller")')
$listDetail->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));
$compactListDetail = layoutReady(visit('/material/layout/list-detail')->resize(599, 900));
$compact->click('#example-list-detail a:has-text("Chiara Rossi")')
$compactListDetail->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')
->assertNoJavaScriptErrors();
layoutReady(visit('/material/layout/supporting-pane')->resize(1280, 900))
->assertScript(layoutRect('#example-supporting-pane [data-md-supporting-pane-supporting]', 'top').' === '.layoutRect('#example-supporting-pane [data-md-supporting-pane-main]', 'top'));
layoutReady(visit('/material/layout/supporting-pane')->resize(599, 900))
->assertScript("document.querySelector('#example-supporting-pane [data-md-supporting-pane-handle]').checkVisibility()")
->assertNoJavaScriptErrors();
layoutReady(visit('/material/layout/feed')->resize(1280, 900))
->assertScript(layoutColumns('#example-feed [data-md-feed]').' > 1');
layoutReady(visit('/material/layout/feed')->resize(599, 900))
->assertScript(layoutColumns('#example-feed [data-md-feed]').' === 1')
->assertNoJavaScriptErrors();
});