amélioration: Ajout de transition pour l'édition du cas type

Carte reliée #123 (closed)

Demos :

Demo animation desktop

Demo animation mobile

Exemple de la proposition (2.b)

Panneau réduit :

Délai :

Commentaires techniques pour la postérité :

L'ajout de quelques attributs HTML peuvent avoir l'air inutiles mais chaque petit attribut compte : ils gèrent la version mobile ainsi que la version desktop, donc il faut garder cela en tête lorsqu'on change le code ou qu'on essaye de comprendre comment il fonctionne.

• Des z-index ont été rajoutés à des parents qui ont des éléments fils de position absolute pour résoudre les problèmes liés aux "stacking contexts" de CSS (activés par des attributs spécifiques qu'on utilise pour l'animation).
• D'autres ! dans les classes tailwind activent la propriété !imporant des propriétés requises.
• Lors d'implémentation d'animations, toujours se référer au fichier .tailwind.config.cjs contenant à présent les fonctions cubic-bezier qui permettent le "easing" des animations.
• Plusieurs {#if} svelte ont été remplacés par des modifications CSS qui ne touchent pas au DOM HTML pour permettre d'animer le tout. On pourrait passer par les propriétés in et out de svelte pour animer les éléments HTML avec du JS, mais lorsqu'on en a pas besoin, je préfère utiliser les animations CSS (facile, rapide, moins d'erreurs, etc).

Infos complémentaires :

• Testé avec Safari
• Testé sur le simulateur mobile de chrome

src/routes/+page.svelte

@@ -666,9 +666,16 @@
   }
 
   let validateBtnHeight = 0;
+
+  function onKeyDown(e) {
+    switch (e.keyCode) {
+      case 13: // 'Enter' key
+        if (displayMode.edit !== undefined) changeTestCaseToEditIndex(undefined)
+    }
+  }
 </script>
 
-<svelte:window bind:innerWidth={windowInnerWidth} />
+<svelte:window bind:innerWidth={windowInnerWidth} on:keydown={onKeyDown} />
 <svelte:head>
   <title>Calculs | {data.title}</title>
 </svelte:head>