Andreas Reinhold / reiniandClaude Sonnet 5
487176d345
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
19 lines
972 B
PHP
19 lines
972 B
PHP
{{-- 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>
|