web: Boost als „Gebuchte Platzierung“ mit Erklärung gekennzeichnet
Label „Gebuchte Platzierung“ (en „Booked placement“) statt „Top-Platzierung“ auf Start- und Branchenseite. Die Erklärung „Das Unternehmen hat diesen Platz gebucht …“ erscheint am Desktop beim Überfahren und auf Mobil per Tipp, ohne den umgebenden Link zu öffnen; Screenreader lesen sie mit. Kopfzeile über dem Aufmacher „Aktuell“ statt „Top-Auswahl“ (automatische Auswahl, keine Redaktion). Preisseite nennt die Kennzeichnung (Rechtspaket U10). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
8124d20946
commit
2150d4b7ae
12 changed files with 72 additions and 27 deletions
27
resources/views/components/web/boosted-label.blade.php
Normal file
27
resources/views/components/web/boosted-label.blade.php
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
@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 left-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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue