Redesign meeting programme as single-column Figtree layout.
Deploy Ladill Meet / deploy (push) Successful in 1m41s

Stack time, title, and details vertically in compact cards for the narrow live-room sidebar and agenda views.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-04 22:44:45 +00:00
co-authored by Cursor
parent aa4b744b18
commit 762aba0246
2 changed files with 53 additions and 59 deletions
@@ -4,23 +4,23 @@
@endphp @endphp
@if(is_array($programme) && ! empty($programme['days'])) @if(is_array($programme) && ! empty($programme['days']))
<div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6"> <div class="programme-agenda mt-6 rounded-2xl border border-slate-200 bg-white p-6 font-sans">
<h2 class="text-sm font-medium text-slate-700">Agenda</h2> <h2 class="text-sm font-medium text-slate-700">Agenda</h2>
@if(! empty($programme['title'])) @if(! empty($programme['title']))
<p class="mt-1 text-xs text-slate-500">{{ $programme['title'] }}</p> <p class="mt-1 text-xs text-slate-500">{{ $programme['title'] }}</p>
@endif @endif
@if($linkedItems !== []) @if($linkedItems !== [])
<p class="mt-2 text-xs font-semibold uppercase tracking-wide text-violet-600">Linked to this session</p> <p class="mt-3 text-[11px] font-semibold uppercase tracking-wide text-violet-600">Linked to this session</p>
<ul class="mt-2 space-y-2 text-sm text-slate-700"> <ul class="mt-2 space-y-2 text-sm">
@foreach($linkedItems as $item) @foreach($linkedItems as $item)
<li class="rounded-lg border border-violet-100 bg-violet-50/50 px-3 py-2"> <li class="rounded-xl border border-violet-100 bg-violet-50/50 px-3 py-2.5">
@if(! empty($item['time'])) @if(! empty($item['time']))
<span class="font-mono text-xs text-slate-500">{{ $item['time'] }}</span> <p class="text-[11px] font-medium text-indigo-600">{{ $item['time'] }}</p>
@endif @endif
<span class="font-medium">{{ $item['title'] ?? 'Item' }}</span> <p @class(['font-medium text-slate-800', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? 'Item' }}</p>
@if(! empty($item['host'])) @if(! empty($item['host']))
<span class="text-slate-500"> · {{ $item['host'] }}</span> <p class="mt-0.5 text-xs text-slate-500">{{ $item['host'] }}</p>
@endif @endif
</li> </li>
@endforeach @endforeach
@@ -29,36 +29,33 @@
<div class="mt-4 space-y-4"> <div class="mt-4 space-y-4">
@foreach((array) ($programme['days'] ?? []) as $day) @foreach((array) ($programme['days'] ?? []) as $day)
<div> <section>
@if(! empty($day['label']) || ! empty($day['date'])) @if(! empty($day['label']) || ! empty($day['date']))
<h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
{{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }} {{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }}
</h3> </h3>
@endif @endif
<ul class="mt-2 divide-y divide-slate-100 text-sm"> <ul @class(['space-y-2 text-sm', ! empty($day['label']) || ! empty($day['date']) ? 'mt-2' : ''])>
@foreach((array) ($day['items'] ?? []) as $item) @foreach((array) ($day['items'] ?? []) as $item)
<li class="py-2"> <li class="rounded-xl border border-slate-100 bg-slate-50/80 px-3 py-2.5">
<div class="flex gap-3"> @if(! empty($item['time']))
@if(! empty($item['time'])) <p class="text-[11px] font-medium text-slate-500">{{ $item['time'] }}</p>
<span class="w-14 shrink-0 font-mono text-xs text-slate-400">{{ $item['time'] }}</span> @endif
@endif <p @class(['font-medium leading-snug text-slate-800', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? '' }}</p>
<div> @if(! empty($item['description']))
<p class="font-medium text-slate-800">{{ $item['title'] ?? '' }}</p> <p class="mt-1 text-xs leading-relaxed text-slate-500">{{ $item['description'] }}</p>
@if(! empty($item['description'])) @endif
<p class="mt-0.5 text-xs text-slate-500">{{ $item['description'] }}</p> @if(! empty($item['location']) || ! empty($item['host']))
@endif <p class="mt-1 text-xs text-slate-400">
@if(! empty($item['location']) || ! empty($item['host'])) @if(! empty($item['location'])){{ $item['location'] }}@endif
<p class="mt-0.5 text-xs text-slate-400"> @if(! empty($item['location']) && ! empty($item['host'])) · @endif
@if(! empty($item['location'])){{ $item['location'] }}@endif @if(! empty($item['host'])){{ $item['host'] }}@endif
@if(! empty($item['host'])) · {{ $item['host'] }}@endif </p>
</p> @endif
@endif
</div>
</div>
</li> </li>
@endforeach @endforeach
</ul> </ul>
</div> </section>
@endforeach @endforeach
</div> </div>
</div> </div>
@@ -5,23 +5,23 @@
@endphp @endphp
@if(is_array($programme) && ! empty($programme['days'])) @if(is_array($programme) && ! empty($programme['days']))
<div class="space-y-4 text-sm"> <div class="programme-panel font-sans space-y-5 text-sm">
@if(! empty($programme['title'])) @if(! empty($programme['title']))
<p class="text-xs text-slate-400">{{ $programme['title'] }}</p> <p class="text-xs font-medium text-slate-400">{{ $programme['title'] }}</p>
@endif @endif
@if($linkedItems !== []) @if($linkedItems !== [])
<div> <div>
<p class="text-xs font-semibold uppercase tracking-wide text-violet-400">This session</p> <p class="text-[11px] font-semibold uppercase tracking-wide text-violet-400">This session</p>
<ul class="mt-2 space-y-2"> <ul class="mt-2 space-y-2">
@foreach($linkedItems as $item) @foreach($linkedItems as $item)
<li class="rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-slate-100"> <li class="rounded-xl border border-violet-500/30 bg-violet-500/10 px-3 py-2.5">
@if(! empty($item['time'])) @if(! empty($item['time']))
<span class="font-mono text-xs text-violet-200/80">{{ $item['time'] }}</span> <p class="text-[11px] font-medium text-violet-200/90">{{ $item['time'] }}</p>
@endif @endif
<span class="font-medium">{{ $item['title'] ?? 'Item' }}</span> <p @class(['font-medium text-slate-100', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? 'Item' }}</p>
@if(! empty($item['host'])) @if(! empty($item['host']))
<span class="text-slate-400"> · {{ $item['host'] }}</span> <p class="mt-0.5 text-xs text-slate-400">{{ $item['host'] }}</p>
@endif @endif
</li> </li>
@endforeach @endforeach
@@ -30,38 +30,35 @@
@endif @endif
@foreach((array) ($programme['days'] ?? []) as $day) @foreach((array) ($programme['days'] ?? []) as $day)
<div> <section>
@if(! empty($day['label']) || ! empty($day['date'])) @if(! empty($day['label']) || ! empty($day['date']))
<h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500"> <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
{{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }} {{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }}
</h3> </h3>
@endif @endif
<ul class="mt-2 divide-y divide-slate-800"> <ul @class(['space-y-2', ! empty($day['label']) || ! empty($day['date']) ? 'mt-2' : ''])>
@foreach((array) ($day['items'] ?? []) as $item) @foreach((array) ($day['items'] ?? []) as $item)
<li class="py-2.5"> <li class="rounded-xl border border-slate-800/80 bg-slate-900/40 px-3 py-2.5">
<div class="flex gap-3"> @if(! empty($item['time']))
@if(! empty($item['time'])) <p class="text-[11px] font-medium text-slate-400">{{ $item['time'] }}</p>
<span class="w-14 shrink-0 font-mono text-xs text-slate-500">{{ $item['time'] }}</span> @endif
@endif <p @class(['font-medium leading-snug text-slate-100', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? '' }}</p>
<div class="min-w-0"> @if(! empty($item['description']))
<p class="font-medium text-slate-100">{{ $item['title'] ?? '' }}</p> <p class="mt-1 text-xs leading-relaxed text-slate-400">{{ $item['description'] }}</p>
@if(! empty($item['description'])) @endif
<p class="mt-0.5 text-xs text-slate-400">{{ $item['description'] }}</p> @if(! empty($item['location']) || ! empty($item['host']))
@endif <p class="mt-1 text-xs text-slate-500">
@if(! empty($item['location']) || ! empty($item['host'])) @if(! empty($item['location'])){{ $item['location'] }}@endif
<p class="mt-0.5 text-xs text-slate-500"> @if(! empty($item['location']) && ! empty($item['host'])) · @endif
@if(! empty($item['location'])){{ $item['location'] }}@endif @if(! empty($item['host'])){{ $item['host'] }}@endif
@if(! empty($item['host'])) · {{ $item['host'] }}@endif </p>
</p> @endif
@endif
</div>
</div>
</li> </li>
@endforeach @endforeach
</ul> </ul>
</div> </section>
@endforeach @endforeach
</div> </div>
@else @else
<p class="px-2 py-4 text-center text-xs text-slate-500">No programme linked to this {{ $sessionNoun }} yet.</p> <p class="px-2 py-4 text-center font-sans text-xs text-slate-500">No programme linked to this {{ $sessionNoun }} yet.</p>
@endif @endif