From 5259309f100642795aa075dc12af8e1cbc5ee179 Mon Sep 17 00:00:00 2001
From: Antoine Pierlot-Garcin <antoine@bokbox.com>
Date: Sun, 19 Nov 2023 18:32:22 +0100
Subject: [PATCH] salaire : layout mobile

---
 src/routes/+page.svelte          |  2 +-
 src/routes/PlusMoins.svelte      |  4 ++--
 src/routes/SalaireInterne.svelte | 20 ++++++++------------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8ca60ef..3c33211 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import SalaireInterne from './SalaireInterne.svelte';
 </script>
 
-<div class="container mx-auto flex justify-center items-center max-w-6xl px-1 sm:px-2 md:px-5 mt-2 sm:mt-6 md:mt-16">
+<div class="container mx-auto flex justify-center items-center max-w-4xl px-1 sm:px-2 md:px-5 mt-2 sm:mt-6 md:mt-16">
 	<div class="space-y-10 items-center grid grid-cols-1">
 
 		<div>
diff --git a/src/routes/PlusMoins.svelte b/src/routes/PlusMoins.svelte
index 259d947..e9489c1 100644
--- a/src/routes/PlusMoins.svelte
+++ b/src/routes/PlusMoins.svelte
@@ -15,7 +15,7 @@
 	}
 </script>
 
-<div class="flex flex-col-reverse xl:flex-row items-center justify-left gap-2">
+<div class="flex flex-col-reverse items-center justify-left gap-2">
 	<div class="inline-flex rounded-full shadow-sm" role="group">
 		<button
 			type="button"
@@ -44,5 +44,5 @@
 			<Fa icon={faPlus} size="sm" />
 		</button>
 	</div>
-	<span class="grow"><slot /></span>
+	<span class="grow truncate"><slot /></span>
 </div>
diff --git a/src/routes/SalaireInterne.svelte b/src/routes/SalaireInterne.svelte
index 8689c29..ba2b0eb 100644
--- a/src/routes/SalaireInterne.svelte
+++ b/src/routes/SalaireInterne.svelte
@@ -179,22 +179,18 @@
 {@debug base, totalBrut, totalNet}
 
 <!-- ENTREES -->
-<div class="gap-3 flex flex-wrap md:grid md:grid-cols-5 md:items-center align-top">
+<div class="gap-3 flex flex-wrap md:grid md:grid-cols-5 md:items-start">
 	<div>
-		<label class="label" for="dateSalaire"><span>Date d'effet</span></label>
+		<label class="label pl-3 py-1" for="dateSalaire"><span>Date d'effet</span></label>
 		<input class="input" id="dateSalaire" value="Date" disabled />
 	</div>
-	<div class="col-span-3 overflow-x-auto flex">
-		<div class="grow" />
-		<div class="text-center">
-			<label class="label text-left pl-3" for="anneeInternat"><span>Année</span></label>
-			<RadioGroup id="anneeInternat">
+	<div class="col-span-3 overflow-x-auto flex flex-col text-center">
+			<label class="label me-80 pl-3 py-1" for="anneeInternat"><span>Année</span></label>
+			<RadioGroup id="anneeInternat" display="inline-flex mx-auto" padding="px-3 py-1">
 				{#each annees as a}
 					<RadioItem bind:group={anneeInternat} name="anneeInternat" value={a}>{a}</RadioItem>
 				{/each}
 			</RadioGroup>
-		</div>
-		<div class="grow" />
 	</div>
 	<div class="flex flex-col gap-1">
 		<SlideToggle name="slider-logé" bind:checked={isLogé}>Logé</SlideToggle>
@@ -231,14 +227,14 @@
 		<PlusMoins bind:compteur={nbAstreintes}>Astreintes (12h)</PlusMoins>
 		<PlusMoins bind:compteur={nbDeplacements}>Déplacements</PlusMoins>
 	</div>
-	<div class="col-span-5 flex flex-col md:flex-row">
+	<div class="grow md:col-span-5 flex flex-col md:flex-row">
 		<span>Taux de prélèvement à la source : {tauxSource} %</span>
-		<input type="range" bind:value={tauxSource} max="20" step="0.5" />
+		<input class="py-1" type="range" bind:value={tauxSource} max="20" step="0.5" />
 	</div>
 </div>
 
 <!-- BULLETIN DE SALAIRE -->
-<div class="ficheSalaire flex flex-col bg-surface-700 font-mono">
+<div class="ficheSalaire flex flex-col bg-surface-700 font-mono divide-y divide-gray-500">
 	<div class="grow flex text-center bg-surface-600 px-1 font-bold">
 		<div class="grow text-left">&nbsp;Description</div>
 		<div class="flex-none w-24">Base</div>