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
84 lines
4.1 KiB
PHP
84 lines
4.1 KiB
PHP
{{-- The layout every error page extends: this package's 403, 404, 419, 429, 500 and 503, and the
|
|
framework's own 401 and 402, which extend `errors::minimal` and find this file before the
|
|
framework's (the provider appends this folder's parent to `view.paths`).
|
|
|
|
Sections — the framework layout's `title`, `code` and `message`, plus three of its own, so
|
|
either layout renders the other's pages:
|
|
`title` the browser tab, followed by the app name;
|
|
`code` the status, drawn in display type over the shape;
|
|
`headline` what happened, in a few words (without it, `message` is the headline);
|
|
`message` one sentence on what to do about it;
|
|
`shape` an M3 Expressive shape name (`cookie-7` by default), in primary-container;
|
|
`actions` the buttons; by default a filled Home and, when the visitor came from a page on
|
|
the way here, a text Back.
|
|
|
|
The app's own Vite entries (`livewire-material.showcase.vite`) bring its scheme, font and
|
|
utilities. But an error page is also what shows while a deploy has no build yet, so when
|
|
those tags cannot be made the page brings a small stylesheet of its own: the app's scheme
|
|
from its scheme data, drawn onto the `data-error-*` hooks. Keep the hooks when changing
|
|
the markup. The shape turns once a minute, unless the visitor asks for reduced motion. --}}
|
|
|
|
@php
|
|
$assets = \NoNameWeb\LivewireMaterial\Support\ErrorPage::assets();
|
|
$back = \NoNameWeb\LivewireMaterial\Support\ErrorPage::backUrl();
|
|
@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" />
|
|
<meta name="robots" content="noindex" />
|
|
|
|
<title>@yield('title') · {{ config('app.name') }}</title>
|
|
|
|
<x-livewire-material::theme-script />
|
|
|
|
@if ($assets !== null)
|
|
{{ $assets }}
|
|
@else
|
|
<style data-error-fallback>{{ \NoNameWeb\LivewireMaterial\Support\ErrorPage::fallbackStyles() }}</style>
|
|
@endif
|
|
|
|
<style>
|
|
@keyframes material-error-turn { to { transform: rotate(1turn); } }
|
|
@media (prefers-reduced-motion: no-preference) { [data-error-shape] { animation: material-error-turn 60s linear infinite; } }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-dvh bg-surface font-sans text-on-surface antialiased">
|
|
<main data-error-page class="mx-auto flex min-h-dvh max-w-xl flex-col items-center justify-center px-6 py-12 text-center">
|
|
<div data-error-art class="relative grid size-48 shrink-0 place-items-center medium:size-60">
|
|
<div data-error-shape class="absolute inset-0">
|
|
<x-livewire-material::shape :name="trim($__env->yieldContent('shape', 'cookie-7'))" class="size-full text-primary-container" />
|
|
</div>
|
|
|
|
<p data-error-code class="relative type-emphasized-display-lg text-on-primary-container tabular-nums">@yield('code')</p>
|
|
</div>
|
|
|
|
<h1 data-error-headline class="mt-10 type-headline-md text-balance medium:type-headline-lg">
|
|
@hasSection('headline')
|
|
@yield('headline')
|
|
@else
|
|
@yield('message')
|
|
@endif
|
|
</h1>
|
|
|
|
@hasSection('headline')
|
|
<p data-error-message class="mt-3 max-w-md type-body-lg text-balance text-on-surface-variant">@yield('message')</p>
|
|
@endif
|
|
|
|
<div data-error-actions class="mt-10 flex flex-wrap items-center justify-center gap-3">
|
|
@hasSection('actions')
|
|
@yield('actions')
|
|
@else
|
|
<x-livewire-material::button :link="url('/')" :label="__('Go home')" variant="filled" size="md" no-wire-navigate />
|
|
|
|
@if ($back !== null)
|
|
<x-livewire-material::button :link="$back" :label="__('Go back')" variant="text" size="md" no-wire-navigate />
|
|
@endif
|
|
@endif
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|