Improve mobile UX on public pages and the live room header.
Deploy Ladill Meet / deploy (push) Successful in 35s
Deploy Ladill Meet / deploy (push) Successful in 35s
Cap customer-facing logos at 50vw on phones, tighten leave-feedback layout, and show icon-only share plus a blinking record dot on mobile. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -15,6 +15,12 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.public-brand-logo {
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* App shell: always light (ignore OS dark mode). Live meeting keeps dark UI. */
|
||||
html.app-shell {
|
||||
color-scheme: light;
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="px-6 pb-8 pt-7 text-center sm:px-8">
|
||||
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}"
|
||||
alt="{{ $signedOut['title'] ?? config('app.name') }}"
|
||||
class="mx-auto h-7 w-auto">
|
||||
class="public-brand-logo mx-auto h-7 w-auto">
|
||||
|
||||
<div @class([
|
||||
'mx-auto mt-6 flex h-14 w-14 items-center justify-center rounded-2xl',
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</head>
|
||||
<body class="flex min-h-screen items-center justify-center bg-slate-50 font-sans text-slate-900 antialiased">
|
||||
<div class="mx-auto max-w-md px-6 text-center">
|
||||
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}" alt="{{ $title }}" class="mx-auto h-8 w-auto">
|
||||
<img src="{{ asset($logo) }}?v={{ @filemtime($logoPath) ?: '1' }}" alt="{{ $title }}" class="public-brand-logo mx-auto h-8 w-auto">
|
||||
<h1 class="mt-6 text-xl font-semibold">We couldn't sign you in</h1>
|
||||
<p class="mt-2 text-sm text-slate-500">
|
||||
Sign-in didn't complete after a few tries. This is usually a temporary
|
||||
|
||||
@@ -31,11 +31,11 @@
|
||||
<div class="fixed left-0 top-0 z-20 p-6">
|
||||
<img src="{{ asset(\App\Support\OrganizationBranding::DEFAULT_LOGO) }}?v={{ @filemtime(public_path(\App\Support\OrganizationBranding::DEFAULT_LOGO)) ?: '1' }}"
|
||||
alt="Ladill Meet"
|
||||
class="h-8 w-auto max-w-[220px] object-contain object-left">
|
||||
class="public-brand-logo h-8 w-auto max-w-[220px] object-contain object-left">
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col pt-20 px-6 pb-12">
|
||||
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col px-4 pb-10 pt-16 sm:px-6 sm:pb-12 sm:pt-20">
|
||||
@if ($eyebrow)
|
||||
<p class="text-center text-sm font-semibold uppercase tracking-wider text-indigo-600">{{ $eyebrow }}</p>
|
||||
@endif
|
||||
|
||||
@@ -2,20 +2,20 @@
|
||||
<div class="flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center">
|
||||
<form method="POST" action="{{ route('meet.left.feedback', $session) }}"
|
||||
x-data="leaveFeedback"
|
||||
class="w-full max-w-lg rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
|
||||
class="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:rounded-3xl sm:p-6 md:p-8">
|
||||
@csrf
|
||||
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-bold text-slate-900">You left the {{ $room->isConference() ? 'conference' : 'meeting' }}</h1>
|
||||
<h1 class="text-xl font-bold text-slate-900 sm:text-2xl">You left the {{ $room->isConference() ? 'conference' : 'meeting' }}</h1>
|
||||
<p class="mt-2 text-sm text-slate-500">{{ $room->title }}</p>
|
||||
@if (! empty($feedback['display_name']))
|
||||
<p class="mt-1 text-sm text-slate-600">Thanks, {{ $feedback['display_name'] }}.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<p class="text-sm font-medium text-slate-700">How was the {{ $room->isConference() ? 'conference' : 'meeting' }} overall?</p>
|
||||
<div class="mt-3 flex justify-center gap-2">
|
||||
<div class="mt-6 sm:mt-8">
|
||||
<p class="text-center text-sm font-medium text-slate-700 sm:text-left">How was the {{ $room->isConference() ? 'conference' : 'meeting' }} overall?</p>
|
||||
<div class="mt-3 flex justify-center gap-0.5 sm:gap-2">
|
||||
@foreach (range(1, 5) as $star)
|
||||
<button type="button"
|
||||
@click="setRating({{ $star }})"
|
||||
@@ -23,7 +23,7 @@
|
||||
@mouseleave="hoverRating = 0"
|
||||
class="rounded-lg p-1 transition-transform hover:scale-110"
|
||||
aria-label="Rate {{ $star }} stars">
|
||||
<svg class="h-9 w-9"
|
||||
<svg class="h-8 w-8 sm:h-9 sm:w-9"
|
||||
:class="(hoverRating || rating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
|
||||
@@ -34,14 +34,14 @@
|
||||
<input type="hidden" name="rating" :value="rating" required>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<div class="mt-6 space-y-6 sm:mt-8 md:grid md:grid-cols-2 md:gap-6 md:space-y-0">
|
||||
<div class="text-center md:text-left">
|
||||
<p class="text-sm font-medium text-slate-700">Audio quality</p>
|
||||
<div class="mt-2 flex gap-1">
|
||||
<div class="mt-2 flex justify-center gap-1 md:justify-start">
|
||||
@foreach (range(1, 5) as $star)
|
||||
<button type="button" @click="setAudioRating({{ $star }})"
|
||||
class="rounded p-0.5">
|
||||
<svg class="h-6 w-6"
|
||||
class="rounded p-1">
|
||||
<svg class="h-7 w-7 sm:h-6 sm:w-6"
|
||||
:class="(hoverAudio || audioRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
|
||||
@@ -51,13 +51,13 @@
|
||||
</div>
|
||||
<input type="hidden" name="audio_rating" :value="audioRating || ''">
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-center md:text-left">
|
||||
<p class="text-sm font-medium text-slate-700">Video quality</p>
|
||||
<div class="mt-2 flex gap-1">
|
||||
<div class="mt-2 flex justify-center gap-1 md:justify-start">
|
||||
@foreach (range(1, 5) as $star)
|
||||
<button type="button" @click="setVideoRating({{ $star }})"
|
||||
class="rounded p-0.5">
|
||||
<svg class="h-6 w-6"
|
||||
class="rounded p-1">
|
||||
<svg class="h-7 w-7 sm:h-6 sm:w-6"
|
||||
:class="(hoverVideo || videoRating) >= {{ $star }} ? 'text-amber-400' : 'text-slate-300'"
|
||||
fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/>
|
||||
@@ -69,20 +69,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-6 sm:mt-8">
|
||||
<label class="block text-sm font-medium text-slate-700">Anything else we should know? <span class="font-normal text-slate-400">(optional)</span></label>
|
||||
<textarea name="comment" rows="3" x-model="comment" placeholder="Share feedback for the host or Ladill Meet…"
|
||||
class="mt-2 w-full rounded-2xl border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||
<div class="mt-6 flex flex-col gap-3 sm:mt-8">
|
||||
<button type="submit"
|
||||
class="btn-primary btn-primary-lg flex-1 py-3.5 font-semibold disabled:cursor-not-allowed disabled:opacity-50"
|
||||
class="btn-primary btn-primary-lg w-full py-3.5 font-semibold disabled:cursor-not-allowed disabled:opacity-50"
|
||||
:disabled="!canSubmit()">
|
||||
Submit feedback
|
||||
</button>
|
||||
<a href="{{ route('meet.left.thanks', $session) }}"
|
||||
class="inline-flex flex-1 items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
|
||||
class="inline-flex w-full items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-sm font-medium text-slate-600 hover:bg-slate-50">
|
||||
Skip
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
<div class="fixed left-0 top-0 z-20 p-6">
|
||||
<img src="{{ OrganizationBranding::logoUrl($organization) }}"
|
||||
alt="{{ OrganizationBranding::logoAlt($organization) }}"
|
||||
class="h-8 w-auto max-w-[220px] object-contain object-left">
|
||||
class="public-brand-logo h-8 w-auto max-w-[220px] object-contain object-left sm:max-w-[220px]">
|
||||
</div>
|
||||
|
||||
@@ -157,12 +157,19 @@
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
|
||||
<button @click.stop="openShare()" data-share-trigger type="button"
|
||||
class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
|
||||
title="Share {{ $sessionNoun }} link">
|
||||
class="inline-flex items-center justify-center rounded-lg bg-slate-900 p-2 text-slate-200 transition-colors hover:bg-slate-800 sm:gap-1.5 sm:px-2.5 sm:py-1.5"
|
||||
title="Share {{ $sessionNoun }} link"
|
||||
aria-label="Share {{ $sessionNoun }} link">
|
||||
@include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
|
||||
Share
|
||||
<span class="hidden sm:inline text-xs font-medium">Share</span>
|
||||
</button>
|
||||
<span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless class="rounded bg-red-600 px-2 py-0.5 font-medium text-white">REC</span>
|
||||
<span x-show="isRecording" @unless($activeRecording) style="display: none" @endunless
|
||||
class="inline-flex items-center justify-center"
|
||||
role="status"
|
||||
aria-label="Recording">
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse sm:hidden"></span>
|
||||
<span class="hidden rounded bg-red-600 px-2 py-0.5 text-xs font-medium text-white sm:inline">REC</span>
|
||||
</span>
|
||||
<span x-show="isLocked" @unless($session->is_locked) style="display: none" @endunless class="rounded bg-amber-600 px-2 py-0.5 font-medium text-white">Locked</span>
|
||||
<button @click="toggleParticipants()" type="button"
|
||||
class="relative inline-flex items-center gap-2 rounded-lg bg-slate-900 px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
|
||||
|
||||
Reference in New Issue
Block a user