Einreichen-Modal: Panel-Struktur und fixierter Kontingent-Badge
Das Modal war ein unstrukturierter Stapel aus zwei Boxen und losen
Switches; der Kontingent-Badge wurde vom Flex-Layout zusammengedrückt
und brach um ("3 /" / "3"). Jetzt: drei beschriftete Panels (Rechtliche
Hinweise, PM-Kontingent, Ihre Bestätigungen) im portalweiten
panel/panel-head-Stil, die Switches als getrennte Zeilen mit
Fortschrittszähler (x / 4) im Panel-Kopf, Badge mit shrink-0 und
whitespace-nowrap.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
acd241b3f2
commit
0f8f0b2d31
2 changed files with 73 additions and 47 deletions
|
|
@ -69,60 +69,84 @@
|
|||
</div>
|
||||
|
||||
{{-- Rechtliche Hinweise (Platzhalter — vor Go-Live anwaltlich prüfen) --}}
|
||||
<div class="rounded-[6px] border border-[color:var(--color-bg-rule)] bg-[color:var(--color-bg-elev)] p-4 text-[12.5px] leading-[1.6] text-[color:var(--color-ink-2)]">
|
||||
<p class="m-0 mb-2 font-semibold text-[color:var(--color-ink)]">{{ __('Mit dem Einreichen versichern Sie:') }}</p>
|
||||
<ul class="m-0 list-disc space-y-1 ps-5">
|
||||
<li>{{ __('Sie sind befugt, den Inhalt zu veröffentlichen.') }}</li>
|
||||
<li>{{ __('Alle verwendeten Bilder, Logos und Zitate liegen in Ihrer Nutzungsbefugnis.') }}</li>
|
||||
<li>{{ __('Personenbezogene Daten sind nur im zwingend erforderlichen Umfang enthalten.') }}</li>
|
||||
<li>{{ __('Aussagen entsprechen Ihrem Wissensstand und sind sachlich richtig.') }}</li>
|
||||
</ul>
|
||||
<p class="m-0 mt-2 text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('Sie stellen die Plattform von Ansprüchen Dritter frei, die aus einer unberechtigten Nutzung von Inhalten resultieren. Die endgültige Veröffentlichung erfolgt nach Abschluss der Inhaltsprüfung.') }}
|
||||
</p>
|
||||
</div>
|
||||
<article class="panel overflow-hidden">
|
||||
<div class="panel-head" style="padding:10px 16px;">
|
||||
<span class="section-eyebrow">{{ __('Rechtliche Hinweise') }}</span>
|
||||
</div>
|
||||
<div class="p-4 text-[12.5px] leading-[1.6] text-[color:var(--color-ink-2)]">
|
||||
<p class="m-0 mb-2 font-semibold text-[color:var(--color-ink)]">{{ __('Mit dem Einreichen versichern Sie:') }}</p>
|
||||
<ul class="m-0 list-disc space-y-1 ps-5">
|
||||
<li>{{ __('Sie sind befugt, den Inhalt zu veröffentlichen.') }}</li>
|
||||
<li>{{ __('Alle verwendeten Bilder, Logos und Zitate liegen in Ihrer Nutzungsbefugnis.') }}</li>
|
||||
<li>{{ __('Personenbezogene Daten sind nur im zwingend erforderlichen Umfang enthalten.') }}</li>
|
||||
<li>{{ __('Aussagen entsprechen Ihrem Wissensstand und sind sachlich richtig.') }}</li>
|
||||
</ul>
|
||||
<p class="m-0 mt-3 pt-3 border-t border-[color:var(--color-bg-rule)] text-[11.5px] text-[color:var(--color-ink-3)]">
|
||||
{{ __('Sie stellen die Plattform von Ansprüchen Dritter frei, die aus einer unberechtigten Nutzung von Inhalten resultieren. Die endgültige Veröffentlichung erfolgt nach Abschluss der Inhaltsprüfung.') }}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{{-- Kontingent (optional) --}}
|
||||
@if (! is_null($quotaRemaining) && ! is_null($quotaTotal))
|
||||
<div class="flex items-center justify-between rounded-[6px] border border-[color:var(--color-bg-rule)] px-4 py-3">
|
||||
<div class="text-[12.5px] text-[color:var(--color-ink-2)]">
|
||||
<div class="font-semibold text-[color:var(--color-ink)]">{{ __('PM-Kontingent diesen Monat') }}</div>
|
||||
<div class="text-[color:var(--color-ink-3)]">{{ __('Wird erst bei Veröffentlichung verbraucht — abgelehnte Pressemitteilungen kosten keinen Slot.') }}</div>
|
||||
<article class="panel overflow-hidden">
|
||||
<div class="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div class="min-w-0 text-[12.5px] text-[color:var(--color-ink-2)]">
|
||||
<div class="font-semibold text-[color:var(--color-ink)]">{{ __('PM-Kontingent diesen Monat') }}</div>
|
||||
<div class="text-[color:var(--color-ink-3)]">{{ __('Wird erst bei Veröffentlichung verbraucht — abgelehnte Pressemitteilungen kosten keinen Slot.') }}</div>
|
||||
</div>
|
||||
{{-- shrink-0 + nowrap: der Flex-Container darf den Badge
|
||||
nicht zusammendrücken (QA-Befund 07.07., Umbruch „3 /|3"). --}}
|
||||
<span @class(['badge', 'dot', 'shrink-0', 'whitespace-nowrap', $quotaRemaining > 0 ? 'ok' : 'warn'])>
|
||||
{{ $quotaRemaining }} / {{ $quotaTotal }}
|
||||
</span>
|
||||
</div>
|
||||
<span @class(['badge', $quotaRemaining > 0 ? 'ok' : 'warn'])>
|
||||
{{ $quotaRemaining }} / {{ $quotaTotal }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
@endif
|
||||
|
||||
{{-- Bestätigungen — Flux-Switches (Einheitlichkeit, 12.06.2026);
|
||||
der Alpine-State steuert weiterhin den Bestätigen-Button. --}}
|
||||
<div class="space-y-3">
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="agb = $event.target.checked"
|
||||
:label="__('Der Inhalt entspricht den AGB und gesetzlichen Vorgaben.')"
|
||||
/>
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="images = $event.target.checked"
|
||||
:label="__('Alle Bildrechte sind geklärt.')"
|
||||
/>
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="contact = $event.target.checked"
|
||||
:label="__('Die Angaben zum Pressekontakt sind korrekt.')"
|
||||
/>
|
||||
{{-- Archiv-Hinweis (AGB § 13 Abs. 1, T2neu): die frühere
|
||||
Erlöschens-Checkbox entfiel mit der B2B-Umstellung (E2).
|
||||
Der Bestätigungszeitpunkt wird serverseitig protokolliert
|
||||
(PressReleaseService). --}}
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="waiver = $event.target.checked"
|
||||
:label="__('Mir ist bekannt, dass veröffentlichte Pressemitteilungen dauerhaft archiviert werden; eine spätere Entfernung ist nur als kostenpflichtige Serviceleistung möglich (gesetzliche Ansprüche bleiben unberührt).')"
|
||||
/>
|
||||
</div>
|
||||
<article class="panel overflow-hidden">
|
||||
<div class="panel-head" style="padding:10px 16px;">
|
||||
<span class="section-eyebrow">{{ __('Ihre Bestätigungen') }}</span>
|
||||
<span class="shrink-0 whitespace-nowrap text-[11.5px] tabular-nums text-[color:var(--color-ink-3)]"
|
||||
x-text="[agb, images, contact, waiver].filter(Boolean).length + ' / 4'"></span>
|
||||
</div>
|
||||
<div class="divide-y divide-[color:var(--color-bg-rule)]">
|
||||
<div class="px-4 py-3">
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="agb = $event.target.checked"
|
||||
:label="__('Der Inhalt entspricht den AGB und gesetzlichen Vorgaben.')"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="images = $event.target.checked"
|
||||
:label="__('Alle Bildrechte sind geklärt.')"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-4 py-3">
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="contact = $event.target.checked"
|
||||
:label="__('Die Angaben zum Pressekontakt sind korrekt.')"
|
||||
/>
|
||||
</div>
|
||||
{{-- Archiv-Hinweis (AGB § 13 Abs. 1, T2neu): die frühere
|
||||
Erlöschens-Checkbox entfiel mit der B2B-Umstellung (E2).
|
||||
Der Bestätigungszeitpunkt wird serverseitig protokolliert
|
||||
(PressReleaseService). --}}
|
||||
<div class="px-4 py-3">
|
||||
<flux:switch
|
||||
align="left"
|
||||
x-on:change="waiver = $event.target.checked"
|
||||
:label="__('Mir ist bekannt, dass veröffentlichte Pressemitteilungen dauerhaft archiviert werden; eine spätere Entfernung ist nur als kostenpflichtige Serviceleistung möglich (gesetzliche Ansprüche bleiben unberührt).')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<flux:modal.close>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,11 @@ test('customer show renders the publish confirmation modal with legal note and q
|
|||
|
||||
LivewireVolt::test('customer.press-releases.show', ['id' => $pr->id])
|
||||
->assertSee('Pressemitteilung zur Prüfung einreichen')
|
||||
->assertSee('Rechtliche Hinweise')
|
||||
->assertSee('Mit dem Einreichen versichern Sie:')
|
||||
->assertSee('PM-Kontingent diesen Monat')
|
||||
->assertSee('2 / 3');
|
||||
->assertSee('2 / 3')
|
||||
->assertSee('Ihre Bestätigungen');
|
||||
});
|
||||
|
||||
test('the quota block is hidden for users with an unlimited quota', function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue