gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: Responsive-/Mobile-Fixes fürs öffentliche Frontend

Browse source 
Behebt strukturelle Mobile-Bugs (320/390px) über presseecho,
businessportal24 und den pressekonto-Hub hinweg:

- Focus-/Kategorie-/Newsroom-Hero: Text im Flow (min-h + flex) statt
  fester Höhe, responsive Typo — Overlay überläuft nicht mehr nach oben.
- Quality-Summary: Grid stackt auf Mobile (behebt Seiten-Overflow).
- Hub: Utility-Bar mit Wrap, Header mit Mobile-Burger, Footer stackt,
  Architektur-Diagramm als gestapelte Mobile-Variante.
- Sticky-Header (Portal): fehlende .header-sticky-CSS ergänzt und Script
  mit Platzhalter, damit der Header beim Scrollen sichtbar bleibt.
- Header-Overflow bei 320px entschärft (Portal + Hub); Hub-Hero-H1
  verkleinert, damit die Wortmarke "businessportal24" umbricht.
- Mobile-Nav um Preise/FAQ/API ergänzt; Industry-Index-Dichte,
  Touch-Targets und Preise-Einzel-PM-Block für kleine Screens verbessert.
- Homepages/Shared: px-8 → px-4 sm:px-6 lg:px-8.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Kevin Adametz 2026-07-16 09:33:49 +00:00
parent 9c67fc6c14
commit dec524989b
19 changed files with 263 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/views/components/web/hub/brand-context-banner.blade.php
View file

@ -19,7 +19,7 @@
@if ($context)
<div class="bg-hub-soft border-b border-hub-soft-2">
<div class="max-w-layout mx-auto px-8 py-3 flex items-center gap-4">
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center gap-4 flex-wrap">
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-hub text-white flex-shrink-0">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<path d="M7.5 2.5L4 6l3.5 3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />

6
resources/views/components/web/hub/site-footer.blade.php
View file

@ -11,9 +11,9 @@
@endphp
<footer class="bg-hub-grad-2 text-ink-on-dark">
<div class="max-w-layout mx-auto px-8 py-14 grid gap-10" style="grid-template-columns:1.5fr 1fr 1fr 1fr;">
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-14 grid gap-10 grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
<div>
<div class="sm:col-span-2 lg:col-span-1">
<div class="text-[24px] font-bold leading-none tracking-[-0.5px]">
<x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" />
</div>
@ -82,7 +82,7 @@
</div>
<div class="border-t border-white/15">
<div class="max-w-layout mx-auto px-8 py-5 flex items-center justify-between gap-4 text-[11.5px] text-white/55">
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-wrap items-center justify-between gap-4 text-[11.5px] text-white/55">
<span>{{ $footerLegal }}</span>
</div>
</div>

86
resources/views/components/web/hub/site-header.blade.php
View file

@ -24,49 +24,109 @@
];
@endphp
<header class="bg-bg-elev border-b border-bg-rule">
<div class="max-w-layout mx-auto px-8 py-[18px] grid items-center gap-6" style="grid-template-columns:auto 1fr auto;">
<header class="bg-bg-elev border-b border-bg-rule" x-data="{ menuOpen: false }" @keydown.escape.window="menuOpen = false">
<div class="max-w-layout mx-auto px-3 sm:px-6 lg:px-8 py-3 sm:py-[18px] flex items-center gap-2 sm:gap-4">
<a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group"
<a href="{{ route('home') }}" class="flex items-baseline gap-2.5 cursor-pointer group min-w-0 flex-shrink-0"
aria-label="pressekonto Startseite">
<span class="text-[24px] font-bold tracking-[-0.5px] leading-none text-hub">
<span class="text-[19px] sm:text-[24px] font-bold tracking-[-0.5px] leading-none text-hub">
<x-web.brand-mark brand="pressekonto" :serif="false" />
</span>
<span class="hidden md:inline-block w-px h-[18px] bg-bg-rule"></span>
<span class="eyebrow muted text-[9.5px] tracking-[0.22em]">{{ $brandTagline }}</span>
<span class="eyebrow muted text-[9.5px] tracking-[0.22em] hidden md:inline">{{ $brandTagline }}</span>
</a>
<nav class="hidden lg:flex items-center justify-center gap-1 text-[13.5px] font-medium">
<nav class="hidden lg:flex flex-1 items-center justify-center gap-1 text-[13.5px] font-medium">
@foreach ($navigation as $item)
<a href="{{ $item['href'] }}"
class="px-3.5 py-2 text-ink-2 hover:text-hub transition-colors">{{ $item['label'] }}</a>
@endforeach
</nav>
<div class="flex items-center gap-2">
<span class="flex-1 lg:hidden"></span>
<div class="flex items-center gap-1.5 sm:gap-2 flex-shrink-0">
@auth
<a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Zum pressekonto
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
class="inline-flex items-center gap-2 px-3 sm:px-[18px] py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
<span class="sm:hidden">Konto</span>
<span class="hidden sm:inline">Zum pressekonto</span>
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="hidden sm:inline" aria-hidden="true">
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</a>
@else
{{-- Auf Mobile in das Burger-Panel verlagert, damit die Kopfzeile bei 320px nicht überläuft. --}}
<a href="{{ route('login') }}"
class="inline-flex items-center gap-2 px-4 py-2.5 text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
class="hidden sm:inline-flex items-center gap-2 px-2.5 sm:px-4 py-2 sm:py-2.5 text-[12.5px] sm:text-[13px] font-semibold text-ink rounded-[4px] hover:bg-bg transition-colors">
Anmelden
</a>
<a href="{{ route('register') }}"
class="inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
class="hidden sm:inline-flex items-center gap-2 px-[18px] py-2.5 text-[13px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Konto erstellen
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</a>
<a href="{{ route('register') }}"
class="sm:hidden inline-flex items-center justify-center px-3 py-2 text-[12.5px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[4px] transition-colors">
Registrieren
</a>
@endauth
<button type="button"
class="lg:hidden inline-flex items-center justify-center w-10 h-10 text-ink rounded-[4px] hover:bg-bg transition-colors cursor-pointer"
@click="menuOpen = !menuOpen"
:aria-expanded="menuOpen.toString()"
aria-controls="hub-mobile-nav"
aria-label="Menü öffnen">
<svg x-show="!menuOpen" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
<svg x-show="menuOpen" x-cloak width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
</svg>
</button>
</div>
</div>
<div id="hub-mobile-nav"
x-show="menuOpen"
x-cloak
x-transition.opacity.duration.150ms
class="lg:hidden border-t border-bg-rule bg-bg-elev">
<nav class="max-w-layout mx-auto px-4 sm:px-6 py-3 flex flex-col gap-0.5 text-[14px] font-medium" aria-label="Hauptnavigation">
@foreach ($navigation as $item)
<a href="{{ $item['href'] }}"
@click="menuOpen = false"
class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
{{ $item['label'] }}
</a>
@endforeach
{{-- Auth-Einstiege für Mobile (auf sm+ liegen sie in der Kopfzeile). --}}
<div class="mt-2 pt-2 border-t border-bg-rule flex flex-col gap-0.5">
@auth
<a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
@click="menuOpen = false"
class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
Zum pressekonto
</a>
@else
<a href="{{ route('login') }}"
@click="menuOpen = false"
class="px-3 py-3 text-ink-2 hover:text-hub hover:bg-bg rounded-[4px] transition-colors">
Anmelden
</a>
<a href="{{ route('register') }}"
@click="menuOpen = false"
class="px-3 py-3 font-semibold text-hub hover:bg-bg rounded-[4px] transition-colors">
Konto erstellen
</a>
@endauth
</div>
</nav>
</div>
</header>

