Implemented a block editor for changing the layout of the page
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user