Implemented a block editor for changing the layout of the page

This commit is contained in:
2026-04-04 01:17:05 +02:00
parent 0800f7664f
commit ff58e82497
41 changed files with 2706 additions and 298 deletions

View File

@@ -1,6 +1,11 @@
@php
/** @var \App\Models\PreregistrationPage|null $page */
use Illuminate\Support\Facades\Storage;
$page = $page ?? null;
$pageBgUrl = $page !== null && filled($page->background_image)
? Storage::disk('public')->url($page->background_image)
: null;
@endphp
<div class="grid max-w-3xl gap-6">
@@ -13,24 +18,6 @@
@enderror
</div>
<div>
<label for="heading" class="block text-sm font-medium text-slate-700">{{ __('Heading') }}</label>
<input type="text" name="heading" id="heading" value="{{ old('heading', $page?->heading) }}" required maxlength="255"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
@error('heading')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="intro_text" class="block text-sm font-medium text-slate-700">{{ __('Intro text') }}</label>
<textarea name="intro_text" id="intro_text" rows="4"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ old('intro_text', $page?->intro_text) }}</textarea>
@error('intro_text')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="thank_you_message" class="block text-sm font-medium text-slate-700">{{ __('Thank you message') }}</label>
<textarea name="thank_you_message" id="thank_you_message" rows="3"
@@ -54,11 +41,65 @@
<input type="text" name="ticketshop_url" id="ticketshop_url" inputmode="url" autocomplete="url"
value="{{ old('ticketshop_url', $page?->ticketshop_url) }}"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="https://…" />
<p class="mt-1 text-xs text-slate-500">{{ __('Shown as the main button when the registration period has ended (and as the CTA link for the CTA banner block in that state).') }}</p>
@error('ticketshop_url')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="post_submit_redirect_url" class="block text-sm font-medium text-slate-700">{{ __('Redirect URL (after registration)') }}</label>
<input type="text" name="post_submit_redirect_url" id="post_submit_redirect_url" inputmode="url" autocomplete="url"
value="{{ old('post_submit_redirect_url', $page?->post_submit_redirect_url) }}"
class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="https://…" />
<p class="mt-1 text-xs text-slate-500">{{ __('Optional. Visitors are sent here 5 seconds after a successful registration.') }}</p>
@error('post_submit_redirect_url')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="rounded-xl border border-slate-200 bg-slate-50/80 p-4">
<p class="text-sm font-semibold text-slate-800">{{ __('Full-page background') }}</p>
<p class="mt-1 text-xs text-slate-600">{{ __('Cover image behind the card on the public page.') }}</p>
@if ($pageBgUrl !== null)
<div class="mt-3 flex flex-wrap items-center gap-3">
<img src="{{ e($pageBgUrl) }}" alt="" class="h-20 w-32 rounded border border-slate-200 object-cover" />
<label class="inline-flex items-center gap-2 text-sm text-red-700">
<input type="checkbox" name="remove_page_background" value="1" @checked(old('remove_page_background')) />
{{ __('Remove background image') }}
</label>
</div>
@endif
<div class="mt-3">
<label for="page_background" class="block text-sm font-medium text-slate-700">{{ __('Upload background') }}</label>
<input type="file" name="page_background" id="page_background" accept="image/jpeg,image/png,image/webp"
class="mt-1 block w-full text-sm text-slate-600" />
@error('page_background')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="mt-4 grid gap-4 sm:grid-cols-2">
<div>
<label for="background_overlay_color" class="block text-sm font-medium text-slate-700">{{ __('Overlay colour') }}</label>
<input type="text" name="background_overlay_color" id="background_overlay_color"
value="{{ old('background_overlay_color', $page?->background_overlay_color ?? '#000000') }}"
class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
@error('background_overlay_color')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="background_overlay_opacity" class="block text-sm font-medium text-slate-700">{{ __('Overlay opacity (%)') }}</label>
<input type="number" name="background_overlay_opacity" id="background_overlay_opacity" min="0" max="100"
value="{{ old('background_overlay_opacity', $page?->background_overlay_opacity ?? 50) }}"
class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
@error('background_overlay_opacity')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
<div class="grid gap-6 sm:grid-cols-2">
<div>
<label for="start_date" class="block text-sm font-medium text-slate-700">{{ __('Start date') }}</label>
@@ -80,42 +121,11 @@
</div>
</div>
<div class="flex flex-wrap gap-6">
<label class="inline-flex items-center gap-2">
<input type="checkbox" name="phone_enabled" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
@checked(old('phone_enabled', $page?->phone_enabled ?? false)) />
<span class="text-sm font-medium text-slate-700">{{ __('Phone enabled') }}</span>
</label>
<div>
<label class="inline-flex items-center gap-2">
<input type="checkbox" name="is_active" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
@checked(old('is_active', $page?->is_active ?? true)) />
<span class="text-sm font-medium text-slate-700">{{ __('Active') }}</span>
</label>
</div>
<div>
<label for="background_image" class="block text-sm font-medium text-slate-700">{{ __('Background image') }}</label>
<p class="mt-0.5 text-xs text-slate-500">{{ __('JPG, PNG or WebP. Max 5 MB.') }}</p>
<input type="file" name="background_image" id="background_image" accept="image/jpeg,image/png,image/webp"
class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200" />
@error('background_image')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
@if ($page?->background_image)
<p class="mt-2 text-xs text-slate-600">{{ __('Current file:') }} <a href="/storage/{{ $page->background_image }}" class="text-indigo-600 hover:underline" target="_blank" rel="noopener">{{ __('View') }}</a></p>
@endif
</div>
<div>
<label for="logo_image" class="block text-sm font-medium text-slate-700">{{ __('Logo image') }}</label>
<p class="mt-0.5 text-xs text-slate-500">{{ __('JPG, PNG, WebP or SVG. Max 2 MB.') }}</p>
<input type="file" name="logo_image" id="logo_image" accept="image/jpeg,image/png,image/webp,image/svg+xml,.svg"
class="mt-1 block w-full text-sm text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200" />
@error('logo_image')
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
@enderror
@if ($page?->logo_image)
<p class="mt-2 text-xs text-slate-600">{{ __('Current file:') }} <a href="/storage/{{ $page->logo_image }}" class="text-indigo-600 hover:underline" target="_blank" rel="noopener">{{ __('View') }}</a></p>
@endif
</div>
</div>