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
2.2 KiB
PHP
37 lines
2.2 KiB
PHP
@extends('livewire-material::showcase.layout')
|
|
|
|
@section('content')
|
|
<div class="mx-auto w-full max-w-6xl space-y-12 pt-4 pb-16">
|
|
<div class="max-w-3xl space-y-3">
|
|
<h1 class="type-headline-lg">Livewire Material</h1>
|
|
<p class="type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
|
|
<p class="type-body-lg text-on-surface-variant">
|
|
Every token and component, rendered in this application's own scheme and theme. Pick a section in the
|
|
navigation, search for one above (or press <kbd class="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd>), or start below.
|
|
</p>
|
|
</div>
|
|
|
|
@foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
|
|
<section class="space-y-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
|
|
<h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="type-title-lg">{{ $group }}</h2>
|
|
|
|
<div class="grid grid-cols-1 gap-3 medium:grid-cols-2 expanded:grid-cols-3">
|
|
@foreach ($entries as $key => $entry)
|
|
<x-livewire-material::card variant="outlined" data-list-row wire:key="section-{{ $key }}">
|
|
<div class="flex items-start gap-4">
|
|
<span class="grid size-12 shrink-0 place-items-center rounded-corner-lg bg-secondary-container text-on-secondary-container">
|
|
<x-livewire-material::icon :name="$entry['icon']" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-list-open class="type-title-md">{{ $entry['title'] }}</a>
|
|
<p class="mt-1 type-body-md text-on-surface-variant">{{ $entry['description'] }}</p>
|
|
</div>
|
|
</div>
|
|
</x-livewire-material::card>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endforeach
|
|
</div>
|
|
@endsection
|