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 <[email protected]>


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

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}
+      <!-- {:else}  
-      <Box>
+        <Box className="w-full">
-        <CoursesEmptyIcon />
+          <CoursesEmptyIcon />
-        <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
+          <h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
-        <p class="dark:text-white w-1/3 text-center">
+          <p class="dark:text-white w-1/3 text-center">
-          Share your knowledge with the world by creating engaging courses for your students.
+            Share your knowledge with the world by creating engaging courses for your students.
-        </p>
+          </p>
-      </Box>
+        </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}

src/lib/components/LMS/SideBar.svelte

@@ -12,6 +12,7 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
+  import { menu } from '$lib/components/Org/store';
 
   function isActive(pagePath, itemPath) {
     const pageLinkItems = pagePath.split('/');
@@ -45,9 +46,18 @@
       link: '/lms/community'
     }
   ];
+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
 </script>
 
-<aside class="w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full">
+<aside
+  class={`${
+    $menu.hidden
+      ? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-[9999]'
+      : 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-[9999]'
+  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full`}
+>
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
       {#if $currentOrg.avatar_url}
@@ -66,7 +76,7 @@
 
       <ul class="my-5">
         {#each sideLinks as item (item.name)}
-          <a href={item.link} class="text-black">
+          <a href={item.link} class="text-black" on:click={toggleSidebar}>
             <li
               class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
                 $page.url.pathname,
@@ -87,13 +97,13 @@
     </div>
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
-      <a href="/lms" class="text-black">
+      <a href="/lms" class="text-black" on:click={toggleSidebar}>
         <li class="flex items-center py-3 px-4 mb-2 rounded">
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
-      <a href="/lms/settings" class="text-black">
+      <a href="/lms/settings" class="text-black" on:click={toggleSidebar}>
         <li
           class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
             $page.url.pathname,

src/lib/components/Navigation/app.svelte

@@ -48,15 +48,17 @@
 >
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
-      <li>
+      {#if !isCoursePage}
-        <IconButton onClick={toggleSidebar}>
+        <li>
-          {#if $menu.hidden}
+          <IconButton onClick={toggleSidebar}>
-            <Menu size={16} class="md:hidden text-white" />
+            {#if $menu.hidden}
-          {:else}
+              <Menu size={16} class="md:hidden text-white" />
-            <Close size={16} class="md:hidden text-white" />
+            {:else}
-          {/if}
+              <Close size={16} class="md:hidden text-white" />
-        </IconButton>
+            {/if}
-      </li>
+          </IconButton>
+        </li>
+      {/if}
       {#if isCoursePage}
         <IconButton
           onClick={() => {

src/lib/components/Navigation/lms.svelte

@@ -7,10 +7,16 @@
 
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { appStore } from '$lib/utils/store/app';
+  import { Close, Menu } from 'carbon-icons-svelte';
+  import { menu } from '$lib/components/Org/store';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
 
   export let navClass = '';
 
+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
+
   function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
@@ -23,6 +29,15 @@
 
 <nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700">
   <ul class="flex w-full items-center">
+    <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>
     <div class="">
       <a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
         ClassroomIO

src/lib/components/Org/Audience/index.svelte

@@ -18,15 +18,13 @@
   $: fetchInitData($currentOrg.id);
 </script>
 
-<div
+<div class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto">
-  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
->
   {#if $orgAudience.length || isLoading}
     <AudienceList {isLoading} />
   {:else}
     <Box>
       <AudienceEmptyIcon />
-      <h3 class="dark:text-white text-2xl my-5">No audience to manage!</h3>
+      <h3 class="dark:text-white text-2xl text-center my-5">No audience to manage!</h3>
       <p class="dark:text-white w-1/3 text-center">
         Manage all your students here and stay connected with them.
       </p>

src/lib/components/Org/Community/index.svelte

@@ -93,7 +93,7 @@
         </div>
       </div>
     {:else}
-      <Box>
+      <Box className="w-screen">
         <CoursesEmptyIcon />
         <h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
         <p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>

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

@@ -6,17 +6,12 @@
   import { snackbarStore } from '$lib/components/Snackbar/store';
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
   import { supabase } from '$lib/utils/functions/supabase';
-  import {
+  import { currentOrg, createQuizModal, currentOrgPath, quizesStore } from '$lib/utils/store/org';
-    currentOrg,
-    createQuizModal,
-    currentOrgPath,
-    quizesStore,
-  } from '$lib/utils/store/org';
   import { createQuizValidation } from '$lib/utils/functions/validator';
 
   let open = false;
   let errors = {
-    title: '',
+    title: ''
   };
   let isLoading = false;
 
@@ -76,16 +71,16 @@
                 {
                   id: 'circle',
                   label: '',
-                  isCorrect: false,
+                  isCorrect: false
                 },
                 {
                   id: 'triangle',
                   label: '',
-                  isCorrect: false,
+                  isCorrect: false
-                },
+                }
-              ],
+              ]
-            },
+            }
-          ],
+          ]
         })
         .select();
       isLoading = false;
