diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json index 564a19a30b8508f4e0dbc966b8b542ae88dbdb6b..9786ce904cb67719836d42340b53c76e01b32f29 100644 --- a/frontend/src/lang/en.json +++ b/frontend/src/lang/en.json @@ -144,7 +144,8 @@ "participants": "Participants", "programed": "Scheduled", "status": "Status", - "topics": "Topics" + "topics": "Topics", + "toggle": "Participants" } }, "button": { diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json index dc0f0b273ceba7e2583c41c8001053d877fa7b46..11852e248c7604058b10fc1e258af42914e6415d 100644 --- a/frontend/src/lang/fr.json +++ b/frontend/src/lang/fr.json @@ -432,7 +432,8 @@ "title": "Titre", "users": "Utilisateurs", "description": "Description", - "email": "E-mail" + "email": "E-mail", + "toggle": "Participants" } }, "inputs": { diff --git a/frontend/src/routes/sessions/[id]/+page.svelte b/frontend/src/routes/sessions/[id]/+page.svelte index 6f53193a995279fac3963f4a03bafce9e1a34d2e..a8bd4b6b4c44360b76312a8e207d1d33153fd89a 100644 --- a/frontend/src/routes/sessions/[id]/+page.svelte +++ b/frontend/src/routes/sessions/[id]/+page.svelte @@ -6,37 +6,60 @@ let { data }: { data: PageData } = $props(); let user = data.user!; - let { session, jwt } = data; let { onlineUsers } = session; </script> -<div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0"> +<div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative"> + <input type="checkbox" id="toggleParticipants" class="hidden peer" /> + + <label + for="toggleParticipants" + class="absolute top-4 right-4 bg-yellow-500 text-white px-2 py-1 rounded-md shadow-md + hover:bg-yellow-600 transition focus:outline-none text-sm lg:hidden" + > + {$t('utils.words.toggle')} + </label> + <div - class="border rounded-xl p-4 shadow-[0_0_6px_0_rgba(0,14,156,.2)] m-2 my-0 lg:mt-2 h-fit lg:w-96 text-lg space-y-2" + class="group w-full max-w-md bg-white border rounded-lg shadow-md p-6 mx-4 my-2 h-fit text-base + lg:text-lg transition-all duration-300 ease-in-out hidden lg:block peer-checked:block" > - <h2 class="text-center font-bold">{$t('utils.words.participants')}</h2> - <div class="pb-2 space-y-2"> + <h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4"> + {$t('utils.words.participants')} + </h2> + + <div class="space-y-4"> {#each session.users as sessionUser (sessionUser.id)} - <div class="flex space-x-2"> - <div class="rounded-full mx-2 chat-image size-6" title={sessionUser.nickname}> + <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-100 transition"> + <div + class="w-10 h-10 rounded-full overflow-hidden shadow-md" + title={sessionUser.nickname} + > <img src={`https://gravatar.com/avatar/${sessionUser.emailHash}?d=identicon`} alt={sessionUser.nickname} - class="rounded-full border-2 text-sm {sessionUser.id == user?.id || + class="rounded-full border-2 {sessionUser.id == user?.id || $onlineUsers.has(sessionUser.id) ? 'border-green-500' : 'border-red-500'}" /> </div> - - <span class:font-bold={sessionUser === user}>{sessionUser.nickname}</span> + <span class="truncate w-48 lg:w-64 font-medium text-gray-800"> + {sessionUser.nickname} + </span> </div> {/each} </div> - <h2 class="text-center font-bold border-t pt-2">{$t('utils.words.topics')}</h2> - <p class="text-center text-sm text-neutral-500 italic">{$t('session.noTopic')}</p> + + <h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4"> + {$t('utils.words.topics')} + </h2> + <p class="text-center truncate text-sm text-neutral-500 italic"> + {$t('session.noTopic')} + </p> </div> + <div class="flex flex-row flex-grow col-span-5"> <Chatbox {session} {jwt} {user} /> </div>