Kevin Adametz
3e855375b1
Lange Kategorienamen liefen auf schmalen Viewports aus dem Layout — Badge darf jetzt umbrechen und ist mobil auf 8rem begrenzt. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
68 lines
3.1 KiB
PHP
68 lines
3.1 KiB
PHP
@props([
|
|
'release' => null,
|
|
'recommended' => false,
|
|
])
|
|
|
|
@php
|
|
$categoryName = $release?->localizedCategoryName();
|
|
$company = $release?->company?->name;
|
|
$city = $release?->company?->city ?? null;
|
|
$title = $release->title;
|
|
$href = route('release.detail', ['slug' => $release->slug]);
|
|
|
|
$published = $release->published_at;
|
|
if ($published) {
|
|
$timeLine = $published->format('H:i');
|
|
$dateLine = $published->isYesterday() ? __('web.shared.yesterday') : $published->translatedFormat('j. M');
|
|
$datetimeAttr = $published->toIso8601String();
|
|
} else {
|
|
$timeLine = '—';
|
|
$dateLine = '';
|
|
$datetimeAttr = null;
|
|
}
|
|
|
|
$bpCatClass = 'bp-cat self-start min-w-0 break-words leading-snug max-md:mt-1 max-md:max-w-[8rem] max-md:text-[9px] max-md:tracking-[0.1em]';
|
|
@endphp
|
|
|
|
<a href="{{ $href }}" @class([
|
|
'grid items-start py-3.5 border-b border-bg-rule cursor-pointer',
|
|
'hover:bg-bg-elev transition-colors group',
|
|
'pl-1.5 pr-2 sm:pl-2',
|
|
// <md: 2 Spalten — links Zeit/Datum/Rubrik, rechts Inhalt
|
|
'max-md:grid-cols-[auto_minmax(0,1fr)] max-md:gap-x-3',
|
|
// md+: 3 Spalten wie Desktop-Mockup
|
|
'md:grid-cols-[3.75rem_6.25rem_minmax(0,1fr)] md:gap-x-4',
|
|
])>
|
|
<div class="flex min-w-0 shrink-0 flex-col gap-0.5 tabular-nums pt-0.5">
|
|
@if ($datetimeAttr)
|
|
<time datetime="{{ $datetimeAttr }}" class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</time>
|
|
@else
|
|
<span class="font-mono text-[11px] leading-none text-ink-3 sm:text-[12px]">{{ $timeLine }}</span>
|
|
@endif
|
|
@if ($dateLine !== '')
|
|
<span class="text-[9px] leading-tight text-ink-4 sm:text-[10px]">{{ $dateLine }}</span>
|
|
@endif
|
|
{{-- Mobil: Rubrik unter dem Datum in derselben Spalte --}}
|
|
<span class="{{ $bpCatClass }} md:hidden">{{ $categoryName }}</span>
|
|
</div>
|
|
{{-- Desktop: Rubrik in eigener Spalte -- span nur sichtbar ab md, um Tab-Reihenfolge / SR konsistent zu halten --}}
|
|
<span class="{{ $bpCatClass }} hidden md:inline">{{ $categoryName }}</span>
|
|
<div class="min-w-0">
|
|
<div class="font-serif text-[15.5px] leading-[1.3] font-medium text-ink transition-colors group-hover:text-brand flex flex-wrap items-baseline gap-2">
|
|
<span>{{ $title }}</span>
|
|
@if ($recommended)
|
|
<span class="inline-flex items-center gap-1 whitespace-nowrap 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">
|
|
<svg width="9" height="9" viewBox="0 0 12 12" class="flex-shrink-0" aria-hidden="true">
|
|
<path d="M6 1l1.5 3.2 3.5.4-2.6 2.4.7 3.5L6 8.8l-3.1 1.7.7-3.5L1 4.6l3.5-.4z" fill="currentColor" />
|
|
</svg>
|
|
{{ __('web.shared.recommendation') }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
@if ($company)
|
|
<div class="mt-1 text-[11px] text-ink-3">
|
|
{{ $company }}@if ($city) · {{ $city }} @endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</a>
|