Skip to content
Extraits de code Groupes Projets

Fix/121 user list responsiveness

Tous les fils de conversation ont été résolus !
Fusionnées Dave a demandé de fusionner fix/121-user-list-responsiveness vers dev
Tous les fils de conversation ont été résolus !
1 fichier
+ 8
12
Comparer les modifications
  • Côte à côte
  • En ligne
Brieuc Dubois
Dernier commentaire posté par Dave
@@ -4,36 +4,31 @@
import WeeklySurvey from './WeeklySurvey.svelte';
import Chatbox from './Chatbox.svelte';
let showParticipants = $state(false);
let { data }: { data: PageData } = $props();
let user = data.user!;
let { session, jwt } = data;
let { onlineUsers } = session;
function toggleParticipants() {
showParticipants = !showParticipants;
}
</script>
<div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
<button
<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"
onclick={toggleParticipants}
>
{$t('utils.words.toggle')}
</button>
</label>
<div
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 data-[open=true]:block"
data-open={showParticipants}
lg:text-lg transition-all duration-300 ease-in-out hidden lg:block peer-checked:block"
>
<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 items-center gap-4 p-3 rounded-lg hover:bg-gray-100 transition">
@@ -56,6 +51,7 @@
</div>
{/each}
</div>
<h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
{$t('utils.words.topics')}
</h2>
Chargement en cours