noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite the showcase frame without Tailwind

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 03:55:25 +02:00
co-authored by Claude Sonnet 5
parent 62b09c45b5
commit 9c8b39600b
6 changed files with 167 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/section.blade.php
+27 -20
View File
@@ -1,5 +1,6 @@
{{-- 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. --}}
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')
@@ -11,26 +12,32 @@
@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>
<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>
<div class="space-y-16 [&>section>h2]:sr-only">
@include('livewire-material::showcase.sections.'.$section)
<x-livewire-material::stack gap="space800" data-md-showcase-sections>
@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
<x-livewire-material::stack gap="space300">
<x-livewire-material::divider decorative />
@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>
<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