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/routes/+layout.svelte

@@ -346,11 +346,11 @@
   }
 
   .org-root {
-    height: calc(100vh - 44px);
+    height: calc(100vh - 38px);
   }
   .org-slot {
     min-width: calc(100vw - 250px);
-    height: calc(100vh - 44px);
+    height: calc(100vh - 38px);
     overflow-y: auto;
   }
 
@@ -411,4 +411,22 @@
     column-gap: 12px;
     row-gap: 12px;
   }
+  @media screen and (max-width: 768px) {
+    :global(.cards-container) {
+      width: 95%;
+      margin: 0 auto;
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      column-gap: 12px;
+      row-gap: 12px;
+    }
+  }
+  @media screen and (max-width: 457px) {
+    .org-slot {
+      min-width: 100%;
+      max-height: calc(100vh - 38px);
+      overflow-y: auto;
+    }
+  }
 </style>

src/routes/lms/+page.svelte

@@ -52,7 +52,7 @@
         class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
       >
         <div
-          class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
+          class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
         >
           <div>
             <img src="/images/target.svg" alt="student Learning score" />

src/routes/org/[slug]/+page.svelte

@@ -14,6 +14,7 @@
   import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
   import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
+  import { Add } from 'carbon-icons-svelte';
 
   export let data;
   const { orgName } = data;
@@ -194,24 +195,32 @@
 
 <div class="py-10 px-5 w-full max-w-7xl mx-auto">
   <div class="flex items-center justify-between mb-10">
