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
resources/views/showcase/components/breakpoint-readout.blade.php
+18
View File
@@ -0,0 +1,18 @@
{{-- The live breakpoint readout: this window's width, and the M3 breakpoint it falls in, read
from the same numbers resources/js/breakpoints.js compares against. Shared by the Layout
section's Overview and its three canonical layout pages (plan step 38). --}}
<x-livewire-material::surface
level="surface-container-low"
padding="space300"
corner="lg"
data-test="window-class"
x-data="{ width: window.innerWidth }"
x-on:resize.window="width = window.innerWidth"
>
<x-livewire-material::row gap="space200" wrap align="baseline">
<span class="md-type-label-lg md-ink-variant">This window</span>
<span class="md-type-emphasized-headline-sm md-tabular" x-text="width + 'px'"></span>
<span class="md-type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
</x-livewire-material::row>
</x-livewire-material::surface>