CLASSROOMIO-T-145:Made the LMS dashboard responsive

CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: Fixed the Z-index issue

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard

CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145:Made the LMS dashboard responsive


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-66
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Courses/components/Card/index.svelte

@@ -47,7 +47,7 @@
 
 <a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
   <div
-    class="root w-80 border bg-gray-100 dark:bg-gray-800 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
+    class="root w-full md:w-80 border bg-gray-100 dark:bg-gray-800 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
   >
     {#if !isOnLandingPage}
       <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>

src/lib/components/Courses/components/NewCourseModal/index.svelte

@@ -87,7 +87,7 @@
 <Modal
   onClose={() => ($createCourseModal.open = false)}
   bind:open={$createCourseModal.open}
-  width="w-2/5"
+  width="w-4/5 md:w-2/5"
   modalHeading="Create a Course"
 >
   <form on:submit|preventDefault={createCourse}>

src/lib/components/Courses/index.svelte

@@ -5,11 +5,14 @@
   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 />
 
-<div class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 m-auto`}>
+<div
+  class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 mx-auto`}
+>
   {#if $courseMetaDeta.isLoading}
     <CardLoader />
     <CardLoader />
@@ -28,14 +31,23 @@
         currency={courseData.currency}
         totalLessons={courseData.total_lessons}
       />
-    {:else}
-      <Box>
-        <CoursesEmptyIcon />
-        <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
-        <p class="dark:text-white w-1/3 text-center">
-          Share your knowledge with the world by creating engaging courses for your students.
-        </p>
-      </Box>
+      <!-- {:else}  
+        <Box className="w-full">
+          <CoursesEmptyIcon />
+          <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
+          <p class="dark:text-white w-1/3 text-center">
+            Share your knowledge with the world by creating engaging courses for your students.
+          </p>
+        </Box> -->
     {/each}
   {/if}
 </div>
+{#if !$courses.length}
+  <Box className="w-full">
+    <CoursesEmptyIcon />
+    <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
+    <p class="dark:text-white w-1/3 text-center">
+      Share your knowledge with the world by creating engaging courses for your students.
+    </p>
+  </Box>
+{/if}