Kevin Adametz
451e738c8b
Der Editor packt eingefügten Text in <p>; Felder wie die FAQ-Antwort gibt die Website als Text aus, die Tags waren sichtbar. Beim Speichern entfernt unwrapParagraphs() die Absätze (ein Absatz ohne <p>, mehrere mit <br><br>, Blockinhalte unverändert). cms_inline() gibt die Felder als bereinigtes Inline-HTML aus – auch schon gespeicherte Texte mit <p> erscheinen sauber, Fett und Hervorhebung werden dargestellt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
87 lines
5.5 KiB
PHP
87 lines
5.5 KiB
PHP
{{-- Livewire braucht ein Wurzelelement. Solange kein Display veröffentlicht ist, bleibt es leer –
|
||
lieber gar keine Sektion als ein Rahmen mit ewigem Ladebalken.
|
||
Seit 07.10.2026 in einer weißen Box; „Größer ansehen“ öffnet das Display in einem Overlay über
|
||
die volle Fensterhöhe, dort lässt es sich (wo der Browser es kann) in den Vollbildmodus schalten.
|
||
Das große Display lädt erst beim Öffnen, damit nicht zwei Player parallel laufen. --}}
|
||
<div id="displays">
|
||
@if ($displayId !== null)
|
||
<section class="section-padding {{ $bg }}">
|
||
<div class="container-padding">
|
||
<div class="grid items-center gap-10 rounded-3xl border border-border/60 bg-white p-6 shadow-[0_24px_60px_-28px_rgba(0,0,0,0.3)] sm:p-10 lg:grid-cols-2 lg:gap-16 lg:p-14"
|
||
data-display-box
|
||
x-data="{
|
||
open: false,
|
||
canFullscreen: document.fullscreenEnabled === true,
|
||
show() { this.open = true; document.body.classList.add('overflow-hidden'); this.$nextTick(() => this.$refs.close?.focus()); },
|
||
hide() {
|
||
if (document.fullscreenElement) { document.exitFullscreen(); }
|
||
this.open = false;
|
||
document.body.classList.remove('overflow-hidden');
|
||
this.$nextTick(() => this.$refs.trigger?.focus());
|
||
},
|
||
fullscreen() { this.$refs.stage?.requestFullscreen?.(); },
|
||
}"
|
||
x-on:keydown.escape.window="open && hide()">
|
||
<div>
|
||
<h2 class="text-section-title">{!! $content['title'] ?? '' !!}</h2>
|
||
<p class="text-large text-muted-foreground leading-relaxed mt-6">{!! cms_inline($content['text'] ?? '') !!}</p>
|
||
|
||
@if (!empty($content['note']))
|
||
<p class="text-sm text-muted-foreground mt-4">{{ $content['note'] }}</p>
|
||
@endif
|
||
|
||
@if ($showLink && !empty($content['link_text']))
|
||
<a href="{{ $content['link_url'] ?? route('referenzen') }}"
|
||
class="btn-primary-accent px-6 py-3 mt-8 inline-block">
|
||
{{ $content['link_text'] }}
|
||
</a>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- 9:16 wie das physische Display im Showroom --}}
|
||
<div class="flex flex-col items-center gap-4">
|
||
<div class="w-full max-w-[320px] aspect-[9/16] overflow-hidden rounded-2xl shadow-elevated bg-black">
|
||
<iframe src="{{ route('display.embed', ['display' => $displayId]) }}"
|
||
title="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||
loading="lazy" scrolling="no"
|
||
class="h-full w-full border-0"></iframe>
|
||
</div>
|
||
<button type="button" x-ref="trigger" x-on:click="show()" data-display-enlarge
|
||
class="inline-flex items-center gap-2 rounded-full border border-border/70 bg-white px-5 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
|
||
@svg('heroicon-o-arrows-pointing-out', 'h-5 w-5 text-secondary')
|
||
{{ __('ui.display_feed_enlarge') }}
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Overlay: Display über die volle Fensterhöhe im Format 9:16 --}}
|
||
<template x-teleport="body">
|
||
<div x-show="open" x-cloak x-transition.opacity
|
||
class="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-black/90 p-4"
|
||
role="dialog" aria-modal="true" aria-label="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||
x-on:click.self="hide()">
|
||
<div class="flex items-center gap-3">
|
||
<button type="button" x-show="canFullscreen" x-on:click="fullscreen()"
|
||
class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20">
|
||
@svg('heroicon-o-arrows-pointing-out', 'h-5 w-5')
|
||
{{ __('ui.display_feed_fullscreen') }}
|
||
</button>
|
||
<button type="button" x-ref="close" x-on:click="hide()"
|
||
class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20">
|
||
@svg('heroicon-o-x-mark', 'h-5 w-5')
|
||
{{ __('ui.display_feed_close') }}
|
||
</button>
|
||
</div>
|
||
<div x-ref="stage" class="aspect-[9/16] h-[calc(100dvh-6rem)] max-w-full overflow-hidden rounded-2xl bg-black">
|
||
<template x-if="open">
|
||
<iframe src="{{ route('display.embed', ['display' => $displayId]) }}"
|
||
title="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||
scrolling="no" allow="fullscreen" class="h-full w-full border-0"></iframe>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
</div>
|