Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: minor ui changes

Browse source
This commit is contained in:
Théo 2023-09-17 23:03:42 +02:00
parent 5b47fd7b53
commit 664ce0a29b
6 changed files with 30 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Badge.svelte
View file

@ -19,5 +19,5 @@
width={500} width={500}
height={500} height={500}
/> />
<span class="text-sm font-semibold">{name}</span> <span class="text-sm font-semibold break-all">{name}</span>
</div> </div>

17
src/lib/components/Navbar.svelte
View file

@ -18,7 +18,7 @@
</script> </script>
<div <div
class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-4 sm:px-8 py-4" class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-4 py-4 sm:px-8"
> >
<div class="flex flex-row items-center space-x-2 sm:space-x-0"> <div class="flex flex-row items-center space-x-2 sm:space-x-0">
<div class="flex items-center"> <div class="flex items-center">
@ -50,8 +50,19 @@
{/if} --> {/if} -->
</div> </div>
<div class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
<Avatar /> {#if !isOpen}
{user?.pseudo} <a href="/logout">
<button
class="flex items-center gap-1 rounded-md p-2 text-destructive hover:bg-destructive/10"
>
Se déconnecter
</button>
</a>
{/if}
<div class="flex flex-row items-center gap-2">
<Avatar />
{user?.pseudo}
</div>
<!-- {!isLoading && me ? ( <!-- {!isLoading && me ? (
<Popover <Popover
open={isMenuOpen} open={isMenuOpen}

16
src/lib/components/Sidenav.svelte
View file

@ -117,20 +117,14 @@
<div class="px-4 pt-4"> <div class="px-4 pt-4">
<ul class="flex flex-col gap-4"> <ul class="flex flex-col gap-4">
<li> <li>
<a <span
on:click={() => { class="group pointer-events-none flex justify-center rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
isOpen = false;
}}
href="/dashboard/help"
class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Help <Help class="stroke-highlight-secondary transition-colors duration-150" />
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
/>
<span <span
class={cn( class={cn(
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', 'hidden text-highlight-secondary transition-colors duration-150 lg:block',
{ {
'block sm:hidden': isOpen, 'block sm:hidden': isOpen,
hidden: !isOpen hidden: !isOpen
@ -140,7 +134,7 @@
Aide Aide
</span> </span>
</div> </div>
</a> </span>
</li> </li>
<li> <li>
<a <a

4
src/routes/dashboard/+layout.svelte
View file

@ -1,6 +1,7 @@
<script class="ts"> <script class="ts">
import Navbar from '$lib/components/Navbar.svelte'; import Navbar from '$lib/components/Navbar.svelte';
import Sidenav from '$lib/components/Sidenav.svelte'; import Sidenav from '$lib/components/Sidenav.svelte';
import Toaster from '$lib/components/Toaster.svelte';
let isOpen = false; let isOpen = false;
</script> </script>
@ -10,8 +11,9 @@
<Sidenav bind:isOpen /> <Sidenav bind:isOpen />
<div class="flex flex-1 flex-col"> <div class="flex flex-1 flex-col">
<Navbar bind:isOpen /> <Navbar bind:isOpen />
<Toaster />
<div <div
class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 sm:p-8 duration-300 ease-in-out" class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 duration-300 ease-in-out sm:p-8"
> >
<slot /> <slot />
</div> </div>

12
src/routes/dashboard/badges/+page.svelte
View file

@ -3,18 +3,18 @@
import Badge from '$lib/components/Badge.svelte'; import Badge from '$lib/components/Badge.svelte';
$: user = $page.data.user; $: user = $page.data.user;
$: badges = user?.badges?.sort((a, b) => a.level - b.level);
</script> </script>
<section class="flex h-full w-full flex-col space-y-4"> <section class="flex h-full w-full flex-col gap-4">
<header class="flex flex-col"> <header class="flex flex-col">
<h1 class="text-xl font-semibold">Mes badges</h1> <h1 class="text-xl font-semibold">Mes badges</h1>
<p class="text-muted">Vos badges sont affichés ici, vous pouvez les partager avec vos amis</p> <p class="text-muted">Vos badges sont affichés ici, vous pouvez les partager avec vos amis</p>
</header> </header>
<!-- <Separator /> --> <main class="flex flex-col justify-between gap-4">
<main class="flex flex-col justify-between space-x-0 space-y-4"> <div class="flex flex-wrap gap-4">
<div class="flex space-x-2"> {#if badges && badges.length}
{#if user?.badges} {#each badges as badge}
{#each user.badges as badge}
<Badge name={badge.name} src={badge.logo} alt={badge.name} level={badge.level} /> <Badge name={badge.name} src={badge.logo} alt={badge.name} level={badge.level} />
{/each} {/each}
{:else} {:else}

2
src/routes/dashboard/chapters/+page.svelte
View file

@ -9,7 +9,7 @@
<section class="flex w-full flex-col space-y-6"> <section class="flex w-full flex-col space-y-6">
<header class="sticky flex items-center justify-between"> <header class="sticky flex items-center justify-between">
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="text-xl font-semibold">Chaptires</h1> <h1 class="text-xl font-semibold">Chapitres</h1>
<p class="text-muted"> <p class="text-muted">
Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
puzzles. puzzles.