Antoine
/
interne-utils
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

salaire : layout mobile

This commit is contained in:
Antoine Pierlot-Garcin 2023-11-19 18:32:22 +01:00
parent c16366d92f
commit 5259309f10
3 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+page.svelte
View File

@ -2,7 +2,7 @@
import SalaireInterne from './SalaireInterne.svelte'; import SalaireInterne from './SalaireInterne.svelte';
</script> </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 class="space-y-10 items-center grid grid-cols-1">
<div> <div>

4
src/routes/PlusMoins.svelte
View File

@ -15,7 +15,7 @@
} }
</script> </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"> <div class="inline-flex rounded-full shadow-sm" role="group">
<button <button
type="button" type="button"
@ -44,5 +44,5 @@
<Fa icon={faPlus} size="sm" /> <Fa icon={faPlus} size="sm" />
</button> </button>
</div> </div>
<span class="grow"><slot /></span> <span class="grow truncate"><slot /></span>
</div> </div>

20
src/routes/SalaireInterne.svelte
View File

@ -179,23 +179,19 @@
{@debug base, totalBrut, totalNet} {@debug base, totalBrut, totalNet}
<!-- ENTREES --> <!-- 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> <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 /> <input class="input" id="dateSalaire" value="Date" disabled />
</div> </div>
<div class="col-span-3 overflow-x-auto flex"> <div class="col-span-3 overflow-x-auto flex flex-col text-center">
<div class="grow" /> <label class="label me-80 pl-3 py-1" for="anneeInternat"><span>Année</span></label>
<div class="text-center"> <RadioGroup id="anneeInternat" display="inline-flex mx-auto" padding="px-3 py-1">
<label class="label text-left pl-3" for="anneeInternat"><span>Année</span></label>
<RadioGroup id="anneeInternat">
{#each annees as a} {#each annees as a}
<RadioItem bind:group={anneeInternat} name="anneeInternat" value={a}>{a}</RadioItem> <RadioItem bind:group={anneeInternat} name="anneeInternat" value={a}>{a}</RadioItem>
{/each} {/each}
</RadioGroup> </RadioGroup>
</div> </div>
<div class="grow" />
</div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<SlideToggle name="slider-logé" bind:checked={isLogé}>Logé</SlideToggle> <SlideToggle name="slider-logé" bind:checked={isLogé}>Logé</SlideToggle>
<SlideToggle name="slider-nourri" bind:checked={isNourri}>Nourri</SlideToggle> <SlideToggle name="slider-nourri" bind:checked={isNourri}>Nourri</SlideToggle>
@ -231,14 +227,14 @@
<PlusMoins bind:compteur={nbAstreintes}>Astreintes (12h)</PlusMoins> <PlusMoins bind:compteur={nbAstreintes}>Astreintes (12h)</PlusMoins>
<PlusMoins bind:compteur={nbDeplacements}>Déplacements</PlusMoins> <PlusMoins bind:compteur={nbDeplacements}>Déplacements</PlusMoins>
</div> </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> <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>
</div> </div>
<!-- BULLETIN DE SALAIRE --> <!-- 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 flex text-center bg-surface-600 px-1 font-bold">
<div class="grow text-left">&nbsp;Description</div> <div class="grow text-left">&nbsp;Description</div>
<div class="flex-none w-24">Base</div> <div class="flex-none w-24">Base</div>