Skip to content
Extraits de code Groupes Projets

Fix/121 user list responsiveness

Fusionnées Dave a demandé de fusionner fix/121-user-list-responsiveness vers dev
1 fichier
+ 28
13
Comparer les modifications
  • Côte à côte
  • En ligne
@@ -3,33 +3,48 @@
import type { PageData } from './$types.js';
import WeeklySurvey from './WeeklySurvey.svelte';
import Chatbox from './Chatbox.svelte';
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
let showParticipants = $state(false);
let isShortScreen = $state(false);
let { data }: { data: PageData } = $props();
let user = data.user!;
let { session, jwt } = data;
let { onlineUsers } = session;
let showParticipants = writable(false);
function toggleParticipants() {
showParticipants.update((value) => !value);
showParticipants = !showParticipants;
}
let isShortScreen = writable(false);
onMount(() => {
isShortScreen = typeof window !== 'undefined' && window.innerWidth < 1024;
function handleResize() {
isShortScreen.set(window.innerWidth < 1024);
}
window.addEventListener('resize', handleResize);
handleResize();
function handleResize() {
const wasShortScreen = isShortScreen;
isShortScreen = window.innerWidth < 1024;
if (!isShortScreen && wasShortScreen) {
showParticipants = true;
}
}
if (typeof window !== 'undefined') {
window.addEventListener('resize', handleResize);
handleResize();
return () => {
window.removeEventListener('resize', handleResize);
};
}
});
</script>
<div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0 bg-gray-50 relative">
{#if $isShortScreen}
{#if isShortScreen}
<button
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"
on:click={toggleParticipants}
onclick={toggleParticipants}
>
{$t('utils.words.toggle')}
</button>
@@ -37,7 +52,7 @@
<div
class="bg-white border rounded-lg shadow-md p-6 mx-4 my-2 h-fit w-full max-w-md text-base lg:text-lg"
class:!hidden={!$showParticipants && !window.matchMedia('(min-width: 1024px)').matches}
class:!hidden={typeof window !== 'undefined' && !showParticipants && !window.matchMedia('(min-width: 1024px)').matches}
>
<h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4">
{$t('utils.words.participants')}
Chargement en cours