44
resources/views/components/web/hub/top-utility-bar.blade.php
View file

@ -8,6 +8,7 @@
@php
$displayDate = $date ?? now()->locale('de')->isoFormat('dddd, D. MMMM YYYY');
$shortDate = now()->locale('de')->isoFormat('dd, D. MMM');
$defaultUrls = [
'presseecho' => config('domains.domain_presseecho_url'),
@ -16,36 +17,39 @@
@endphp
<div class="bg-hub-grad text-ink-on-dark-2 border-b border-black/40">
<div class="max-w-layout mx-auto px-8 flex items-stretch text-[11.5px] tracking-wide">
<div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11.5px] tracking-wide py-2 sm:py-0 sm:items-stretch">
<span class="flex items-center pr-4 py-2.5 whitespace-nowrap border-r border-white/10">
{{ $displayDate }}
<span class="flex items-center sm:pr-4 sm:py-2.5 sm:border-r sm:border-white/10 whitespace-nowrap">
<span class="hidden sm:inline">{{ $displayDate }}</span>
<span class="sm:hidden">{{ $shortDate }}</span>
</span>
<span class="flex items-center gap-2.5 px-4 py-2.5 whitespace-nowrap text-white/70">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-65">
<span class="flex items-center gap-2 sm:gap-2.5 sm:px-4 sm:py-2.5 min-w-0 text-white/70">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="opacity-65 shrink-0 hidden sm:block">
<rect x="2" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
<rect x="8.5" y="2" width="5.5" height="5.5" stroke="currentColor" stroke-width="1.2" />
<rect x="2" y="8.5" width="12" height="5.5" stroke="currentColor" stroke-width="1.2" />
</svg>
<span>Publisher-Hub für</span>
@foreach ($siblingPortals as $index => $portal)
@php
$brandKey = $portal['brand'] ?? 'presseecho';
$portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#');
@endphp
<a href="{{ $portalUrl }}" class="text-white font-semibold hover:underline">
<x-web.brand-mark :brand="$brandKey" variant="on-dark" :serif="false" />
</a>
@if (! $loop->last)
<span class="text-white/30">·</span>
@endif
@endforeach
<span class="hidden md:inline shrink-0">Publisher-Hub für</span>
<span class="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-wrap">
@foreach ($siblingPortals as $index => $portal)
@php
$brandKey = $portal['brand'] ?? 'presseecho';
$portalUrl = $portal['url'] ?? ($defaultUrls[$brandKey] ?? '#');
@endphp
<a href="{{ $portalUrl }}" class="text-white font-semibold hover:underline">
<x-web.brand-mark :brand="$brandKey" variant="on-dark" :serif="false" />
</a>
@if (! $loop->last)
<span class="text-white/30">·</span>
@endif
@endforeach
</span>
</span>
<span class="flex-1"></span>
<span class="flex-1 hidden sm:block"></span>
<span class="flex items-center gap-4 py-2.5 whitespace-nowrap text-white/65">
<span class="flex items-center gap-3 sm:gap-4 sm:py-2.5 whitespace-nowrap text-white/65 ml-auto sm:ml-0">
<a href="{{ route('faq', ['edition' => 'de']) }}" class="hover:text-white transition-colors">FAQ</a>
<a href="{{ route('hilfe', ['edition' => 'de']) }}" class="hover:text-white transition-colors">Hilfe</a>
<button type="button" x-data @click="$dispatch('open-contact-modal')" class="hover:text-white cursor-pointer">Kontakt</button>