-    <h1 class="dark:text-white text-3xl font-bold">Dashboard</h1>
-    <PrimaryButton label="Create Course" onClick={createCourse} />
+    <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
+    {#if $isMobile}
+      <PrimaryButton onClick={createCourse}>
+        <Add size={24} />
+      </PrimaryButton>
+    {:else}
+      <PrimaryButton label="Create Course" onClick={createCourse} />
+    {/if}
   </div>
 
   <div class="flex items-start flex-wrap">
     {#each boxes as box}
-      <div class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5">
+      <div
+        class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 justify-center px-5 md:mr-5 mb-5"
+      >
         <p class="dark:text-white mb-2 text-sm">{box.label}</p>
         <p class="dark:text-white text-xl font-bold">{box.value}</p>
       </div>
     {/each}
   </div>
 
-  <div class="flex flex-wrap mt-5">
+  <div class="flex flex-wrap lg:flex-nowrap gap-2 mt-5 w-full">
     <!-- Your Schedule -->
-    <div>
+    <div class="w-full md:w-auto">
       <p class="dark:text-white font-bold mb-7">Your Schedule</p>
-      <div class="rounded border w-2/5 border-gray-200 mr-5 schedule-box">
+      <div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box">
         {#if !$isMobile}
           <div id="calendar" class="flex justify-center mt-5">
             <InlineCalendar bind:store {theme} />
@@ -287,15 +296,15 @@
 
     <!-- Your Activities -->
     <div>
-      <p class="dark:text-white font-bold mb-7">Your Activities</p>
-      <div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
+      <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">
         {#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">
+            <div class="ml-2 flex flex-col lg:flex-row">
               <div class="mr-2">
                 <p class="dark:text-white">{activity.name}</p>
-                <p class="dark:text-white mb-2 mt-1">
+                <p class="dark:text-white mb-2 mt-1 line-clamp-1 md:line-clamp-2">
                   {activity.description}
                 </p>
                 <a href={activity.link}>View</a>
@@ -323,9 +332,9 @@
   }
   .schedule-box,
   .activities-box {
-    min-width: 450px;
     height: 516px;
     overflow-y: auto;
+    overflow: hidden;
   }
 
   .calendar-root {
@@ -373,4 +382,21 @@
       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;
+    }
+    
+  } */
 </style>

src/routes/org/[slug]/audience/+page.svelte

@@ -17,13 +17,8 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Audience</h1>
-      <PrimaryButton
-        label="Export"
-        onClick={exportAudience}
-        isDisabled={isLoading}
-        {isLoading}
-      />
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Audience</h1>
+      <PrimaryButton label="Export" onClick={exportAudience} isDisabled={isLoading} {isLoading} />
     </div>
 
     <Audience />

src/routes/org/[slug]/community/+page.svelte

@@ -3,6 +3,9 @@
   import Community from '$lib/components/Org/Community/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { currentOrgPath } from '$lib/utils/store/org';
+  import { isMobile } from '$lib/utils/store/useMobile';
+  import AddFilled from 'carbon-icons-svelte/lib/AddFilled.svelte';
+  import Add from 'carbon-icons-svelte/lib/Add.svelte';
 
   function askCommunity() {
     goto(`${$currentOrgPath}/community/ask`);
@@ -13,13 +16,18 @@
   <title>Community - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-4xl mx-auto">
-  <div class="py-10 px-5">
-    <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Community</h1>
-      <PrimaryButton label="Ask Community" onClick={askCommunity} />
+<section class="w-full md:max-w-4xl md:mx-auto">
+  <div class="w-full py-10 px-5">
+    <div class="flex items-center justify-between mb-10 w-full">
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Community</h1>
+      {#if $isMobile}
+        <PrimaryButton onClick={askCommunity}>
+          <Add size={24} />
+        </PrimaryButton>
+      {:else}
+        <PrimaryButton label="Ask Community" onClick={askCommunity} />
+      {/if}
     </div>
-
     <Community />
   </div>
 </section>

src/routes/org/[slug]/community/ask/+page.svelte

@@ -55,7 +55,7 @@
   <title>Ask the Community - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-3xl mx-auto">
+<section class="w-full md:max-w-3xl md:mx-auto">
   <div class="p-5">
     <a
       class="text-gray-500 dark:text-white text-md flex items-center"
@@ -63,15 +63,15 @@
     >
       <ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
     </a>
-    <div class="flex items-center justify-between">
-      <h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>
+    <div class="flex items-center gap-12 justify-between">
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Ask the community</h1>
       <PrimaryButton label="Publish" onClick={handleSave} />
     </div>
   </div>
 
   <div class="mb-3 p-2">
     <input
-      class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
+      class="title rounded-lg border border-1 border-gray p-2 w-full dark:text-black focus:outline-none"
       error="false"
       autocomplete="off"
       placeholder="Title"
@@ -88,10 +88,11 @@
       </p>
     {/if}
   </div>
-
-  <TextEditor
-    bind:value={fields.body}
-    placeholder="Ask the community any question you might have"
-    onChange={(html) => (fields.body = html)}
-  />
+  <div class="px-2">
+    <TextEditor
+      bind:value={fields.body}
+      placeholder="Ask the community any question you might have"
+      onChange={(html) => (fields.body = html)}
+    />
+  </div>
 </section>

src/routes/org/[slug]/courses/+page.svelte

@@ -9,6 +9,8 @@
   import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
   import { setProfileIdOfGroupMember } from '$lib/utils/services/courses';
   import { currentOrg } from '$lib/utils/store/org';
+  import { Add } from 'carbon-icons-svelte';
+  import { isMobile } from '$lib/utils/store/useMobile';
 
   export let data;
   let { allCourses, cantFetch } = data;
@@ -47,11 +49,17 @@
   <title>Courses - ClassroomIO</title>
 </svelte:head>
 
-<section class="w-full max-w-6xl mx-auto">
-  <div class="py-10 px-5">
+<section class="w-full md:max-w-6xl md:mx-auto">
+  <div class="py-10 px-2 md:px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Courses</h1>
-      <PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
+      {#if $isMobile}
+        <PrimaryButton onClick={() => ($createCourseModal.open = true)}>
+          <Add size={24} />
+        </PrimaryButton>
+      {:else}
+        <PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
+      {/if}
     </div>
 
     <NewCourseModal />

src/routes/org/[slug]/quiz/+page.svelte

@@ -4,6 +4,8 @@
   import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { createQuizModal } from '$lib/utils/store/org';
+  import { isMobile } from '$lib/utils/store/useMobile';
+  import { Add } from 'carbon-icons-svelte';
 </script>
 
 <svelte:head>
@@ -13,11 +15,14 @@
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
     <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Interactive Quizzes</h1>
-      <PrimaryButton
-        label="Create Quiz"
-        onClick={() => ($createQuizModal.open = true)}
-      />
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Interactive Quizzes</h1>
+      {#if $isMobile}
+        <PrimaryButton onClick={() => ($createQuizModal.open = true)}>
+          <Add size={24} />
+        </PrimaryButton>
+      {:else}
+        <PrimaryButton label="Create Quiz" onClick={() => ($createQuizModal.open = true)} />
+      {/if}
     </div>
 
     <NewQuizModal />

src/routes/org/[slug]/settings/domains/+page.svelte

@@ -8,7 +8,7 @@
 </svelte:head>
 
 <section class="w-full max-w-6xl mx-auto">
-  <div class="py-10 px-5">
+  <div class="py-10 px-3 md:px-5">
     <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
       >Back to Settings</a
     >

src/routes/org/[slug]/settings/teams/+page.svelte

@@ -8,7 +8,7 @@
 </svelte:head>
 
 <section class="w-full max-w-6xl mx-auto">
-  <div class="py-10 px-5">
+  <div class="py-10 px-3 md:px-5">
     <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
       >Back to Settings</a
     >