CLASSROOMIO-T-146:Made the course page responsive

CLASSROOMIO-T-146:Made updates to the code following the reviews CLASSROOMIO-T-146:Made updates to the Z-Index Merge branch 'main' into CLASSROOMIO-T-146 Merge branch 'main' into CLASSROOMIO-T-146 CLASSROOMIO-T-146:Made the course page responsive CLASSROOMIO-T-146:working on the course page responsiveness Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-146:Making the course page 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-73 Merged-by: Best Admin <[email protected]>
2023-09-14 20:59:51 +00:00
parent be619ae6bd
commit f3f8a00809
24 changed files with 520 additions and 520 deletions
@@ -45,8 +45,8 @@
 </svelte:head>

 <main class="md:-ml-4 md:-mr-4 px-2">
-  <div class="flex-1 flex flex-col md:flex-row justify-between gap-3 w-full mb-3 h-4/5">
-    <section class="w-full md:w-2/5 h-full">
+  <div class="flex-1 flex flex-col lg:flex-row justify-between gap-3 w-full mb-3 h-4/5">
+    <section class="w-full lg:w-2/5 h-full">
      <strong class="my-2 text-base font-semibold text-black dark:text-gray-100"
        >Certificate settings</strong
      >
@@ -99,7 +99,7 @@
      </div>
    </section>
    <section
