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]>
2023-09-08 09:17:05 +00:00
parent 7523e6c3e7
commit 536a444193
25 changed files with 275 additions and 171 deletions
@@ -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>
@@ -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" />
@@ -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>
@@ -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 />
@@ -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>
@@ -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>
@@ -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 />
@@ -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 />
@@ -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
    >
@@ -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
    >