Andreas Reinhold / reiniandClaude Fable 5.1
b1642aed1c
Plan step 15. Every `sm:`/`md:`/`lg:`/`xl:` in the components, the showcase (sections, layout, shell) and the pagination and error views becomes the M3 window size class the audits' breakpoint maps prescribe: the full-screen dialog, the FAB, the snackbar's width, `radio inline`, the section picker and the page numbers move from 640px to `medium` (600px, M3's compact boundary, N-07 / C-07 / IN-28); `button responsive` moves from 1024px to `expanded` (840px); `section-nav`'s grid-to-row switch from 1280px to `large` (1200px, N-07); and `drawer pane` from 1280px to `expanded`, where M3 shows two panes for list-detail (C-07). The pane's default width is now 360dp, M3's fixed supporting pane at expanded. Showcase example grids take two columns from `medium` and three or more from `expanded`; the showcase's own theme picker swaps at `expanded`, the nearest class boundary to the 768px it used (no M3 rule applies to it). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
88 lines
4.5 KiB
PHP
88 lines
4.5 KiB
PHP
{{-- The app shell, as a whole page: /material/shell and its sibling pages, so the rail, the bar, the
|
|
modal rail and wire:navigate between pages can be tried at any window width. --}}
|
|
|
|
@php
|
|
$page ??= 'inbox';
|
|
|
|
$pages = [
|
|
'inbox' => ['title' => 'Inbox', 'icon' => 'inbox', 'badge' => 12],
|
|
'starred' => ['title' => 'Starred', 'icon' => 'star'],
|
|
'sent' => ['title' => 'Sent', 'icon' => 'send'],
|
|
'drafts' => ['title' => 'Drafts', 'icon' => 'draft', 'badge' => true],
|
|
'travel' => ['title' => 'Travel', 'icon' => 'flight', 'section' => 'Labels', 'bar' => false],
|
|
'receipts' => ['title' => 'Receipts', 'icon' => 'receipt_long', 'section' => 'Labels', 'bar' => false],
|
|
];
|
|
|
|
$destinations = collect($pages)
|
|
->map(fn (array $destination, string $key): array => $destination + [
|
|
'url' => route('livewire-material.shell', $key === 'inbox' ? [] : ['page' => $key]),
|
|
'active' => $key === $page,
|
|
])
|
|
->values()
|
|
->all();
|
|
|
|
$current = $pages[$page];
|
|
@endphp
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="robots" content="noindex" />
|
|
|
|
<title>{{ $current['title'] }} · App shell · Livewire Material</title>
|
|
|
|
<x-livewire-material::theme-script />
|
|
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body class="bg-surface font-sans text-on-surface antialiased">
|
|
<x-livewire-material::app-shell :destinations="$destinations">
|
|
<x-slot:brand>
|
|
<a href="{{ route('livewire-material.showcase') }}" class="block truncate rounded-corner-xs type-title-lg focus-ring">Livewire Material</a>
|
|
</x-slot:brand>
|
|
|
|
<x-slot:rail-header>
|
|
<span class="rail-collapsed:hidden"><x-livewire-material::fab label="Compose" icon="edit" x-on:click="materialToast('Compose opens here')" /></span>
|
|
<span class="hidden rail-collapsed:inline-flex"><x-livewire-material::fab icon="edit" tooltip-right="Compose" x-on:click="materialToast('Compose opens here')" /></span>
|
|
</x-slot:rail-header>
|
|
|
|
<x-slot:rail-footer>
|
|
<x-livewire-material::navigation-rail-item label="Settings" icon="settings" link="#settings" no-wire-navigate />
|
|
</x-slot:rail-footer>
|
|
|
|
<x-slot:actions>
|
|
<x-livewire-material::button icon="dark_mode" tooltip-right="Switch theme" x-data x-on:click="$store.theme.toggle()" />
|
|
<x-livewire-material::button icon="help" tooltip-right="Help" x-on:click="materialToast('Help opens here')" />
|
|
</x-slot:actions>
|
|
|
|
<x-slot:top>
|
|
<header class="sticky top-0 z-20 flex h-16 items-center gap-1 bg-surface px-1 pt-[var(--material-safe-top,env(safe-area-inset-top))] medium:px-4">
|
|
<span class="medium:hidden"><x-livewire-material::button icon="menu" tooltip="Open navigation" x-data x-on:click="$store.rail.show()" data-test="shell-menu" /></span>
|
|
<h1 class="min-w-0 flex-1 truncate px-3 type-title-lg medium:px-0">{{ $current['title'] }}</h1>
|
|
<x-livewire-material::button icon="search" tooltip="Search" />
|
|
</header>
|
|
</x-slot:top>
|
|
|
|
<div class="mx-auto w-full max-w-5xl space-y-4 px-4 pb-6 sm:px-6">
|
|
<p class="type-body-md text-on-surface-variant" data-test="shell-page">This is the {{ strtolower($current['title']) }} page.</p>
|
|
|
|
<x-livewire-material::list segmented>
|
|
@foreach (range(1, 14) as $index)
|
|
<x-livewire-material::list-item :title="$current['title'].' item '.$index" description="A line of supporting text for this item" :icon="$current['icon']" trailing="{{ $index }}h" wire:key="item-{{ $index }}" />
|
|
@endforeach
|
|
</x-livewire-material::list>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-livewire-material::button label="Show a toast" variant="tonal" x-data x-on:click="materialToast('Moved to archive', { action: { label: 'Undo', handler: () => {} } })" />
|
|
<x-livewire-material::button label="Back to the showcase" link="{{ route('livewire-material.section', 'navigation') }}" no-wire-navigate />
|
|
</div>
|
|
</div>
|
|
</x-livewire-material::app-shell>
|
|
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|