From b271286b05373b94f73c4fba20a8805d7bc80af5 Mon Sep 17 00:00:00 2001
From: emmanuel <ifeanyi@digdippa.com>
Date: Tue, 12 Sep 2023 11:31:20 +0000
Subject: [PATCH] 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 <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-70
Merged-by: Best Admin <best@digdippa.com>
---
 src/app.postcss                             |  4 ++-
 src/lib/components/Courses/index.svelte     |  5 +--
 src/lib/components/LMS/SideBar.svelte       |  6 ++--
 src/lib/components/Navigation/app.svelte    | 25 +++++++-------
 src/lib/components/Navigation/lms.svelte    |  8 ++---
 src/lib/components/Org/Quiz/QuizCard.svelte |  2 +-
 src/lib/components/Org/SideBar.svelte       |  6 ++--
 src/routes/+layout.svelte                   |  5 +--
 src/routes/org/[slug]/+page.svelte          | 38 ++++++++-------------
 9 files changed, 47 insertions(+), 52 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index 005cb883..c0a32d14 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -18,7 +18,9 @@ html {
   scrollbar-width: thin;
   scrollbar-color: var(--thumbBG) var(--scrollbarBG);
 }
-
+html .dark {
+  --scrollbarBG: #1f2937;
+}
 *::-webkit-scrollbar {
   width: 10px;
   height: 10px;
diff --git a/src/lib/components/Courses/index.svelte b/src/lib/components/Courses/index.svelte
index 2ff5b159..f08625ab 100644
--- a/src/lib/components/Courses/index.svelte
+++ b/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>
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index 5d88ab0a..74f94005 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/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">
diff --git a/src/lib/components/Navigation/app.svelte b/src/lib/components/Navigation/app.svelte
index 6c64d788..017f30d4 100644
--- a/src/lib/components/Navigation/app.svelte
+++ b/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>
diff --git a/src/lib/components/Navigation/lms.svelte b/src/lib/components/Navigation/lms.svelte
index d9526922..d5e2ce2d 100644
--- a/src/lib/components/Navigation/lms.svelte
+++ b/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>
diff --git a/src/lib/components/Org/Quiz/QuizCard.svelte b/src/lib/components/Org/Quiz/QuizCard.svelte
index fce0d129..72195785 100644
--- a/src/lib/components/Org/Quiz/QuizCard.svelte
+++ b/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}
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index 1b05b607..d7faf191 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/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">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 40577698..a198cc5a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -317,14 +317,14 @@
           {#if !isQuizPage($page.url.pathname)}
             <OrgSideBar />
           {/if}
-          <div class="org-slot bg-white dark:bg-gray-800">
+          <div class="org-slot bg-white dark:bg-gray-800 w-full">
             <slot />
           </div>
         </div>
       {:else if isLMSPage($page.url.pathname)}
         <div class="org-root w-full flex items-center justify-between">
           <LMSSideBar />
-          <div class="org-slot bg-white dark:bg-gray-800">
+          <div class="org-slot bg-white dark:bg-gray-800 w-full">
             <slot />
           </div>
         </div>
@@ -415,6 +415,7 @@
     column-gap: 12px;
     row-gap: 12px;
   }
+
   @media screen and (max-width: 768px) {
     :global(.cards-container) {
       width: 95%;
diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte
index e49df0ec..b4de8525 100644
--- a/src/routes/org/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/+page.svelte
@@ -216,11 +216,11 @@
     {/each}
   </div>
 
-  <div class="flex flex-wrap lg:flex-nowrap gap-2 mt-5 w-full">
+  <div class="flex flex-wrap mt-5 gap-4 w-full">
     <!-- Your Schedule -->
-    <div class="w-full md:w-auto">
+    <div class="w-full xl:w-auto container">
       <p class="dark:text-white font-bold mb-7">Your Schedule</p>
-      <div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box">
+      <div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box w-full">
         {#if !$isMobile}
           <div id="calendar" class="flex justify-center mt-5">
             <InlineCalendar bind:store {theme} />
@@ -295,16 +295,19 @@
     </div>
 
     <!-- Your Activities -->
-    <div>
-      <p class="dark:text-white font-bold mb-7 mt-5 lg:mt-0">Your Activities</p>
-      <div class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5">
+
+    <div class="w-full xl:w-auto container">
+      <p class="dark:text-white font-bold mb-7">Your Activities</p>
+      <div
+        class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
+      >
         {#each activities as activity}
           <div class="flex mb-3 pb-3 border-b border-gray-200">
             <Avatar src={activity.avatar} name="avatar" />
-            <div class="ml-2 flex flex-col lg:flex-row">
+            <div class="ml-2 flex flex-col xl:flex-row">
               <div class="mr-2">
                 <p class="dark:text-white">{activity.name}</p>
-                <p class="dark:text-white mb-2 mt-1 line-clamp-1 md:line-clamp-2">
+                <p class="dark:text-white mb-2 mt-1 line-clamp-1">
                   {activity.description}
                 </p>
                 <a href={activity.link}>View</a>
@@ -382,21 +385,10 @@
       font-size: 30px;
     }
   }
-  /* @media screen and (min-width: 756px) {
-    .schedule-box,
-    .activities-box {
-      height: fit-content;
-      overflow-y: auto;
-      overflow: hidden;
-    }
 
-  }
-  @media screen and (min-width: 756px) {
-    .schedule-box,
-    .activities-box {
-      height: fit-content;
-      overflow-y: auto;
+  @media only screen and (min-width: 1280px) and (max-width: 1360px) {
+    .container {
+      width: 48%;
     }
-    
-  } */
+  }
 </style>