From 1af95b1d2b9eb1753cb3d04a76cbca5bfb73fa60 Mon Sep 17 00:00:00 2001
From: Dave <dave.pikoppokam@student.uclouvain.be>
Date: Fri, 21 Feb 2025 08:16:24 +0000
Subject: [PATCH] Fix/121 user list responsiveness
---
frontend/src/lang/en.json | 3 +-
frontend/src/lang/fr.json | 3 +-
.../src/routes/sessions/[id]/+page.svelte | 47 ++++++++++++++-----
3 files changed, 39 insertions(+), 14 deletions(-)
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 564a19a3..9786ce90 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 dc0f0b27..11852e24 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 6f53193a..a8bd4b6b 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>
--
GitLab