Merge branch 'ui-transition' into 'master'

Animations pour rendre l'UI plus compréhensible

See merge request leximpact/leximpact-socio-fiscal-ui!73

src/routes/index.svelte

@@ -19,6 +19,7 @@
   import { writable } from "svelte/store"
 
   import { browser } from "$app/env"
+  import { sineIn, sineOut } from "svelte/easing"
   import { goto } from "$app/navigation"
   import { page, session } from "$app/stores"
   import { auditQuerySingleton } from "$lib/auditors/queries"
@@ -29,6 +30,7 @@
   import TestCaseEdit from "$lib/components/test_cases/TestCaseEdit.svelte"
   import TestCaseView from "$lib/components/test_cases/TestCaseView.svelte"
   import StartTutorial from "$lib/components/tutorial/StartTutorial.svelte"
+  import { fly } from "svelte/transition"
   import NonVariableReferredParameter from "$lib/components/variables/NonVariableReferredParameter.svelte"
   import VariableReferredInputsPane from "$lib/components/variables/VariableReferredInputsPane.svelte"
   import VariableReferredParameters from "$lib/components/variables/VariableReferredParameters.svelte"
@@ -586,6 +588,15 @@
       >
         Impacts
       </div>
+
+      {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+        <span class="flex h-3 w-3">
+          <span
+            class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-le-jaune-dark bg-opacity-90"
+          />
+          <span class="relative inline-flex rounded-full h-3 w-3 bg-le-jaune" />
+        </span>
+      {/if}
     </a>
   </div>
 {/if}
@@ -598,6 +609,8 @@
         class="md:block bg-white flex-none shadow-xl w-full md:w-1/2"
         class:hidden={!displayMode.mobileLaw}
         id="situation_left_part_law"
+        in:fly={{ y: 0, x: 10, duration: 300, opacity: 70 }}
+        out:fly={{ y: 0, x: 10, duration: 100, opacity: 70 }}
       >
         <div class="flex min-h-full">
           <!--Partie I Paramètres de la loi-->
@@ -1160,7 +1173,11 @@
     <!-- Panneau de droite pour l'édition de cas types -->
 
     {#if displayMode.mode === "single_test_case" && displayMode.edit}
-      <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40">
+      <div
+        class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40"
+        in:fly={{ y: 0, x: 10, duration: 300, opacity: 70 }}
+        out:fly={{ y: 0, x: 10, duration: 100, opacity: 70 }}
+      >
         <div
           class="sticky top-0 h-8 flex pt-3 justify-end mr-4 bg-gray-300 pb-3"
         >