@@ -111,7 +106,7 @@
 <Modal
   onClose={handleClose}
   bind:open
-  width="w-2/5"
+  width="w-4/5 md:w-2/5"
   modalHeading="{$createQuizModal.openEdit ? 'Update' : 'Create'} a Quiz"
 >
   <form on:submit|preventDefault={createQuiz}>

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

@@ -56,17 +56,17 @@
 
 {#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 p-3"
+    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"
   >
     <ImageLoader
       src={themeImages[quiz.theme]?.card || themeImages.standard.card}
       alt="quiz-card"
-      style="max-width: 300px;"
+      style="max-width:300px, min-width: 200px;"
     />
 
-    <div class="p-5 flex flex-col justify-between w-full">
+    <div class="p-2 md:p-5 flex flex-col justify-between w-full">
       <div class="flex justify-between">
-        <h4 class="dark:text-white title text-md font-bold">
+        <h4 class="dark:text-white title text-md font-bold capitalize">
           <a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
         </h4>
 
@@ -77,10 +77,10 @@
         </Dropdown>
       </div>
 
-      <div class="flex justify-between">
+      <div class="flex md:flex-row flex-col justify-between">
         <div>
           <p class="mb-2">{pluralize('question', totalQuestions, true)}</p>
-          <p>Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
+          <p class="mb-2 md:mb-0">Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
         </div>
 
         <PrimaryButton
@@ -96,6 +96,6 @@
 
 <style>
   .root {
-    height: 180px;
+    min-height: 180px;
   }
 </style>

src/lib/components/Org/Settings/LandingpageSettings.svelte

@@ -136,25 +136,25 @@
 </script>
 
 <Grid class="border-c rounded border-gray-200 w-full mt-5 relative">
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}>
+    <Column sm={4} md={4} lg={4}>
       <SectionTitle>Landing Page</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.header.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
       <TextField
         label="Title"
         placeholder="Write your title here"
         bind:value={$landingPageSettings.header.title}
-        className="mb-5"
+        className="w-full mb-5"
       />
       <TextField
         label="Title-Highlight"
         placeholder="Write your titlehighlight here"
-        className="mb-5"
+        className="w-full mb-5"
         bind:value={$landingPageSettings.header.titleHighlight}
       />
 
@@ -162,7 +162,7 @@
         label="Subtitle"
         labelClassName="font-light"
         placeholder="Write your subtitle here"
-        className="mb-5"
+        className="w-full mb-5"
         bind:value={$landingPageSettings.header.subtitle}
       />
 
@@ -170,7 +170,7 @@
       <TextField
         label="Label"
         placeholder="Write your label here"
-        className="mt-3 mb-5"
+        className="w-full mt-3 mb-5"
         bind:value={$landingPageSettings.header.action.label}
       />
       <div class="gap-2 mb-5">
@@ -199,15 +199,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>About</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.aboutUs.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle></Column
     >
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
       <TextField
         label="Title"
         placeholder="Write your title here"
@@ -244,15 +244,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>Courses</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.courses.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
       <TextField
         label="Title"
         placeholder="Write your title here"
@@ -272,15 +272,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>Frequently Asked Questions</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.faq.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8}>
       <TextField
         label="Title"
         placeholder="Write your title here"
@@ -331,15 +331,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>Contact us</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.contact.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8}>
       <TextField
         label="Title"
         placeholder="Write your title here"
@@ -375,15 +375,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>Mailing List</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.mailinglist.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
       <TextField
         label="Title"
         placeholder="Write your title here"
