Rewrite the showcase frame without Tailwind
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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
62b09c45b5
commit
9c8b39600b
@@ -35,13 +35,20 @@
|
||||
|
||||
<x-livewire-material::theme-script />
|
||||
|
||||
{{-- Kept only for the Livewire/Alpine runtime here — this page has no Tailwind class of its
|
||||
own. The next batches of step 38 leave it to the sections that still need it. It opens
|
||||
the document's first @layer statement (Workbench package.css's header explains the
|
||||
trick), which the link below must follow, not precede — see layout.blade.php's comment. --}}
|
||||
@vite(config('livewire-material.showcase.vite'))
|
||||
@livewireStyles
|
||||
|
||||
{{-- The showcase's own chrome: does not depend on the build above. --}}
|
||||
<link rel="stylesheet" href="{{ \NoNameWeb\LivewireMaterial\Http\Controllers\ShowcaseAssetController::url() }}" />
|
||||
</head>
|
||||
<body class="bg-surface font-sans text-on-surface antialiased">
|
||||
<body data-md-showcase>
|
||||
<x-livewire-material::scaffold :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>
|
||||
<a href="{{ route('livewire-material.showcase') }}" class="md-type-title-lg md-truncate md-focus-ring" data-md-showcase-brand>Livewire Material</a>
|
||||
</x-slot:brand>
|
||||
|
||||
<x-slot:rail-header>
|
||||
@@ -58,27 +65,35 @@
|
||||
</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-livewire-material::app-bar :title="$current['title']">
|
||||
<x-slot:navigation>
|
||||
<x-livewire-material::stack as="span" hide-from="medium">
|
||||
<x-livewire-material::button icon="menu" tooltip="Open navigation" x-data x-on:click="$store.rail.show()" data-test="shell-menu" />
|
||||
</x-livewire-material::stack>
|
||||
</x-slot:navigation>
|
||||
|
||||
<x-slot:actions>
|
||||
<x-livewire-material::button icon="search" tooltip="Search" />
|
||||
</x-slot:actions>
|
||||
</x-livewire-material::app-bar>
|
||||
</x-slot:top>
|
||||
|
||||
<div class="mx-auto w-full max-w-5xl space-y-4 pb-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::pane width="medium" data-md-showcase-page>
|
||||
<x-livewire-material::stack gap="space200">
|
||||
<p class="md-type-body-md md-ink-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>
|
||||
<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::row gap="space100" wrap>
|
||||
<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 />
|
||||
</x-livewire-material::row>
|
||||
</x-livewire-material::stack>
|
||||
</x-livewire-material::pane>
|
||||
</x-livewire-material::scaffold>
|
||||
|
||||
@livewireScripts
|
||||
|
||||
Reference in New Issue
Block a user