isaacclad/ladill-meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove divider lines across the meeting room interface.
Deploy Ladill Meet / deploy (push) Successful in 1m7s
Details

Browse Source 
Drop header, footer, panel, and tile borders in favor of spacing, shadows, and rounded surfaces for a cleaner borderless layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-01 09:42:21 +00:00
co-authored by Cursor
parent e204a197a8
commit fed878bb5f
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/meet-room.js
+2 -2
View File
@@ -309,11 +309,11 @@ function meetRoom() {
if (!tile) { if (!tile) {
tile = document.createElement('div'); tile = document.createElement('div');
tile.dataset.participantTile = identity; tile.dataset.participantTile = identity;
tile.className = 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900 ring-1 ring-white/10'; tile.className = 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900';
tile.innerHTML = ` tile.innerHTML = `
<div data-tile-stage class="absolute inset-0 flex items-center justify-center"></div> <div data-tile-stage class="absolute inset-0 flex items-center justify-center"></div>
<div data-tile-avatar class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4"> <div data-tile-avatar class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4">
<div data-tile-avatar-circle class="flex h-20 w-20 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg ring-2 ring-white/10"></div> <div data-tile-avatar-circle class="flex h-20 w-20 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg"></div>
</div> </div>
<div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-2 pt-8"> <div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-2 pt-8">
<span data-tile-name class="truncate text-xs font-medium text-white"></span> <span data-tile-name class="truncate text-xs font-medium text-white"></span>
resources/views/meet/room/show.blade.php
+17 -17
View File
@@ -55,14 +55,14 @@
<div class="flex h-full min-w-0"> <div class="flex h-full min-w-0">
<div class="relative flex min-h-0 min-w-0 flex-1 flex-col"> <div class="relative flex min-h-0 min-w-0 flex-1 flex-col">
<header class="flex shrink-0 items-center justify-between border-b border-slate-800/80 bg-slate-950/90 px-4 py-3 backdrop-blur"> <header class="flex shrink-0 items-center justify-between bg-slate-950 px-4 py-3">
<div class="min-w-0"> <div class="min-w-0">
<h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1> <h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1>
<p class="text-xs text-slate-400" x-text="connectionStatus"></p> <p class="text-xs text-slate-400" x-text="connectionStatus"></p>
</div> </div>
<div class="flex shrink-0 items-center gap-2 text-xs text-slate-400"> <div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
<button @click="openShare()" type="button" <button @click="openShare()" type="button"
class="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800" 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 meeting link"> title="Share meeting link">
@include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4']) @include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
Share Share
@@ -74,7 +74,7 @@
</header> </header>
<div x-show="shareOpen" x-cloak @click.outside="shareOpen = false" <div x-show="shareOpen" x-cloak @click.outside="shareOpen = false"
class="absolute right-4 top-14 z-50 w-80 rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-xl"> class="absolute right-4 top-14 z-50 w-80 rounded-xl bg-slate-900 p-4 shadow-2xl">
<div class="flex items-start justify-between gap-2"> <div class="flex items-start justify-between gap-2">
<div> <div>
<p class="text-sm font-medium text-white">Invite others</p> <p class="text-sm font-medium text-white">Invite others</p>
@@ -86,7 +86,7 @@
</div> </div>
<div class="mt-3 flex gap-2"> <div class="mt-3 flex gap-2">
<input type="text" readonly :value="joinUrl" <input type="text" readonly :value="joinUrl"
class="min-w-0 flex-1 rounded-lg border-slate-700 bg-slate-950 px-3 py-2 text-xs text-slate-200"> class="min-w-0 flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-xs text-slate-200 ring-1 ring-slate-700/60">
<button @click="copyJoinLink()" type="button" <button @click="copyJoinLink()" type="button"
class="shrink-0 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500" class="shrink-0 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500"
x-text="shareCopied ? 'Copied' : 'Copy'"></button> x-text="shareCopied ? 'Copied' : 'Copy'"></button>
@@ -108,7 +108,7 @@
<div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2"> <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
<template x-for="reaction in floatingReactions" :key="reaction.id"> <template x-for="reaction in floatingReactions" :key="reaction.id">
<span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90 ring-1 ring-white/20"> <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90">
<img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5"> <img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
<img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5"> <img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
</span> </span>
@@ -116,7 +116,7 @@
</div> </div>
</main> </main>
<footer class="relative shrink-0 border-t border-slate-800/80 bg-slate-950/95 px-4 py-4 backdrop-blur"> <footer class="relative shrink-0 bg-slate-950 px-4 py-4">
<div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-2 sm:gap-3"> <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-2 sm:gap-3">
<button @click="toggleMute()" type="button" <button @click="toggleMute()" type="button"
class="rounded-full p-3 transition-colors" class="rounded-full p-3 transition-colors"
@@ -167,7 +167,7 @@
</form> </form>
@if ($participant->isHost()) @if ($participant->isHost())
<button @click="openEndMeetingConfirm()" type="button" <button @click="openEndMeetingConfirm()" type="button"
class="rounded-full border border-red-500 px-4 py-3 text-sm text-red-400 hover:bg-red-950">End</button> class="rounded-full bg-red-950 px-4 py-3 text-sm text-red-400 hover:bg-red-900">End</button>
<form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden"> <form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
@csrf @csrf
</form> </form>
@@ -181,8 +181,8 @@
x-transition:leave="transition ease-in duration-100" x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="translate-y-0 opacity-100" x-transition:leave-start="translate-y-0 opacity-100"
x-transition:leave-end="translate-y-2 opacity-0" x-transition:leave-end="translate-y-2 opacity-0"
class="absolute bottom-full left-1/2 z-40 mb-3 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-2xl border border-slate-700/80 bg-slate-900/98 shadow-2xl backdrop-blur-md"> class="absolute bottom-full left-1/2 z-40 mb-3 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-2xl bg-slate-900/98 p-1 shadow-2xl backdrop-blur-md">
<div class="flex items-center justify-between border-b border-slate-800 px-4 py-3"> <div class="flex items-center justify-between px-3 py-3">
<div> <div>
<p class="text-sm font-semibold text-white">More options</p> <p class="text-sm font-semibold text-white">More options</p>
<p class="text-xs text-slate-400">Meeting tools and extras</p> <p class="text-xs text-slate-400">Meeting tools and extras</p>
@@ -236,7 +236,7 @@
</div> </div>
@if ($isWebinar ?? false) @if ($isWebinar ?? false)
<div class="border-t border-slate-800 px-4 py-3"> <div class="px-3 py-3">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Q&amp;A</p> <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Q&amp;A</p>
<ul class="mt-2 max-h-36 space-y-2 overflow-y-auto"> <ul class="mt-2 max-h-36 space-y-2 overflow-y-auto">
<template x-for="item in qaItems" :key="item.uuid"> <template x-for="item in qaItems" :key="item.uuid">
@@ -249,27 +249,27 @@
</ul> </ul>
<form @submit.prevent="submitQuestion" class="mt-3 flex gap-2"> <form @submit.prevent="submitQuestion" class="mt-3 flex gap-2">
<input type="text" x-model="qaInput" placeholder="Ask a question…" <input type="text" x-model="qaInput" placeholder="Ask a question…"
class="flex-1 rounded-lg border-slate-700 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500"> class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
<button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium hover:bg-indigo-500">Send</button> <button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium hover:bg-indigo-500">Send</button>
</form> </form>
</div> </div>
@endif @endif
<p x-show="breakoutBroadcast" class="border-t border-slate-800 bg-amber-950/40 px-4 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p> <p x-show="breakoutBroadcast" class="mx-2 mb-2 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
</div> </div>
</footer> </footer>
<div x-show="breakoutModalOpen" x-cloak <div x-show="breakoutModalOpen" x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
@keydown.escape.window="breakoutModalOpen = false"> @keydown.escape.window="breakoutModalOpen = false">
<div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false"> <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
<h3 class="text-base font-semibold text-white">Start breakout rooms</h3> <h3 class="text-base font-semibold text-white">Start breakout rooms</h3>
<p class="mt-1 text-sm text-slate-400">How many breakout rooms should be created?</p> <p class="mt-1 text-sm text-slate-400">How many breakout rooms should be created?</p>
<form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4"> <form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4">
<div> <div>
<label for="breakout-count" class="sr-only">Number of rooms</label> <label for="breakout-count" class="sr-only">Number of rooms</label>
<input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount" <input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount"
class="w-full rounded-xl border-slate-700 bg-slate-950 px-3 py-2.5 text-sm text-white focus:border-indigo-500 focus:ring-indigo-500"> class="w-full rounded-xl border-0 bg-slate-950 px-3 py-2.5 text-sm text-white ring-1 ring-slate-700/60 focus:ring-indigo-500">
</div> </div>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button type="button" @click="breakoutModalOpen = false" <button type="button" @click="breakoutModalOpen = false"
@@ -284,7 +284,7 @@
<div x-show="endMeetingConfirmOpen" x-cloak <div x-show="endMeetingConfirmOpen" x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
@keydown.escape.window="endMeetingConfirmOpen = false"> @keydown.escape.window="endMeetingConfirmOpen = false">
<div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false"> <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
<h3 class="text-base font-semibold text-white">End meeting for everyone?</h3> <h3 class="text-base font-semibold text-white">End meeting for everyone?</h3>
<p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p> <p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p>
<div class="mt-5 flex justify-end gap-2"> <div class="mt-5 flex justify-end gap-2">
@@ -310,7 +310,7 @@
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg> <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button> </button>
</div> </div>
<div class="flex min-h-0 flex-1 flex-col rounded-2xl bg-slate-900/90 p-3 ring-1 ring-slate-800/60"> <div class="flex min-h-0 flex-1 flex-col rounded-2xl bg-slate-900/90 p-3">
<div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages"> <div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages">
@foreach ($messages as $message) @foreach ($messages as $message)
@php $isOwn = $message->sender_name === $participant->display_name; @endphp @php $isOwn = $message->sender_name === $participant->display_name; @endphp
@@ -328,7 +328,7 @@
<form @submit.prevent="sendChat" class="mt-3 shrink-0"> <form @submit.prevent="sendChat" class="mt-3 shrink-0">
<div class="flex items-end gap-2"> <div class="flex items-end gap-2">
<input type="text" x-model="chatInput" placeholder="Write a message…" <input type="text" x-model="chatInput" placeholder="Write a message…"
class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/80 focus:ring-indigo-500"> class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:ring-2 focus:ring-indigo-500">
<button type="submit" <button type="submit"
class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
:disabled="!chatInput.trim()">Send</button> :disabled="!chatInput.trim()">Send</button>