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
+ 12
36
Comparer les modifications
  • Côte à côte
  • En ligne
Brieuc Dubois
Dernier commentaire posté par Dave
@@ -3,10 +3,8 @@
import type { PageData } from './$types.js';
import WeeklySurvey from './WeeklySurvey.svelte';
import Chatbox from './Chatbox.svelte';
import { onMount } from 'svelte';
let showParticipants = $state(false);
let isShortScreen = $state(false);
let { data }: { data: PageData } = $props();
let user = data.user!;
@@ -16,44 +14,22 @@
function toggleParticipants() {
showParticipants = !showParticipants;
}
onMount(() => {
isShortScreen = typeof window !== 'undefined' && window.innerWidth < 1024;
function handleResize() {
const newShortScreen = window.innerWidth < 1024;
if (newShortScreen !== isShortScreen) {
isShortScreen = newShortScreen;
if (!isShortScreen) {
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}
<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"
onclick={toggleParticipants}
>
{$t('utils.words.toggle')}
</button>
{/if}
<div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
<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 lg:hidden"
onclick={toggleParticipants}
>
{$t('utils.words.toggle')}
</button>
<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={isShortScreen && !showParticipants}
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}
>
<h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4">
{$t('utils.words.participants')}
Chargement en cours