Andreas Reinhold / reiniandClaude Fable 5.1
fd1e063d4c
Plan step 17, on N-06, N-07 and C-07. The shell now changes at 600, 840 and 1200 and nowhere else: a compact window keeps the navigation bar and the modal rail; `medium` (600-839) gets the collapsed rail in the layout and no bar; `expanded` (840-1199) gets a standard rail, collapsed, whose menu button expands it in place rather than over a scrim; `large` and above start it expanded, which is what M3 prefers once there is room. `data-rail` alone could not say "collapsed at expanded, expanded at large", since it carries `rail.default` for a visitor who never chose. <x-theme-script> now also writes `data-rail-auto` while nothing is stored, the `rail-collapsed:` variant reads it in the 840-1199 band, and `$store.rail.auto` mirrors it for Alpine; the first press of the menu button drops it, so a remembered choice still wins in both bands. `rail.default` and the rest of `$store.rail` are unchanged, and the attribute rides through `wire:navigate` with the others. `--material-margin` carries M3's window margin on the shell -- 16px compact, 24px from `medium` -- and the content region is padded with it, so the showcase pages drop their own gutters. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
37 lines
1.7 KiB
PHP
37 lines
1.7 KiB
PHP
{{-- One section of the showcase on a page of its own, with the way on to the next. The page's
|
|
heading names the section, so the section's own heading is only for a screen reader. --}}
|
|
|
|
@extends('livewire-material::showcase.layout')
|
|
|
|
@php
|
|
$keys = array_keys($sections);
|
|
$at = array_search($section, $keys, true);
|
|
$previous = $keys[$at - 1] ?? null;
|
|
$next = $keys[$at + 1] ?? null;
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="mx-auto w-full max-w-6xl pt-4 pb-16">
|
|
<header class="mb-6 space-y-1">
|
|
<p class="type-label-lg text-on-surface-variant">{{ $sections[$section]['group'] }}</p>
|
|
<h1 class="type-headline-lg">{{ $sections[$section]['title'] }}</h1>
|
|
</header>
|
|
|
|
<div class="space-y-16 [&>section>h2]:sr-only">
|
|
@include('livewire-material::showcase.sections.'.$section)
|
|
|
|
<nav aria-label="Sections" class="flex flex-wrap items-center justify-between gap-4 border-t border-divider pt-6">
|
|
@if ($previous)
|
|
<x-livewire-material::button variant="text" icon="arrow_back" :label="$sections[$previous]['title']" :link="route('livewire-material.section', $previous)" data-test="previous-section" />
|
|
@else
|
|
<x-livewire-material::button variant="text" icon="arrow_back" label="Overview" :link="route('livewire-material.showcase')" data-test="previous-section" />
|
|
@endif
|
|
|
|
@if ($next)
|
|
<x-livewire-material::button variant="tonal" icon-right="arrow_forward" :label="$sections[$next]['title']" :link="route('livewire-material.section', $next)" data-test="next-section" />
|
|
@endif
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
@endsection
|