feat(front): change sidebar

CETEN-OpenBar · May 5, 2024 · 801e4fb · 801e4fb
1 parent d1daf9a
commit 801e4fb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/frontend/src/lib/components/client/items.svelte b/frontend/src/lib/components/client/items.svelte
@@ -130,20 +130,20 @@
 
 <!-- horizontal & overflows -->
 {#if items.length === 0}
-	<div class="col-span-7 flex flex-col items-center justify-center">
+	<div class="col-span-7 flex flex-col justify-items-center">
 		<span class="text-3xl text-white" in:fade={{ duration: 200, delay: 100 }}>Aucun article</span>
 	</div>
 {:else}
 	<div
-		class="w-full p-16"
+		class="w-full md:p-12 p-4"
 		in:fly={{ x: -direction * 300, duration: 500 }}
 		out:fly={{ x: direction * 300, duration: 500 }}
 		use:dragscroll
 	>
 		{#each items as item}
 			<!-- image wil be in a button box -->
 			<div
-				class="relative min-w-48 w-40 max-w-40 h-50 inline-flex item-justify rounded-lg text-white transition-colors duration-300"
+				class="relative min-w-40 max-w-40 min-h-50 h-50 max-h-50 inline-flex item-justify rounded-lg text-white transition-colors duration-300"
 			>
 				<!-- add info svg on the top right -->
 				{#if item.is_menu}
@@ -172,7 +172,7 @@
 						alt={item.name}
 					/>
 					<div class="flex flex-col">
-						<span class="text-lg font-bold">{item.name}</span>
+						<span class="text-lg font-bold w-40">{item.name}</span>
 						<span class="text-sm">Prix: {formatPrice(item.display_price ?? 999)}</span>
 					</div>
 				</button>

diff --git a/frontend/src/routes/client/commande/+page.svelte b/frontend/src/routes/client/commande/+page.svelte
@@ -268,7 +268,11 @@
 	style="background-color:#393E46"
 >
 	{#if !menuPicks}
-		<div class="{sidebar ? 'w-4/5' : 'w-full'} h-full relative transition-all ease-in-out overflow-y-auto">
+		<div
+			class="{sidebar
+				? 'w-full'
+				: 'w-full'} h-full relative transition-all ease-in-out overflow-y-auto"
+		>
 			<div class="p-4 flex justify-between" style="background-color:#222831">
 				<button
 					class="flex items-center h-1/2 space-x-2 px-4 py-2 mr-2 rounded-lg bg-green-500 hover:bg-green-600 transition-colors duration-300"
@@ -300,7 +304,7 @@
 			{/if}
 		</div>
 	{:else}
-		<div class="{sidebar ? 'w-4/5' : 'w-full'} h-full relative transition-all ease-in-out">
+		<div class="w-full h-full relative transition-all ease-in-out">
 			<div class="p-4 flex justify-between" style="background-color:#222831">
 				<button
 					class="flex items-center h-1/2 space-x-2 px-4 py-2 mr-2 rounded-lg bg-green-500 hover:bg-green-600 transition-colors duration-300"
@@ -338,7 +342,7 @@
 	{/if}
 	{#if sidebar}
 		<div
-			class="absolute top-0 right-0 w-1/5 h-screen"
+			class="absolute top-0 right-0 w-1/5 h-screen translate-x-full transition-transform sm:translate-x-0"
 			style="background-color:#222831"
 			in:fly={{ x: 300, duration: 200 }}
 			out:fly={{ x: 300, duration: 200 }}