diff --git a/src/app.postcss b/src/app.postcss
index 463d76a2db1342ca9c07a2d7fdca1a34b00e78fd..a6183327a592dfb2c5972e9552150a4ff0d5f607 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,6 +1,7 @@
@import "@fontsource/lato/index.css";
@import "@fontsource/lato/300.css";
@import "@fontsource/lato/300-italic.css";
+@import "@fontsource/lato/400-italic.css";
@import "@fontsource/lato/700.css";
@import "@fontsource/lato/700-italic.css";
@import "@fontsource/lato/900.css";
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 57e7718b5c8480e57d36fb2f5449a8e4797c07b9..1dbc47dcce9b0d79a4d4750d6c7c2a6a948a6001 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -417,7 +417,7 @@
<div
class="absolute top-28 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-350px)/2)] md:top-12 md:w-[350px] lg:left-[calc((100%-500px)/2)] lg:w-[500px] 2xl:left-[calc((100%-600px)/2)] 2xl:top-14 2xl:w-[600px]"
>
- <ul class="max-h-96 list-none overflow-y-auto py-2 md:max-h-[600px]">
+ <ul class="max-h-56 list-none overflow-y-auto py-2 md:max-h-[600px]">
{#if searchResults.length > 0}
{#each searchResults as variable, index (`found_variable_$${index}`)}
<li>
diff --git a/src/lib/components/search/NavBarSearch.svelte b/src/lib/components/search/NavBarSearch.svelte
index 45f03a6271077c63446f7fe0b945457dcca95062..69ebf3cf228a22f5f28474a270731c79f7c88dd9 100644
--- a/src/lib/components/search/NavBarSearch.svelte
+++ b/src/lib/components/search/NavBarSearch.svelte
@@ -3,10 +3,14 @@
export let searchQuery: string
</script>
-<div class="flex h-14 items-center md:h-auto md:h-auto">
+<div class="flex h-14 items-center md:h-auto">
<div
- class="flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 md:w-[350px] lg:w-[500px] 2xl:w-[600px]"
+ class="flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 px-2 md:w-[350px] lg:w-[500px] 2xl:w-[600px]"
>
+ <iconify-icon
+ class="mx-1 self-center p-1 text-lg text-black"
+ icon="ri-search-line"
+ />
<input
autocomplete="off"
class="w-full border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
@@ -18,16 +22,12 @@
{#if isSearchActive}
<iconify-icon
class="mx-1 cursor-pointer self-center p-1 text-black"
- icon="ic-baseline-clear"
- flip="horizontal"
- width="22"
- height="22"
+ icon="ri-close-line"
+ width="20"
+ height="20"
on:click={() => (searchQuery = "")}
on:keyup
/>
{/if}
- <button class="flex items-center bg-le-jaune px-8 md:px-4 lg:px-8 xl:px-10 text-xl 2xl:text-2xl"
- ><iconify-icon icon="ri-search-line" /></button
- >
</div>
</div>
diff --git a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
index f619664d299622ba1b3546f3bbc71e83778af391..0598ebdccb75e8b1962534b42adc7af689a7d6b3 100644
--- a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
+++ b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
@@ -45,25 +45,31 @@
const dispatch = createEventDispatcher()
let carouselEl: HTMLElement | undefined
- let elementWidth: number
- let scrollX = 0
- $: nbElements = filteredTestCases.length
- $: maxScrollX = elementWidth * nbElements
+ let carouselScrollX = 0
+ let carouselWidth = 0
+ let gapWidth = 20
+ let elementWidth = 400
+ let toleranceOffset = 15
+ $: nbElements = filteredTestCases.length + 1
+ $: maxScrollX = Math.max(
+ 0,
+ (elementWidth + gapWidth) * nbElements + gapWidth - carouselWidth,
+ )
function scrollCarousel(forwards: boolean) {
if (forwards) {
- scrollX = Math.min(scrollX + elementWidth, maxScrollX)
+ carouselScrollX = Math.min(carouselScrollX + elementWidth, maxScrollX)
} else {
- scrollX = Math.max(scrollX - elementWidth, 0)
+ carouselScrollX = Math.max(carouselScrollX - elementWidth, 0)
}
- carouselEl.scrollTo(scrollX, 0)
+ carouselEl.scrollTo(carouselScrollX, 0)
}
</script>
<div class="flex items-center">
<button
- class="z-10 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border bg-gray-50 enabled:hover:border-le-bleu disabled:text-gray-400 md:flex 2xl:h-12 2xl:w-12"
+ class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border bg-gray-50 shadow-md transition-transform duration-500 ease-out-back enabled:hover:border-le-bleu disabled:text-gray-400 md:flex lg:mx-5 2xl:h-12 2xl:w-12"
+ class:scale-0={carouselScrollX <= toleranceOffset}
on:click={() => scrollCarousel(false)}
- disabled={scrollX === 0}
><iconify-icon
class="text-2xl 2xl:text-3xl"
icon="ri-arrow-left-line"
@@ -71,17 +77,20 @@
>
<div
bind:this={carouselEl}
- class="mx-5 md:mx-2 lg:mx-4 flex w-full snap-x gap-5 overflow-x-auto scroll-smooth py-5 lg:gap-10"
+ bind:clientWidth={carouselWidth}
+ on:scroll={(ev) => (carouselScrollX = ev.target.scrollLeft)}
+ class="flex w-full snap-x scroll-p-10 gap-5 overflow-x-auto scroll-smooth py-5 md:-ml-14 lg:-ml-20 2xl:-ml-[88px]"
>
<!-- <div class="snap-center shrink-0">-->
<!-- <div class="shrink-0 w-4 sm:w-20"></div>-->
<!-- </div>-->
+ <div />
{#each filteredTestCases as { situation, situationIndex }}
{@const isTestCaseSelected =
JSON.stringify(displayMode.testCasesIndex) ===
JSON.stringify([situationIndex])}
<div
- class="w-[80%] shrink-0 snap-center xl:w-[600px]"
+ class="w-[80%] shrink-0 snap-start xl:w-[400px]"
value={situationIndex}
>
<button
@@ -115,7 +124,7 @@
variableSummary.label ??
displayMode.parametersVariableName} :</span
>
- <div class="flex gap-5 text-2xl 2xl:text-3xl font-semibold">
+ <div class="flex gap-5 text-2xl font-semibold 2xl:text-3xl">
<VariableValueChange
evaluationByName={$evaluationByNameArray[situationIndex]}
legend
@@ -125,7 +134,7 @@
</div>
</div>
<span
- class="group-hover:text-le-bleu text-sm 2xl:text-base"
+ class="text-sm group-hover:text-le-bleu 2xl:text-base"
class:text-le-bleu={JSON.stringify(displayMode.testCasesIndex) ===
JSON.stringify([situationIndex])}
>
@@ -135,8 +144,7 @@
</div>
{/each}
<div
- class="w-[80%] shrink-0 snap-center border-2 bg-white hover:border-le-bleu hover:bg-gray-200 md:rounded-md xl:w-[600px]"
- bind:clientWidth={elementWidth}
+ class="w-[80%] shrink-0 snap-center border-2 bg-white/30 hover:border-le-bleu hover:bg-gray-50/50 md:rounded-md xl:w-[400px]"
>
<button
class="flex h-full min-h-[320px] w-full flex-col items-center justify-center gap-5"
@@ -150,11 +158,12 @@
<span class="text-sm 2xl:text-base">Voir plus de cas types</span>
</button>
</div>
+ <div />
</div>
<button
- class="z-10 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border bg-gray-50 enabled:hover:border-le-bleu disabled:text-gray-400 md:flex 2xl:h-12 2xl:w-12"
+ class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border bg-gray-50 shadow-md transition-transform duration-500 ease-out-back enabled:hover:border-le-bleu disabled:text-gray-400 md:-ml-12 md:flex lg:mx-5 lg:-ml-16 2xl:-ml-[72px] 2xl:h-12 2xl:w-12"
+ class:scale-0={carouselScrollX >= maxScrollX - toleranceOffset}
on:click={() => scrollCarousel(true)}
- disabled={scrollX === maxScrollX}
><iconify-icon
class="text-2xl 2xl:text-3xl"
icon="ri-arrow-right-line"
diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte
index d4991df2761bee81757ef9b7a4aac3012a79afd2..536bbd8be7ba953f2b89499f9f2a4a906c2c95ca 100644
--- a/src/lib/components/test_cases/TestCaseSummary.svelte
+++ b/src/lib/components/test_cases/TestCaseSummary.svelte
@@ -424,7 +424,9 @@
class="text-xs leading-none"
title="Frais de loyer ou d'emprunt pour un primo-accédant par an"
>
- <span class="text-sm 2xl:text-base">{euroAmountFormatter(loyer)}</span>
+ <span class="text-sm 2xl:text-base"
+ >{euroAmountFormatter(loyer)}</span
+ >
{#if statut_occupation_logement === "locataire_foyer" || statut_occupation_logement === "locataire_hlm" || statut_occupation_logement === "locataire_meuble" || statut_occupation_logement === "locataire_vide"}
loyer/an
{:else if statut_occupation_logement === "primo_accedant"}emprunt
@@ -444,7 +446,9 @@
class="text-xs leading-none"
title="Volume en Litre de carburant par an"
>
- <span class="text-sm 2xl:text-base">{nombre_litres_total} L.</span>
+ <span class="text-sm 2xl:text-base"
+ >{nombre_litres_total} L.</span
+ >
carburant/an
</p>
@@ -642,7 +646,7 @@
{populationId}
</div>
{/if}
- <span class="mr-1 text-md 2xl:text-lg font-bold">
+ <span class="text-md mr-1 font-bold 2xl:text-lg">
{#if secteur_activite_employeur === "agricole" && (taches_salarie_type === "production_animale_vegetale" || taches_salarie_type === "prolongement_production" || taches_salarie_type === "travaux_forestiers") && regime_securite_sociale === "regime_agricole" && contrat_de_travail_type === "cdd" && (contrat_duree_determinee_type === "contrat_usage" || contrat_duree_determinee_type === "contrat_saisonnier" || contrat_duree_determinee_type === "contrat_vendanges" || contrat_duree_determinee_type === "contrat_insertion" || contrat_duree_determinee_type === "contrat_initiative_emploi")}Travailleur
occasionnel agricole
{:else}{generateActivityLabel(situation, populationId)}{/if}</span
@@ -705,7 +709,7 @@
<!--Salaire de base-->
<div class="flex flex-col flex-wrap md:flex-row md:items-center">
<div class="mr-2">
- <span class="text-lg 2xl:text-xl font-bold text-gray-800">
+ <span class="text-lg font-bold text-gray-800 2xl:text-xl">
{euroAmountFormatter(
getVariableNumberValue(situation, slider.name, populationId),
)}
diff --git a/src/lib/components/test_cases/TestCaseTab.svelte b/src/lib/components/test_cases/TestCaseTab.svelte
index b8692663b42ad546ced3f9948461bae3df37fd77..42ffd5294ad3167d98c7b9a1cc3c8352b13f22f7 100644
--- a/src/lib/components/test_cases/TestCaseTab.svelte
+++ b/src/lib/components/test_cases/TestCaseTab.svelte
@@ -17,7 +17,7 @@
</script>
<a
- class="flex gap-2 border-r-2 px-4 py-4 uppercase text-sm 2xl:text-base text-gray-600 md:px-8"
+ class="flex gap-2 border-r-2 px-4 py-4 text-sm uppercase text-gray-600 md:px-8 2xl:text-base"
class:bg-white={isActive && !isDisabled}
class:shadow-md={isActive && !isDisabled}
class:!text-gray-400={isDisabled}
@@ -25,7 +25,7 @@
href={!isDisabled ? href : undefined}
>
{#if pictoComponent !== undefined}
- <svelte:component classNames="w-5 2xl:w-6" this={pictoComponent} />
+ <svelte:component this={pictoComponent} classNames="w-5 2xl:w-6" />
{:else}
<iconify-icon {icon} class="text-xl 2xl:text-2xl" />
{/if}
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index 74db55efeeec17035340d8719b9ea6eed2b320da..3b089cb666f48b4b03aaf974b0be1a5d219825d1 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -66,7 +66,7 @@
</script>
<div
- class="place-self-start rounded-lg border border-gray-200 shadow-md md:mx-12 md:mb-5 lg:mx-14"
+ class="mx-0 place-self-start rounded-lg border border-gray-200 shadow-md md:mx-2 md:mb-5 lg:mx-5"
id="situation_{situationIndex}"
>
<div
@@ -108,7 +108,7 @@
<div class="w-full bg-white px-8 py-5">
{#if displayMode.parametersVariableName !== undefined && decompositionByName[displayMode.parametersVariableName] !== undefined}
<div class="flex flex-col gap-5">
- <div class="flex flex-col lg:grid lg:grid-cols-3 gap-5">
+ <div class="flex flex-col gap-5 lg:grid lg:grid-cols-3">
<div class="flex flex-col">
<div
class="relative flex-col border-gray-400 md:pb-5"
@@ -133,13 +133,13 @@
]}
{#if variableSummary !== undefined}
<div class="flex-col">
- <p class="mb-3 text-lg 2xl:text-xl font-bold">
+ <p class="mb-3 text-lg font-bold 2xl:text-xl">
{variableSummary.short_label ??
variableSummary.label ??
displayMode.parametersVariableName} :
</p>
<div
- class="flex flex-wrap items-start gap-2 text-3xl 2xl:text-4xl font-semibold"
+ class="flex flex-wrap items-start gap-2 text-3xl font-semibold 2xl:text-4xl"
>
<VariableValueChange
{evaluationByName}
@@ -188,7 +188,7 @@
][linkedVariableName]}
<li>
<a
- class="cursor-pointer text-sm 2xl:text-base hover:underline"
+ class="cursor-pointer text-sm hover:underline 2xl:text-base"
href={newSimulationUrl({
...displayMode,
parametersVariableName: linkedVariableName,
@@ -227,7 +227,10 @@
displayMode.parametersVariableName
]}
{#if variableSummary !== undefined}
- {@const linkedVariablesList = [variableSummary.linked_other_variables, variableSummary.linked_output_variables].filter((value) => value != null)}
+ {@const linkedVariablesList = [
+ variableSummary.linked_output_variables,
+ variableSummary.linked_other_variables,
+ ].filter((value) => value != null)}
{#each linkedVariablesList as linkedVariables}
{@const allowColumnWrap = linkedVariablesList.length === 1}
<div class="flex items-center">
@@ -242,7 +245,7 @@
)}
{#if $showNulls || !linkedVariablesValueByCalculationName.every(isNullVariableValueByCalculationName)}
<ul
- class="flex flex-col gap-2 md:gap-5 border-t-2 pt-5 lg:pt-0 lg:border-t-0 lg:border-l-2 lg:pl-5 border-gray-200"
+ class="flex flex-col gap-2 border-t-2 border-gray-200 pt-5 md:gap-5 lg:border-l-2 lg:border-t-0 lg:pl-5 lg:pt-0"
class:lg:max-h-[250px]={allowColumnWrap}
class:2xl:max-h-[200px]={allowColumnWrap}
class:lg:flex-wrap={allowColumnWrap}
@@ -259,7 +262,7 @@
][linkedVariableName]}
<li class="flex">
<a
- class="cursor-pointer text-sm 2xl:text-base hover:underline"
+ class="cursor-pointer text-sm hover:underline 2xl:text-base"
href={newSimulationUrl({
...displayMode,
parametersVariableName: linkedVariableName,
@@ -310,7 +313,7 @@
{/if}
</div>
- <label class="inline text-xs leading-none text-gray-600">
+ <label class="mt-5 inline text-xs leading-none text-gray-600 md:mt-0">
<input
bind:checked={$showNulls}
class="checked rounded bg-gray-100 accent-gray-500"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 72807f3436b87b39576fb2bbc4859b290def8553..287461f06668dc871350f06c828f59bac232abed 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -845,14 +845,14 @@
<!-- DESKTOP - Modifications en cours -->
<div class="hidden md:block">
<button
- class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-jaune-dark hover:text-white focus:outline-none sm:text-xs md:mx-0 2xl:text-sm"
+ class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-jaune-dark hover:text-white focus:outline-none active:bg-le-jaune-very-dark sm:text-xs md:mx-0 2xl:text-sm"
class:!bg-gray-200={Object.keys($parametricReform).length === 0}
class:!text-gray-500={Object.keys($parametricReform).length ===
0}
class:!shadow-none={Object.keys($parametricReform).length === 0}
class:!cursor-default={Object.keys($parametricReform).length ===
0}
- class:bg-le-jaune-dark={modificationsOpen}
+ class:!bg-le-jaune-very-dark={modificationsOpen}
class:text-white={modificationsOpen}
on:click={Object.keys($parametricReform).length > 0
? () => {
@@ -969,7 +969,7 @@
<div class="grid grid-cols-1 gap-4 text-center sm:grid-cols-2">
{#each dispositifsTypes as dispositifType}
<a
- class="flex gap-2 rounded-lg border bg-white p-3 shadow-md hover:bg-gray-200"
+ class="flex gap-2 rounded-lg border bg-white p-3 shadow-md hover:bg-gray-100 active:bg-gray-200"
href={newSimulationUrl({
...displayMode,
parametersVariableName:
@@ -1099,7 +1099,7 @@
>
<!--en-tête-->
<div
- class="sticky top-0 z-25 mb-4 flex justify-center border-b bg-yellow-50 pt-2 md:justify-normal md:px-14 lg:px-[72px]"
+ class="sticky top-0 z-25 mb-4 flex justify-center border-b bg-yellow-50 px-2 pt-2 md:justify-normal lg:px-5"
>
<!--
<select
@@ -1227,7 +1227,7 @@
</div>
<!--Impacts-->
<div
- class="px-0 md:mb-4 md:px-2 lg:px-4"
+ class="md:mb-4"
style:padding-bottom="{$testCasesIndex.length === 1 &&
displayMode.parametersVariableName === undefined
? testCasesBtnHeight + 40
@@ -1433,10 +1433,17 @@
displayMode.parametersVariableName
]}
- <h2 class="px-5 pt-5 text-xl 2xl:text-2xl md:px-14 md:py-0">
- Situations types pour analyser le dispositif "{variableSummary.short_label ??
- variableSummary.label ??
- displayMode.parametersVariableName}" :
+ <h2
+ class="px-5 pt-5 text-xl md:px-2 md:py-0 lg:px-5 2xl:text-2xl"
+ >
+ <span class="italic"
+ ><span class="not-italic">Situations types </span
+ >"{variableSummary.short_label ??
+ variableSummary.label ??
+ displayMode.parametersVariableName}"<span
+ class="not-italic"> :</span
+ ></span
+ >
</h2>
<TestCaseRelatedCarousel
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 483b409a65c076704bdd6329d31c92d8c0bb66b8..71a02805ef14bc2c75a4bce0ed0caa832454c00c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -58,6 +58,7 @@ const config = {
"in-quint": "cubic-bezier(.755, .05, .855, .06)",
"in-expo": "cubic-bezier(.95, .05, .795, .035)",
"in-circ": "cubic-bezier(.6, .04, .98, .335)",
+ "in-back": "cubic-bezier(.36, 0, .66, -.56)",
"out-quad": "cubic-bezier(.25, .46, .45, .94)",
"out-cubic": "cubic-bezier(.215, .61, .355, 1)",
@@ -65,6 +66,7 @@ const config = {
"out-quint": "cubic-bezier(.23, 1, .32, 1)",
"out-expo": "cubic-bezier(.19, 1, .22, 1)",
"out-circ": "cubic-bezier(.075, .82, .165, 1)",
+ "out-back": "cubic-bezier(.34, 1.56, .64, 1)",
"in-out-quad": "cubic-bezier(.455, .03, .515, .955)",
"in-out-cubic": "cubic-bezier(.645, .045, .355, 1)",
@@ -72,6 +74,7 @@ const config = {
"in-out-quint": "cubic-bezier(.86, 0, .07, 1)",
"in-out-expo": "cubic-bezier(1, 0, 0, 1)",
"in-out-circ": "cubic-bezier(.785, .135, .15, .86)",
+ "in-out-back": "cubic-bezier(.68, -.6, .32, 1.6)",
},
},
fontFamily: {