@@ -407,15 +407,15 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
+    <Column sm={4} md={4} lg={4}
       ><SectionTitle>Footer</SectionTitle>
       <Toggle bind:toggled={$landingPageSettings.footer.show} size="sm">
         <span slot="labelA" style="color: gray">Hide section</span>
         <span slot="labelB" style="color: gray">Show section</span>
       </Toggle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
       <TextField
         label="Facebook"
         placeholder="Write your Facebook link here"

src/lib/components/Org/Settings/OrgSettings.svelte

@@ -98,10 +98,14 @@
 </script>
 
 <Grid class="border-c rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0 flex flex-col items-center lg:items-start">
-      <TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
+      <TextField
+        label="Organization Name"
+        bind:value={$currentOrg.name}
+        className="w-full lg:w-60 mb-5"
+      />
       <UploadImage
         bind:avatar
         src={$currentOrg.avatar_url}
@@ -110,65 +114,65 @@
       />
       <PrimaryButton
         label="Update Organization"
-        className="px-6 py-3 mr-5 mt-5"
+        className="px-6 py-3 lg:mr-5 mt-5"
         isLoading={loading}
         isDisabled={loading}
         onClick={handleUpdate}
       />
     </Column>
   </Row>
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}><SectionTitle>Theme</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white mt-0">Set your brand color</h4>
+      <h4 class="dark:text-white lg:mt-0">Set your brand color</h4>
 
       <div class="flex gap-2">
         <button
           class="rounded-full border-2 {$currentOrg.theme === themes.default &&
-            'border-[#1d4ee2]'} mr-3"
+            'border-[#1d4ee2]'} mr-3 flex items-center justify-center"
           on:click={handleChangeTheme(themes.default)}
         >
-          <div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
+          <div class="w-3 h-3 md:w-6 md:h-6 bg-[#1d4ee2] rounded-full m-1" />
         </button>
 
         <button
           class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
-            'border-[#be1241]'} mr-3"
+            'border-[#be1241]'} mr-3 flex items-center justify-center"
           on:click={handleChangeTheme(themes.rose)}
         >
-          <div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
+          <div class="w-3 h-3 md:w-6 md:h-6 bg-[#be1241] rounded-full m-1" />
         </button>
 
         <button
           class="rounded-full border-2 {$currentOrg.theme === themes.green &&
-            'border-[#0c891b]'} mr-3"
+            'border-[#0c891b]'} mr-3 flex items-center justify-center"
           on:click={handleChangeTheme(themes.green)}
         >
-          <div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
+          <div class="w-3 h-3 md:w-6 md:h-6 bg-[#0c891b] rounded-full m-1" />
         </button>
 
         <button
           class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
-            'border-[#cc4902]'} mr-3"
+            'border-[#cc4902]'} mr-3 flex items-center justify-center"
           on:click={handleChangeTheme(themes.orange)}
         >
-          <div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
+          <div class="w-3 h-3 md:w-6 md:h-6 bg-[#cc4902] rounded-full m-1" />
         </button>
 
         <button
           class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
-            'border-[#cf00ce]'} mr-3"
+            'border-[#cf00ce]'} mr-3 flex items-center justify-center"
           on:click={handleChangeTheme(themes.violet)}
         >
-          <div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
+          <div class="w-3 h-3 md:w-6 md:h-6 bg-[#cf00ce] rounded-full m-1" />
         </button>
       </div>
     </Column>
   </Row>
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white mt-0">Customise your Domain</h4>
+      <h4 class="dark:text-white lg:mt-0">Customise your Domain</h4>
       <p class="text-sm text-gray-500 dark:text-white">
         Create a custom URL so your audience can get to your organization easily
       </p>
@@ -180,10 +184,10 @@
       />
     </Column>
   </Row>
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
+    <Column sm={4} md={4} lg={4}><SectionTitle>Team</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8}>
-      <h4 class="dark:text-white">Set up your website</h4>
+      <h4 class="dark:text-white lg:mt-0">Set up your website</h4>
       <p class="text-sm text-gray-500 dark:text-white">
         Add team mates to your organization so you can both collaborate on projects.
       </p>

src/lib/components/Org/Settings/Profile.svelte

@@ -72,25 +72,25 @@
 </script>
 
 <Grid class="border-c rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
-    <Column sm={2} md={2} lg={4}>
+    <Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
       <SectionTitle>Profile Picture</SectionTitle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
-      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
+      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
     </Column>
   </Row>
