CLASSROOMIO-T-145: Made the updates to the UI of the dashboard

CLASSROOMIO-T-145: Changed the classname

Merge branch 'main' into CLASSROOMIO-T-145

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145:updates

CLASSROOMIO-T-145:Fixed the hamburger display for the lms

CLASSROOMIO-T-145:Fixed the extra scroll on the LMS

CLASSROOMIO-T-145:Made the Updates to the UI

CLASSROOMIO-T-145:Made the Updates to the UI


Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-70
Merged-by: Best Admin <[email protected]>

src/lib/components/Courses/index.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">
+<script>
   import Box from '../Box/index.svelte';
   import Card from './components/Card/index.svelte';
   import CardLoader from './components/Card/Loader.svelte';
   import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
   import CopyCourseModal from './components/CopyCourseModal/index.svelte';
   import { courses, courseMetaDeta } from './store';
+  import { isMobile } from '$lib/utils/store/useMobile';
 </script>
 
 <CopyCourseModal />
@@ -41,7 +42,7 @@
     {/each}
   {/if}
 </div>
-{#if !$courses.length}
+{#if !$courseMetaDeta.isLoading && !$courses.length}
   <Box className="w-full">
     <CoursesEmptyIcon />
     <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>

src/lib/components/LMS/SideBar.svelte

@@ -53,9 +53,9 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-40'
-      : 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-40'
-  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full`}
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
+      : 'translate-x-0 absolute md:relative z-[9999]'
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-[calc(100vh-48px)]`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">

src/lib/components/Navigation/app.svelte

@@ -44,21 +44,20 @@
 </script>
 
 <nav
-  class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
+  class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out h-[48px]"
 >
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
-      {#if !isCoursePage}
-        <li>
-          <IconButton onClick={toggleSidebar}>
-            {#if $menu.hidden}
-              <Menu size={16} class="md:hidden text-white" />
-            {:else}
-              <Close size={16} class="md:hidden text-white" />
-            {/if}
-          </IconButton>
-        </li>
-      {/if}
+      <li class="md:hidden">
+        <IconButton onClick={toggleSidebar}>
+          {#if $menu.hidden}
+            <Menu size={16} class=" text-white" />
+          {:else}
+            <Close size={16} class=" text-white" />
+          {/if}
+        </IconButton>
+      </li>
+
       {#if isCoursePage}
         <IconButton
           onClick={() => {
@@ -74,7 +73,7 @@
         target={isCoursePage && $course.slug ? '_blank' : ''}
         title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
         id="logo"
-        class="text-lg {isCoursePage && 'ml-2'}"
+        class="text-lg {isCoursePage && '-ml-2 md:ml-2'} line-clamp-1"
       >
         {isCoursePage ? title : 'ClassroomIO'}
       </a>

src/lib/components/Navigation/lms.svelte

@@ -27,14 +27,14 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700 h-[48px]">
   <ul class="flex w-full items-center">
-    <li>
+    <li class="md:hidden">
       <IconButton onClick={toggleSidebar}>
         {#if $menu.hidden}
-          <Menu size={16} class="md:hidden text-white" />
+          <Menu size={16} class=" text-white" />
         {:else}
-          <Close size={16} class="md:hidden text-white" />
+          <Close size={16} class=" text-white" />
         {/if}
       </IconButton>
     </li>

src/lib/components/Org/Quiz/QuizCard.svelte

@@ -56,7 +56,7 @@
 
 {#if quiz}
   <div
-    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mr-4 mb-5 relative flex flex-col lg:flex-row p-3"
+    class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mb-5 relative flex flex-col lg:flex-row p-3"
   >
     <ImageLoader
       src={themeImages[quiz.theme]?.card || themeImages.standard.card}

src/lib/components/Org/SideBar.svelte

@@ -61,9 +61,9 @@
 <aside
   class={`${
     $menu.hidden
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
-      : 'translate-x-0 absolute md:relative z-40'
-  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] md:h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
+      : 'translate-x-0 absolute md:relative z-[9999]'
+  } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
 >
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">