Merge pull request #874 from tutors-sdk/ux/animations

animation adjustments
tutors-sdk · Dec 2, 2024 · c000fb3 · c000fb3
2 parents a228bb0 + 373425d
commit c000fb3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/src/lib/ui/learning-objects/structure/Context.svelte b/src/lib/ui/learning-objects/structure/Context.svelte
@@ -30,11 +30,9 @@
     {@render children()}
   </div>
   {#if loContext && isLoaded}
-    <div in:fly={slideFromRight.in} out:fly={slideFromRight.out}>
-      <div class="mr-2 hidden h-auto w-72 xl:block">
-        <div class="sticky top-6 h-auto">
-          <LoContextPanel {loContext} />
-        </div>
+    <div in:fly={slideFromRight.in} out:fly={slideFromRight.out} class="mr-2 hidden h-auto w-72 xl:block">
+      <div class="sticky top-6 h-auto">
+        <LoContextPanel {loContext} />
       </div>
     </div>
   {/if}

diff --git a/src/routes/(home)/CourseVisitCard.svelte b/src/routes/(home)/CourseVisitCard.svelte
@@ -1,14 +1,14 @@
 <script>
+  import { scaleTransition } from "$lib/ui/animations";
   import Iconify from "@iconify/svelte";
-  import { cubicIn, cubicOut } from "svelte/easing";
-  import { fade, scale } from "svelte/transition";
+  import { scale } from "svelte/transition";
 
   let { courseVisit, deleteCourse, starUnstarCourse } = $props();
 </script>
 
 <div
-  transition:scale|local={{ duration: 300, start: 0.8, easing: cubicOut }}
-  class="to-accent-50 dark:to-accent-900 card card-hover from-primary-50 dark:from-primary-900 m-2 border bg-gradient-to-l p-2"
+  transition:scale|local={scaleTransition}
+  class="to-accent-50 dark:to-accent-900 card card-hover m-2 border bg-gradient-to-l from-primary-50 p-2 dark:from-primary-900"
 >
   <div class="flex justify-between">
     <section class="p-4">
@@ -31,15 +31,15 @@
   <footer class="card-footer p-0">
     <div class="flex w-full">
       <a
-        class="variant-filled-primary btn hover:preset-tonal m-0 w-2/3 rounded-t-none rounded-br-none"
+        class="variant-filled-primary btn m-0 w-2/3 rounded-t-none rounded-br-none hover:preset-tonal"
         href={"/course/" + courseVisit.id}>Visit Course</a
       >
       <button
-        class="variant-filled-error btn hover:preset-tonal m-0 w-1/3 rounded-t-none rounded-bl-none"
+        class="variant-filled-error btn m-0 w-1/3 rounded-t-none rounded-bl-none hover:preset-tonal"
         onclick={() => deleteCourse(courseVisit.id)}>Delete</button
       >
       <button
-        class="variant-filled-error btn hover:preset-tonal m-0 w-1/3 rounded-t-none rounded-bl-none"
+        class="variant-filled-error btn m-0 w-1/3 rounded-t-none rounded-bl-none hover:preset-tonal"
         onclick={() => starUnstarCourse(courseVisit.id)}
       >
         <Iconify icon={courseVisit.favourite ? "openmoji:star" : "openmoji:black-star"} width="36" height="36" />