-  <Row class="py-7 border-bottom-c">
+  <Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}>
+    <Column sm={4} md={4} lg={4}>
       <SectionTitle>Personal Information</SectionTitle>
     </Column>
-    <Column sm={2} md={6} lg={8}>
+    <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
-      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
+      <TextField label="Full Name" bind:value={$profile.fullname} className="w-full lg:w-60 mb-4" />
-      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
+      <TextField label="Username" bind:value={$profile.username} className="w-full lg:w-60 mb-4" />
-      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
+      <TextField label="Email" bind:value={$profile.email} className="w-full lg:w-60 mb-4" />
     </Column>
   </Row>
-  <Row class="m-5 w-full flex items-center justify-center">
+  <Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
     <PrimaryButton
       label="Update Profile"
       className="mr-5"

src/lib/components/Org/Settings/index.svelte

@@ -63,16 +63,16 @@
   {/each}
   <!-- <Tab label="Account" /> -->
   <svelte:fragment slot="content">
-    <TabContent>
+    <TabContent class="w-full p-0">
       <Profile />
     </TabContent>
     <!-- <TabContent>
       <Account />
     </TabContent> -->
-    <TabContent>
+    <TabContent class="w-full p-0">
       <OrgSettings />
     </TabContent>
-    <TabContent>
+    <TabContent class="w-full p-0">
       <LandingpageSettings />
     </TabContent>
   </svelte:fragment>

src/lib/components/Org/SideBar.svelte

@@ -53,14 +53,17 @@
 
     return pagePath.includes(itemPath);
   }
+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
 </script>
 
 <aside
-  class={` ${
+  class={`${
     $menu.hidden
-      ? '-translate-x-[100%] top-[48px] md:top-0 absolute md:translate-x-0 md:relative '
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
-      : 'translate-x-0 absolute md:relative top-[48px] md:top-0'
+      : 'translate-x-0 absolute md:relative z-[9999]'
-  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800   h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
+  } transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-36px)] md:h-full 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">
@@ -80,7 +83,11 @@
 
       <ul class="my-5">
         {#each menuItems as menuItem}
-          <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
+          <a
+            href="{$currentOrgPath}{menuItem.path}"
+            class="text-black no-underline"
+            on:click={toggleSidebar}
+          >
             <li
               class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
                 $page.url.pathname,
@@ -110,13 +117,13 @@
     </div>
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
-      <a href={$currentOrgPath} class="text-black no-underline">
+      <a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
         <li class="flex items-center py-3 px-4 mb-2 rounded">
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
-      <a href="{$currentOrgPath}/settings" class="text-black no-underline">
+      <a href="{$currentOrgPath}/settings" class="text-black no-underline" on:click={toggleSidebar}>
         <li
           class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
             $page.url.pathname,

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>
+    <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
-    <PrimaryButton label="Create Course" onClick={createCourse} />
+    {#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>
+      <p class="dark:text-white font-bold mb-7 mt-5 lg:mt-0">Your Activities</p>
-      <div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
+      <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>
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Audience</h1>
-      <PrimaryButton
+      <PrimaryButton label="Export" onClick={exportAudience} isDisabled={isLoading} {isLoading} />
-        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">
+<section class="w-full md:max-w-4xl md:mx-auto">
-  <div class="py-10 px-5">
+  <div class="w-full py-10 px-5">
-    <div class="flex items-center justify-between mb-10">
+    <div class="flex items-center justify-between mb-10 w-full">
-      <h1 class="dark:text-white text-3xl font-bold">Community</h1>
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Community</h1>
-      <PrimaryButton label="Ask Community" onClick={askCommunity} />
+      {#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">
+    <div class="flex items-center gap-12 justify-between">
-      <h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>
+      <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>
-
+  <div class="px-2">
-  <TextEditor
+    <TextEditor
-    bind:value={fields.body}
+      bind:value={fields.body}
-    placeholder="Ask the community any question you might have"
+      placeholder="Ask the community any question you might have"
-    onChange={(html) => (fields.body = html)}
+      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">
+<section class="w-full md:max-w-6xl md:mx-auto">
-  <div class="py-10 px-5">
+  <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>
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
-      <PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
+      {#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>
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Interactive Quizzes</h1>
-      <PrimaryButton
+      {#if $isMobile}
-        label="Create Quiz"
+        <PrimaryButton onClick={() => ($createQuizModal.open = true)}>
-        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
     >