Merge pull request #865 from tutors-sdk/fix/lab-responsive

enhance lab nav respnsiveness
tutors-sdk · Nov 27, 2024 · 52f151e · 52f151e
2 parents 8577fdd + 067f02e
commit 52f151e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/lib/services/models/live-lab.ts b/src/lib/services/models/live-lab.ts
@@ -9,8 +9,8 @@ function getKeyIndex(map: Map<string, string>, targetKey: string) {
 }
 
 function truncate(input: string) {
-  if (input?.length > 16) {
-    return input.substring(0, 15) + "...";
+  if (input?.length > 24) {
+    return input.substring(0, 20) + "...";
   }
   return input;
 }
@@ -77,7 +77,7 @@ export class LiveLab {
       const prevTitle = prevChapter ? truncate(this.chaptersTitles.get(prevChapter.shortTitle)) : "";
       if (prevTitle) number = this.autoNumber ? prevChapter.shortTitle + ": " : "";
       this.horizontalNavbarHtml = prevChapter
-        ? `<a class="btn btn-sm capitalize" href="${this.url}/${encodeURI(prevChapter.shortTitle)}"> <span aria-hidden="true">&larr;</span>&nbsp; ${number}${prevTitle} </a>`
+        ? `<a class="btn btn-sm text-base capitalize" href="${this.url}/${encodeURI(prevChapter.shortTitle)}"> <span aria-hidden="true">&larr;</span>&nbsp; ${number}${prevTitle} </a>`
         : "";
 
       number = "";
@@ -87,7 +87,7 @@ export class LiveLab {
       // @ts-ignore
       const nextTitle = nextChapter ? truncate(this.chaptersTitles.get(nextChapter.shortTitle)) : "";
       this.horizontalNavbarHtml += nextChapter
-        ? `<a class="ml-auto btn btn-sm capitalize" style="margin-left: auto" href="${this.url}/${encodeURI(
+        ? `<a class="ml-auto btn btn-sm capitalize text-base" style="margin-left: auto" href="${this.url}/${encodeURI(
             nextChapter.shortTitle
           )}"> ${number}${nextTitle} &nbsp;<span aria-hidden="true">&rarr;</span></a>`
         : "";

diff --git a/src/lib/ui/TutorsShell.svelte b/src/lib/ui/TutorsShell.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="grid h-screen grid-rows-[auto_1fr_auto]">
-  <header class="sticky top-0 bg-surface-100 backdrop-blur-sm dark:bg-surface-950">
+  <header class="bg-surface-100 dark:bg-surface-950 ackdrop-blur-sm sticky top-0">
     <MainNavigator />
     {#if currentCourse?.value}
       <SecondaryNavigator />
@@ -19,7 +19,7 @@
   <main class="mt-2 overflow-y-auto">
     {@render children()}
   </main>
-  <footer>
+  <footer class="hidden lg:block">
     <Footer />
   </footer>
 </div>
diff --git a/src/lib/ui/learning-objects/content/Lab.svelte b/src/lib/ui/learning-objects/content/Lab.svelte
@@ -48,16 +48,16 @@
   />
 </svelte:head>
 
-<div class="bg-primary-50-900-token fixed bottom-0 z-30 -ml-10 block w-full lg:hidden">
-  <nav class="flex flex-wrap justify-between p-2">
-    {@html lab.horizontalNavbarHtml}
-  </nav>
-</div>
-
 <div class="w-full">
+  <div class="bg-primary-50 dark:bg-primary-900 sticky top-0 block w-full rounded border lg:hidden">
+    <nav class="flex flex-wrap justify-between p-2">
+      {@html lab.horizontalNavbarHtml}
+    </nav>
+  </div>
+
   <div class="max-w-l flex">
     <div class="mr-2 hidden h-auto w-72 lg:block">
-      <div class="card sticky top-6 m-2 h-auto rounded-xl bg-surface-100 py-4 dark:bg-surface-950">
+      <div class="card bg-surface-100 dark:bg-surface-950 sticky top-6 m-2 h-auto rounded-xl py-4">
         <nav class="nav-list">
           <ul>
             {@html lab.navbarHtml}

diff --git a/src/lib/ui/navigators/footers/Footer.svelte b/src/lib/ui/navigators/footers/Footer.svelte
@@ -14,7 +14,7 @@
   <div class="bg-surface-100-800-token border-surface-200-700-token bottom-0 mt-2 h-12 w-screen border-t-[1px]">
     <div class="mx-auto w-11/12 py-1">
       <div class="flex grid-flow-col items-center">
-        <div class="inline-flex flex-1">
+        <div class="flex inline-flex min-h-full flex-1 items-center">
           <TutorsIcon />
           <div>
             <TutorsVersion />