animate footer + correct z-axis on tooltips

tutors-sdk · Nov 27, 2024 · 4790e1a · 4790e1a
1 parent 40c31bf
commit 4790e1a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/src/lib/ui/navigators/footers/Footer.svelte b/src/lib/ui/navigators/footers/Footer.svelte
@@ -4,6 +4,7 @@
   import TutorsIcon from "$lib/ui/utils/TutorsIcon.svelte";
   import TutorsMessage from "./TutorsMessage.svelte";
   import TutorsVersion from "./TutorsVersion.svelte";
+  import { slide } from "svelte/transition";
 </script>
 
 {#if currentCourse?.value?.footer}

diff --git a/src/lib/ui/navigators/footers/TutorsMessage.svelte b/src/lib/ui/navigators/footers/TutorsMessage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { convertMdToHtml } from "$lib/services/models/markdown-utils";
   import { onMount } from "svelte";
+  import { slide } from "svelte/transition";
 
   let contentHtml = "";
 
@@ -11,12 +12,13 @@
       contentHtml = convertMdToHtml(data.footerMessage);
     } catch (error) {
       console.error("Failed to fetch message:", error);
-      // Fallback message if fetch fails
       contentHtml = convertMdToHtml("An [Open Learning Web Toolkit](/course/tutors-reference-manual)");
     }
   });
 </script>
 
-<p class="prose prose-sm prose-slate dark:prose-invert">
-  {@html contentHtml}
-</p>
+{#if contentHtml}
+  <p class="prose prose-sm prose-slate dark:prose-invert" transition:slide={{ duration: 2500 }}>
+    {@html contentHtml}
+  </p>
+{/if}
diff --git a/src/lib/ui/navigators/tutors-connect/ConnectedProfile.svelte b/src/lib/ui/navigators/tutors-connect/ConnectedProfile.svelte
@@ -64,14 +64,8 @@
         targetStr="_blank"
       />
 
-      <li class="option !p-0 hover:preset-tonal">
+      <li class="option hover:preset-tonal !p-0">
         <OnlineButton />
-        <!-- <button class="btn flex w-full justify-between">
-          <div class="ml-2">
-            View <span class="badge bg-error-500 text-white">{presenceService.studentsOnline.value.length}</span> Online
-          </div>
-          <Icon type="live" />
-        </button> -->
       </li>
 
       <hr />

diff --git a/src/lib/ui/themes/icons/Icon.svelte b/src/lib/ui/themes/icons/Icon.svelte
@@ -69,7 +69,7 @@
   <Tooltip
     positioning={{ placement: "top" }}
     triggerBase="underline"
-    contentBase="card preset-filled p-4 text-sm"
+    contentBase="card preset-filled p-4 text-sm z-20 "
     openDelay={400}
   >
     {#snippet trigger()}