Show full restart labels on mobile and scroll btn-groups horizontally.
Deploy Ladill Meet / deploy (push) Successful in 1m20s
Deploy Ladill Meet / deploy (push) Successful in 1m20s
Remove icon-only restart buttons on webinar and conference pages; btn-group now carousels on narrow screens when actions overflow. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+25
-1
@@ -819,9 +819,33 @@ html.qr-mobile-page body {
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.btn-group::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-group > * {
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.btn-group {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
scroll-snap-type: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-fab {
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-app-layout title="{{ $room->title }}">
|
||||
@php
|
||||
$conferenceRestarting = $room->status === 'ended' || $room->sessions->isNotEmpty();
|
||||
@endphp
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-violet-600">Conference</p>
|
||||
@@ -26,33 +23,23 @@
|
||||
|
||||
<div class="btn-group mt-4">
|
||||
@if ($room->status === 'live' && $room->activeSession())
|
||||
<a href="{{ route('meet.join', $room) }}" class="btn-primary btn-primary-sm">Join conference</a>
|
||||
<a href="{{ route('meet.join', $room) }}" class="btn-primary btn-primary-sm whitespace-nowrap">Join conference</a>
|
||||
@elseif ($room->status === 'scheduled')
|
||||
<form method="POST" action="{{ route('meet.conferences.start', $room) }}" class="inline">
|
||||
@csrf
|
||||
<button type="submit" class="btn-primary btn-primary-sm">Start conference</button>
|
||||
<button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">Start conference</button>
|
||||
</form>
|
||||
@elseif ($room->canRestart())
|
||||
<form method="POST" action="{{ route('meet.conferences.start', $room) }}" class="inline">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="btn-primary btn-primary-sm {{ $conferenceRestarting ? 'inline-flex max-lg:h-9 max-lg:w-9 max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:p-0' : '' }}"
|
||||
title="{{ $room->restartLabel() }}"
|
||||
aria-label="{{ $room->restartLabel() }}">
|
||||
@if ($conferenceRestarting)
|
||||
<svg class="h-4 w-4 lg:hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
|
||||
</svg>
|
||||
<span class="hidden lg:inline">{{ $room->restartLabel() }}</span>
|
||||
@else
|
||||
<button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">
|
||||
{{ $room->restartLabel() }}
|
||||
@endif
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
<a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm">Download iCal</a>
|
||||
<a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Download iCal</a>
|
||||
@if ($room->sessions->isNotEmpty())
|
||||
<a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm">Attendance CSV</a>
|
||||
<a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Attendance CSV</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-app-layout title="{{ $room->title }}">
|
||||
@php
|
||||
$webinarRestarting = $room->status === 'ended' || $room->sessions->isNotEmpty();
|
||||
@endphp
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Webinar</p>
|
||||
@@ -32,24 +29,14 @@
|
||||
@if ($room->canRestart())
|
||||
<form method="POST" action="{{ route('meet.webinars.start', $room) }}" class="inline">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="btn-primary btn-primary-sm {{ $webinarRestarting ? 'inline-flex max-lg:h-9 max-lg:w-9 max-lg:items-center max-lg:justify-center max-lg:rounded-full max-lg:p-0' : '' }}"
|
||||
title="{{ $room->restartLabel() }}"
|
||||
aria-label="{{ $room->restartLabel() }}">
|
||||
@if ($webinarRestarting)
|
||||
<svg class="h-4 w-4 lg:hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
|
||||
</svg>
|
||||
<span class="hidden lg:inline">{{ $room->restartLabel() }}</span>
|
||||
@else
|
||||
<button type="submit" class="btn-primary btn-primary-sm whitespace-nowrap">
|
||||
{{ $room->restartLabel() }}
|
||||
@endif
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
<a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm">Download iCal</a>
|
||||
<a href="{{ route('meet.rooms.ical', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Download iCal</a>
|
||||
@if ($room->sessions->isNotEmpty())
|
||||
<a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm">Attendance CSV</a>
|
||||
<a href="{{ route('meet.rooms.attendance', $room) }}" class="btn-secondary btn-secondary-sm whitespace-nowrap">Attendance CSV</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user