Andreas Reinhold / reiniandClaude Sonnet 5
9c8b39600b
Plan step 38 (first batch): layout.blade.php, index.blade.php, section.blade.php, shell.blade.php and the example component now lay out through the layout components (pane, stack, row, grid, surface) and their props, text through the md-* classes, and everything else through showcase.css's data-md-showcase-* hooks — no Tailwind utility remains in any of them. The head links the new stylesheet route after @vite(...), not before: that entry opens the document's first @layer statement, and linking the showcase's own bundle ahead of it re-anchors the material layer before Tailwind's own and lets its preflight's `padding: 0` beat the search view's padding-top (found by a failing browser test). @vite(...) stays, its Tailwind CSS entry included, only for the section views (still Tailwind until the next batches) and the JS runtime; the config comment says so. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
44 lines
2.3 KiB
PHP
44 lines
2.3 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
|
|
(`data-md-showcase-sections`'s own rule in resources/css/showcase.css). --}}
|
|
|
|
@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')
|
|
<x-livewire-material::pane width="wide" data-md-showcase-page>
|
|
<x-livewire-material::stack gap="space300">
|
|
<x-livewire-material::stack as="header" gap="space50">
|
|
<p class="md-type-label-lg md-ink-variant">{{ $sections[$section]['group'] }}</p>
|
|
<h1 class="md-type-headline-lg">{{ $sections[$section]['title'] }}</h1>
|
|
</x-livewire-material::stack>
|
|
|
|
<x-livewire-material::stack gap="space800" data-md-showcase-sections>
|
|
@include('livewire-material::showcase.sections.'.$section)
|
|
|
|
<x-livewire-material::stack gap="space300">
|
|
<x-livewire-material::divider decorative />
|
|
|
|
<x-livewire-material::row as="nav" aria-label="Sections" justify="between" wrap gap="space200">
|
|
@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
|
|
</x-livewire-material::row>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::pane>
|
|
@endsection
|