Kevin Adametz
b3d2d1e5b4
Auf 390 px Breite lag das Schild „Gebuchte Platzierung“ über dem Bildnachweis oben rechts. Der Nachweis sitzt auf Mobil jetzt unten rechts im freien Rand unter der Meta-Zeile (ab sm unverändert oben rechts). Die Erklärung am Schild ist rechtsbündig und stößt nicht mehr an den Bildrand. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
27 lines
1.7 KiB
PHP
27 lines
1.7 KiB
PHP
@props([
|
|
// tag = Schild auf dem Aufmacher-Bild, inline = kleiner Rahmen hinter der Überschrift in Listen
|
|
'variant' => 'inline',
|
|
])
|
|
|
|
{{-- Kennzeichnung gebuchter Platzierungen (Rechtspaket 10/2026, U10): das
|
|
Label allein sagt, dass der Platz gebucht wurde; die Erklärung erscheint
|
|
am Desktop beim Überfahren und auf Mobil per Tipp, ohne dass der Tipp den
|
|
umgebenden Link öffnet. Screenreader lesen die Erklärung als Teil des
|
|
Linktexts mit. --}}
|
|
<span x-data="{ hover: false, pinned: false }"
|
|
@mouseenter="hover = true" @mouseleave="hover = false"
|
|
@click.prevent.stop="pinned = ! pinned" @click.outside="pinned = false"
|
|
class="relative {{ $variant === 'tag' ? 'inline-flex' : 'inline' }} cursor-help" data-boosted-label>
|
|
@if ($variant === 'tag')
|
|
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
|
|
@else
|
|
<span class="inline-flex items-center whitespace-nowrap align-middle border border-brand/30 bg-brand/[0.04] px-1.5 py-px font-mono text-[9.5px] font-bold uppercase tracking-[0.1em] text-brand">{{ __('web.shared.boosted_placement') }}</span>
|
|
@endif
|
|
<span class="sr-only">: {{ __('web.shared.boosted_placement_hint') }}</span>
|
|
<span x-show="hover || pinned" style="display: none" aria-hidden="true" data-boosted-label-hint
|
|
@class([
|
|
'z-30 bg-bg-dark px-3 py-2 font-sans text-[12px] font-normal normal-case leading-[1.45] tracking-normal text-white shadow-lg',
|
|
'absolute right-0 top-full mt-1.5 w-64 max-w-[calc(100vw-3rem)]' => $variant === 'tag',
|
|
'mt-1.5 block sm:absolute sm:right-0 sm:top-full sm:w-64' => $variant !== 'tag',
|
|
])>{{ __('web.shared.boosted_placement_hint') }}</span>
|
|
</span>
|