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
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 px-4 pt-4 pb-16 sm:px-6">
|
|
<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
|