-      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full md:w-3/5"
+      class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full lg:w-3/5"
    >
      <div class="certificate-container flex justify-center items-center h-5/6">
        {#if $course.certificate_theme === 'professional'}
@@ -55,7 +55,7 @@
 <Modal
  onClose={() => (openModal = false)}
  bind:open={openModal}
-  width="w-[60%]"
+  width="w-[80%] md:w-[60%]"
  containerClass="overflow-hidden"
  modalHeading="Add New Lesson"
 >
@@ -165,8 +165,8 @@
          <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>
        </a>
      {:else}
-        <Box className="mt-3">
-          <div class="flex justify-between flex-col items-center w-96">
+        <Box className="mt-3 text-center">
+          <div class="flex justify-between flex-col items-center w-[80%] md:w-96">
            <img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
            <h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
            <p class="text-sm text-center text-slate-500">
@@ -11,13 +11,15 @@
  const onChange = (tab) => () => (currentTab = tab);
 </script>

-<section class="w-full h-full flex flex-row items-start gap-3">
-  <div class="flex-1 flex-col">
-    <p class="text-sm font-normal text-start text-[#4F4B4B] dark:text-[#b0a9a9] mb-3">Add By</p>
+<section class="w-full h-full flex flex-col md:flex-row items-start gap-3">
+  <div class="flex flex-row md:flex-col gap-2 items-center">
+    <p class="text-sm font-normal text-start text-[#4F4B4B] dark:text-[#b0a9a9] mb-3 w-full">
+      Add By
+    </p>
    {#each tabs as item (item.value)}
      <button
        on:click={onChange(item.value)}
-        class={`w-full px-4 py-3 my-5 border ${
+        class={`w-full px-4 py-3 my-1 border ${
          currentTab === item.value
            ? 'border border-[#0233BD] bg-[#F5F8FE] dark:text-black'
            : 'border border-gray-200'
@@ -197,13 +197,13 @@
 <Modal
  {onClose}
  bind:open={$uploadCourseVideoStore.isModalOpen}
-  width="w-4/5 h-[566px]"
+  width="w-4/5 w-[90%] h-[80%] md:h-[566px]"
  modalHeading="Add a Video"
 >
  <VideoUploader {lessonId} />
 </Modal>

-<h1 class="text-4xl mt-0">
+<h1 class="text-4xl mt-0 capitalize">
  {lessonTitle}
 </h1>

@@ -386,7 +386,7 @@
    </article>
  {/if}
 {:else}
-  <Box>
+  <Box className="text-center">
    <img src="/no-video.svg" alt="Video not found" />
    <h3 class="text-xl font-normal dark:text-white py-2">
      No note, video or slide added for this lesson yet
@@ -24,6 +24,7 @@
  import { updateCourse } from '$lib/utils/services/courses';
  import { NavClasses } from '$lib/utils/constants/reusableClass';
  import { isMobile } from '$lib/utils/store/useMobile';
+  import { menu } from '$lib/components/Org/store';

  // export let lessonId;
  export let path;
@@ -32,12 +33,14 @@
  let show = null;
  let isLessonActive = false;

+  const toggleSidebar = () => {
+    $menu.hidden = !$menu.hidden;
+  };
+
  function handleMainGroupClick(href) {
    return () => {
-      if ($isMobile) {
-        setTimeout(() => (show = false), 500);
-      }
      goto(href);
+      toggleSidebar();
    };
  }

@@ -146,145 +149,66 @@

 <Settings />

-<div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
-  {#if show}
-    <div class="relative h-full dark:bg-gray-800">
-      <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
-        <slot:fragment slot="image">
-          <Avatar src={$course.logo} />
-          <IconButton
-            value="toggle"
-            onClick={() => goto(`${$currentOrgPath}/courses`)}
-            size="small"
-            contained={true}
+<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)] border border-l-0 border-t-0 border-b-0 border-r-1`}
+>
+  <div class="h-full flex flex-col">
+    <ul class="my-5">
+      {#each navItems as navItem}
+        {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
+          <NavExpandable
+            label={navItem.label}
+            handleClick={handleMainGroupClick(navItem.to)}
+            isGroupActive={(path || $page.url.pathname) === navItem.to}
+            isExpanded={isLessonActive}
+            total={navItem.isLecture ? ($lessons || []).length : 0}
          >
-            <ArrowLeftIcon size={20} class="carbon-icon dark:text-white" />
-          </IconButton>
-        </slot:fragment>
-        <slot:fragment slot="widget">
-          <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <IconButton onClick={() => ($settingsDialog.open = !$settingsDialog.open)}>
-              <SettingsIcon size={20} class="carbon-icon dark:text-white" />
-            </IconButton>
-          </RoleBasedSecurity>
-        </slot:fragment>
-      </PageNav> -->
-      <div class="h-full py-3 overflow-y-auto">
-        {#each navItems as navItem}
-          {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
-            <NavExpandable
-              label={navItem.label}
-              handleClick={handleMainGroupClick(navItem.to)}
-              isGroupActive={(path || $page.url.pathname) === navItem.to}
-              isExpanded={isLessonActive}
-              total={navItem.isLecture ? ($lessons || []).length : 0}
-            >
-              {#if navItem.isLecture}
-                {#each $lessons as item, index}
-                  <a
-                    class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
-                    !item.is_unlocked
-                      ? 'cursor-not-allowed'
-                      : ''}"
-                    href={isStudent && !item.is_unlocked
-                      ? $page.url.pathname
-                      : getLessonsRoute($course.id, item.id)}
-                    on:click={() => {
-                      if ($isMobile) {
-                        setTimeout(() => (show = false), 500);
-                      }
-                    }}
-                    aria-disabled={!item.is_unlocked}
+            {#if navItem.isLecture}
+              {#each $lessons as item, index}
+                <a
+                  class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
+                  !item.is_unlocked
+                    ? 'cursor-not-allowed'
+                    : ''}"
+                  href={isStudent && !item.is_unlocked
+                    ? $page.url.pathname
+                    : getLessonsRoute($course.id, item.id)}
+                  on:click={toggleSidebar}
+                  aria-disabled={!item.is_unlocked}
+                >
+                  <div
+                    class="flex items-center py-3 px-4 {NavClasses.item} {(
+                      path || $page.url.pathname
+                    ).includes(item.id) && NavClasses.active}"
                  >
-                    <div
-                      class="flex items-center py-3 px-4 {NavClasses.item} {(
-                        path || $page.url.pathname
-                      ).includes(item.id) && NavClasses.active}"
-                    >
-                      <TextChip
-                        value={getLectureNo(index + 1)}
-                        className="bg-primary-200 text-primary-600 text-xs mr-2"
-                        size="sm"
-                        shape="rounded-full"
-                      />
-                      <span>{item.title}</span>
-                      <span class="grow" />
-                      {#if !item.is_unlocked}
-                        <span class="text-md ml-2" title="This lesson is locked.">
-                          <LockedIcon class="carbon-icon dark:text-white" />
-                        </span>
-                      {:else if item.is_complete}
-                        <span class="ml-2" title="You have completed this lesson">
-                          <CheckmarkFilled class="carbon-icon dark:text-white" />
-                        </span>
-                      {/if}
-                    </div>
-                  </a>
-                {/each}
-              {/if}
-            </NavExpandable>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  {/if}
-  <div class="toggler rounded-full shadow-lg absolute bottom-0">
-    <IconButton
-      value="toggle"
-      onClick={() => (show = !show)}
-      size={$isMobile ? 'large' : 'small'}
-      color="text-black"
-      toolTipProps={$isMobile
-        ? {}
-        : {
-            title: 'Toggle sidebar',
-            hotkeys: ['B'],
-            direction: 'right'
-          }}
-    >
-      {#if show}
-        <ChevronLeftIcon size={16} />
-      {:else}
-        <ChevronRightIcon size={16} />
-      {/if}
-    </IconButton>
+                    <TextChip
+                      value={getLectureNo(index + 1)}
+                      className="bg-primary-200 text-primary-600 text-xs mr-2"
+                      size="sm"
+                      shape="rounded-full"
+                    />
+                    <span>{item.title}</span>
+                    <span class="grow" />
+                    {#if !item.is_unlocked}
+                      <span class="text-md ml-2" title="This lesson is locked.">
+                        <LockedIcon class="carbon-icon dark:text-white" />
+                      </span>
+                    {:else if item.is_complete}
+                      <span class="ml-2" title="You have completed this lesson">
+                        <CheckmarkFilled class="carbon-icon dark:text-white" />
+                      </span>
+                    {/if}
+                  </div>
+                </a>
+              {/each}
+            {/if}
+          </NavExpandable>
+        {/if}
+      {/each}
+    </ul>
  </div>
-</div>
-
-<style lang="scss">
-  .root {
-    height: calc(100vh - 48px);
-    display: flex;
-    flex-direction: column;
-    min-width: 360px;
-    max-width: 360px;
-    top: 0;
-    border-right: 1px solid var(--border-color);
-    background-color: rgb(250, 251, 252);
-
-    &.hide {
-      min-width: 15px;
-      max-width: 15px;
-    }
-  }
-  .footer {
-    border-top: 1px solid var(--border-color);
-  }
-
-  .toggler {
-    right: -15px;
-    z-index: 10;
-    border: 1px solid var(--border-color);
-    top: 50px;
-    height: fit-content;
-    background: var(--border-color);
-  }
-
-  @media (max-width: 760px) {
-    .root {
-      width: 98%;
-      min-width: unset;
-      max-width: unset;
-    }
-  }
-</style>
+</aside>
@@ -145,7 +145,7 @@
 <Modal
  onClose={resetForm}
  bind:open={$invitationModal.open}
-  width="w-2/5"
+  width="w-4/5 md:w-2/5"
  maxWidth="max-w-lg"
  modalHeading="Invite people"
 >