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>
2023-09-08 09:17:05 +00:00
parent 7523e6c3e7
commit 536a444193
25 changed files with 275 additions and 171 deletions
@@ -18,15 +18,13 @@
  $: fetchInitData($currentOrg.id);
 </script>

-<div
-  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
->
+<div 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>
@@ -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>
@@ -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 {
-    currentOrg,
-    createQuizModal,
-    currentOrgPath,
-    quizesStore,
-  } from '$lib/utils/store/org';
+  import { 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}>
@@ -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>
@@ -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">
-    <Column sm={2} md={2} lg={4}>
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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">
-    <Column sm={2} md={2} lg={4}
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <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"
@@ -98,10 +98,14 @@
 </script>

 <Grid class="border-c rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
-      <TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
+    <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-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">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
-      <h4 class="dark:text-white mt-0">Set your brand color</h4>
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}><SectionTitle>Theme</SectionTitle></Column>
+    <Column sm={8} md={8} lg={8}>
+      <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">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
-      <h4 class="dark:text-white mt-0">Customise your Domain</h4>
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
+    <Column sm={8} md={8} lg={8}>
+      <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">
-    <Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
-    <Column sm={2} md={6} lg={8}>
-      <h4 class="dark:text-white">Set up your website</h4>
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}><SectionTitle>Team</SectionTitle></Column>
+    <Column sm={8} md={8} lg={8}>
+      <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>
@@ -72,25 +72,25 @@
 </script>

 <Grid class="border-c rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}>
+  <Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
+    <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}>
-      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
+    <Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
+      <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">
-    <Column sm={2} md={2} lg={4}>
+  <Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}>
      <SectionTitle>Personal Information</SectionTitle>
    </Column>
-    <Column sm={2} md={6} lg={8}>
-      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
-      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
-      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
+    <Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
+      <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-full lg: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"
@@ -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>
@@ -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-0 absolute md:relative top-[48px] md:top-0'
-  } 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`}
+      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
+      : 'translate-x-0 absolute md:relative z-[9999]'
+  } 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,