diff --git a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
index 0b9b3a936305d9c9ec0c439eafb53f9d8ccb699b..d4b88dcefafcff36cc4b4d3f0f26177f704ec7b1 100644
--- a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
+++ b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
@@ -79,8 +79,9 @@
<div class="flex items-center">
<button
- class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-500 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:flex lg:mx-5 2xl:h-12 2xl:w-12"
- class:scale-0={carouselScrollX <= toleranceOffset}
+ class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-400 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 disabled:text-gray-400 md:flex lg:mx-5 2xl:h-12 2xl:w-12"
+ class:opacity-0={carouselScrollX <= toleranceOffset}
+ class:scale-25={carouselScrollX <= toleranceOffset}
on:click={() => scrollCarousel(false)}
><iconify-icon
class="text-2xl 2xl:text-3xl"
@@ -182,8 +183,9 @@
<div />
</div>
<button
- class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-500 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 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}
+ class="z-10 mx-2 hidden h-10 w-10 shrink-0 items-center justify-center rounded-[50%] border-2 bg-gray-50 shadow-md transition-all duration-400 ease-out-back enabled:hover:border-le-vert-500 enabled:active:scale-90 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:opacity-0={carouselScrollX >= maxScrollX - toleranceOffset}
+ class:scale-25={carouselScrollX >= maxScrollX - toleranceOffset}
on:click={() => scrollCarousel(true)}
><iconify-icon
class="text-2xl 2xl:text-3xl"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 47911a032d48a9a8b78b708d8b00bc339474f08b..81017da25f663d42a84be1d6ee23262a08c76474 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -434,13 +434,20 @@
$budgetSimulation = $budgetSimulationCache.budgetSimulation
}
- $: isModificationsOpen =
- isUserModificationsOpen && Object.keys($parametricReform).length > 0
+ $: isModificationsOpen = isUserModificationsOpen && modificationsCount > 0
$: loadParameter($searchParameterName)
+ $: modificationsAmendmentCount = Object.keys($parametricReform).length
+
$: modificationsCount =
- Object.keys($parametricReform).length + ($billName !== undefined ? 4 : 0)
+ modificationsAmendmentCount + ($billName !== undefined ? 4 : 0)
+
+ $: showBudgetParametersError =
+ displayMode.budget &&
+ Object.keys($parametricReform).some(
+ (parameterName) => !budgetEditableParametersName.has(parameterName),
+ )
function auditSimulationQuery(
audit: Audit,
@@ -1018,7 +1025,7 @@
Impacts
</div>
- {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+ {#if modificationsAmendmentCount !== 0 && displayMode.mobileLaw}
<span class="flex h-3 w-3">
<span
class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90"
@@ -1063,7 +1070,7 @@
>
<div slot="activator" class="relative">
<div
- 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 active:text-white sm:text-xs md:mx-0 2xl:text-sm"
+ class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune-dark px-2 py-1 text-sm uppercase text-white shadow-md hover:bg-le-jaune-very-dark hover:bg-opacity-90 focus:outline-none active:bg-le-jaune-very-dark active:text-white sm:text-xs md:mx-0 2xl:text-sm"
class:!bg-gray-200={modificationsCount === 0}
class:!text-gray-500={modificationsCount === 0}
class:!shadow-none={modificationsCount === 0}
@@ -1077,12 +1084,34 @@
? "1 modification"
: `${modificationsCount} modifications`}
</div>
- {#if displayMode.budget && Object.keys($parametricReform).some((parameterName) => !budgetEditableParametersName.has(parameterName))}
+ <div class="absolute -top-2 -right-2 flex">
+ {#if $billName !== undefined}
+ <span
+ class="z-10 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-rouge-bill text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 ease-out-back translate-x-2"
+ class:translate-x-6={!showBudgetParametersError}
+ class:!translate-x-10={modificationsAmendmentCount ===
+ 0}
+ >
+ 4
+ </span>
+ {/if}
+ <span
+ class="z-20 w-5 h-5 flex justify-center items-center shadow rounded-full bg-le-jaune text-black text-xs font-bold tracking-wider border-[1.5px] border-white transition-all duration-200 translate-x-1"
+ class:opacity-0={modificationsAmendmentCount === 0}
+ class:scale-75={modificationsAmendmentCount === 0}
+ class:ease-out-back={modificationsAmendmentCount > 0}
+ class:translate-x-5={!showBudgetParametersError}
+ >
+ {modificationsAmendmentCount}
+ </span>
<iconify-icon
icon="ri-error-warning-fill"
- class="absolute -top-2 -right-2 rounded-full bg-white text-red-700 text-xl"
+ class="z-30 w-5 h-5 shadow rounded-full bg-white text-red-700 text-xl transition-all duration-200"
+ class:opacity-0={!showBudgetParametersError}
+ class:scale-75={!showBudgetParametersError}
+ class:ease-out-back={showBudgetParametersError}
/>
- {/if}
+ </div>
</div>
<div
@@ -1092,7 +1121,7 @@
aria-orientation="vertical"
aria-labelledby="user-menu"
>
- {#if displayMode.budget && Object.keys($parametricReform).some((parameterName) => !budgetEditableParametersName.has(parameterName))}
+ {#if showBudgetParametersError}
<div class="bg-gray-100 text-xs text-red-700 p-2">
<iconify-icon
icon="ri-error-warning-line"
@@ -1105,7 +1134,7 @@
class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 disabled:text-gray-400 enabled:hover:text-black"
on:click={reset}
title="Retirer les modifications de votre réforme"
- disabled={Object.keys($parametricReform).length === 0}
+ disabled={modificationsAmendmentCount === 0}
>
<iconify-icon
class="mr-1 align-[-0.2rem] text-lg"
@@ -1146,7 +1175,7 @@
{/if}
Modifications en cours
- {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+ {#if modificationsAmendmentCount !== 0 && displayMode.mobileLaw}
<iconify-icon
class="align-[0.1rem] text-sm text-le-jaune"
icon="ri-checkbox-blank-circle-fill"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e6e90904742150e5c07e373db570741a00d80358..04bf1d4399a2272476a0322818edf7aa61019aa9 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -64,6 +64,18 @@ const config = {
"50%": { opacity: "60%" },
},
},
+ scale: {
+ 25: "0.25",
+ },
+ transitionDuration: {
+ 250: "250ms",
+ 350: "350ms",
+ 400: "400ms",
+ 450: "450ms",
+ 550: "550ms",
+ 600: "600ms",
+ 650: "650ms",
+ },
transitionTimingFunction: {
"in-quad": "cubic-bezier(.55, .085, .68, .53)",
"in-cubic": "cubic-bezier(.550, .055, .675, .19)",