Skip to main content
Explore
Sign in
Explore
Snippets Groups Projects

Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur

Merged Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur
welcome_page into master
Merged
Toufic Batacherequested to merge
welcome_page into master
Viewing commit 82492d85
Show latest version
1 file
+ 124
− 92
Compare changes
  • Side-by-side
  • Inline
src/routes/welcome/+page.svelte
+ 124
− 92
@@ -19,6 +19,9 @@
import { trackSearchVariable } from "$lib/matomo"
import { newSimulationUrl } from "$lib/urls"
import { variableSummaryByName } from "$lib/variables"
import PictoFemme from "$lib/components/pictos/PictoFemme.svelte"
import PictoBigEntreprise from "$lib/components/pictos/PictoBigEntreprise.svelte"
import PictoBigParent from "$lib/components/pictos/PictoBigParent.svelte"
const displayMode: DisplayMode = {
testCasesIndex: [0],
@@ -313,106 +316,135 @@
id="dispositif-couverts"
class="grid grid-cols-2 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
>
<h2 class="text-2xl font-bold col-span-2 text-center">
Les {withLinkedVariableNames.length} dispositifs couverts par le simulateur
LexImpact socio-fiscal&nbsp;:
<h2 class="text-2xl font-light col-span-2 text-center">
Les {withLinkedVariableNames.length} dispositifs couverts<br />par le
simulateur LexImpact socio-fiscal&nbsp;:
</h2>
{#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
{#if visibleDecompositions.length > 0}
<div
class="h-fit flex flex-col gap-3 px-4 py-3 border rounded-lg shadow-lg"
>
<span class="font-bold text-lg px-2 mt-1.5">
Dispositifs {waterfall.label.toLowerCase()} :
</span>
<!-- Navigation dispositifs-->
<div class="flex-auto">
{#each visibleDecompositions as { decomposition, depth, trunk, visibleChildren }}
<div
class="flex h-8 items-center whitespace-nowrap border-t border-gray-200 px-2"
class:font-bold={decomposition.name ===
displayMode.parametersVariableName}
class:bg-gray-200={decomposition.name ===
displayMode.parametersVariableName}
>
{#if trunk}
<div
class="overflow-x-hidden text-ellipsis border-gray-400 text-base text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white"
>
<a
class="cursor-pointer text-base hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
<div>
<h3 class="font-bold text-lg mt-1.5">
Dispositifs affectant les {waterfall.label.toLowerCase()}s :
</h3>
<p class="font-serif mb-4">
{#if waterfall.label.toLowerCase() === "particulier"}
Tous les dispositifs des particuliers : du salaire de base
<span class="text-sm">- salaire brut + primes -</span> jusqu'aux prestations
sociales, en passant par les cotisations, contributions et les impôts
:
{:else if waterfall.label.toLowerCase() === "employeur"}
Tous les dispositifs concernant les employeurs, de la rémunération
brute aux cotisations patronales et allègements employeurs,
permettant ainsi d'évaluer le coût salarial :
{/if}
</p>
<div
class="h-fit flex flex-col gap-3 px-4 py-3 border rounded-lg shadow-lg"
>
<div class="w-full flex justify-center items-center">
{#if waterfalls.length > 0}
{#if waterfall.label.toLowerCase() === "particulier" || waterfall.label.toLowerCase() === "employeur"}
<img
class="origin-center h-8"
alt=""
src={waterfalls[
waterfall.label.toLowerCase() === "particulier" ? 0 : 1
].icon}
/>
{/if}
{/if}
</div>
<!-- Navigation dispositifs-->
<div class="flex-auto">
{#each visibleDecompositions as { decomposition, depth, trunk, visibleChildren }}
<div
class="flex h-8 items-center whitespace-nowrap border-t border-gray-200 px-2"
class:font-bold={decomposition.name ===
displayMode.parametersVariableName}
class:bg-gray-200={decomposition.name ===
displayMode.parametersVariableName}
>
{#if trunk}
<div
class="overflow-x-hidden text-ellipsis border-gray-400 text-base text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white"
>
</div>
{:else}
{#each [...iterToDepth(depth)] as _level}
<div class="ml-2 h-full border-l border-le-gris-dispositif">
&nbsp;
<a
class="cursor-pointer text-base hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
>
</div>
{/each}
{#if visibleChildren === undefined}
<!-- Leaf node (except the first one, that belongs to trunk) -->
<a
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
>
{:else}
<!-- Non-trunk, non-leaf variable -->
<button
class="-ml-1 text-black"
on:click={() =>
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)}
>
<iconify-icon
class="align-[-0.2rem] text-lg"
icon={decomposition.open
? "ri-arrow-down-s-line"
: "ri-arrow-right-s-line"}
/>
</button>
<button
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
on:click={() => {
// Non-leaf decomposition node in variable inputs mode => no-link
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)
// Leaf decomposition node with parameters in parameters mode => link
if (displayMode.edit === undefined) {
goto(
newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
}),
{
noScroll: true,
},
)
}
}}
data-sveltekit-noscroll
>{decomposition.short_label ??
decomposition.label}</button
>
{#each [...iterToDepth(depth)] as _level}
<div
class="ml-2 h-full border-l border-le-gris-dispositif"
>
&nbsp;
</div>
{/each}
{#if visibleChildren === undefined}
<!-- Leaf node (except the first one, that belongs to trunk) -->
<a
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
>
{:else}
<!-- Non-trunk, non-leaf variable -->
<button
class="-ml-1 text-black"
on:click={() =>
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)}
>
<iconify-icon
class="align-[-0.2rem] text-lg"
icon={decomposition.open
? "ri-arrow-down-s-line"
: "ri-arrow-right-s-line"}
/>
</button>
<button
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
on:click={() => {
// Non-leaf decomposition node in variable inputs mode => no-link
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)
// Leaf decomposition node with parameters in parameters mode => link
if (displayMode.edit === undefined) {
goto(
newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
}),
{
noScroll: true,
},
)
}
}}
data-sveltekit-noscroll
>{decomposition.short_label ??
decomposition.label}</button
>
{/if}
{/if}
{/if}
</div>
{/each}
</div>
{/each}
</div>
</div>
</div>
{/if}