CLASSROOMIO-T-255: Fix course sidebar bug

CLASSROOMIO-T-255: Lesson page UX improvements

CLASSROOMIO-T-255:Updated part of the code

CLASSROOMIO-T-255:Worked on the sidebar

CLASSROOMIO-T-255:Worked on the sidebar

CLASSROOMIO-T-255:Worked on the sidebar

CLASSROOMIO-T-255:Worked on the sidebar and the appbar


Co-authored-by: Ifeanyi Nwosu <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>


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

src/lib/components/Apps/components/Poll/index.svelte

@@ -149,7 +149,7 @@
   }
 </script>
 
-<PageNav title="Poll" overidableStyle="padding: 0 10px">
+<PageNav title="Poll" overidableStyle="padding: 0 10px" paddingClass="w-full">
   <div slot="widget">
     <CloseButton onClick={handleClose} />
   </div>

src/lib/components/Apps/index.svelte

@@ -40,7 +40,7 @@
     } else {
       $apps.selectedApp = appName;
     }
-    $apps.dropdown = false;
+    $apps.dropdown = !$apps.dropdown;
   }
 
   function updateTopPadding(isStudent: boolean) {
@@ -91,7 +91,6 @@
         toolTipProps={{ title: 'Settings', hotkeys: ['A', '0'] }}
         onClick={() => {
           handleAppClick();
-          $apps.dropdown = !$apps.dropdown;
         }}
       >
         <Settings size={24} class="carbon-icon dark:text-white lg:hidden" />
@@ -194,9 +193,7 @@
 
   @media screen and (min-width: 768px) and (max-width: 1023px) {
     .app {
-      min-width: 280px;
+      width: 50vw;
-      max-width: 300px;
-      width: 300px;
       position: relative;
       overflow: auto;
     }
@@ -204,7 +201,8 @@
 
   @media screen and (max-width: 767px) {
     .app {
-      width: 100%;
+      width: 100vw;
+      min-width: calc(100vw - 60px);
       position: relative;
       overflow: auto;
     }

src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte

@@ -17,7 +17,7 @@
 </script>
 
 {#if !isNoteEmpty($lesson.materials?.note)}
-  <HtmlRender>
+  <HtmlRender className="m-auto">
     <svelte:fragment slot="content">
       <div>
         {@html $lesson.materials.note}

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -36,6 +36,7 @@
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
   import type { LessonPage } from '$lib/utils/types';
   import { getTextFromHTML } from '$lib/utils/functions/course';
+  import { snackbar } from '$lib/components/Snackbar/store';
 
   export let mode = MODES.view;
   export let prevMode = '';
@@ -75,7 +76,7 @@
           materials
         }
       : $lesson;
-    handleUpdateLessonMaterials(_lesson, lessonId);
+    return handleUpdateLessonMaterials(_lesson, lessonId);
   }
 
   function isNoteEmpty(note: string) {
@@ -178,7 +179,12 @@
 
     isSaving = true;
     timeoutId = setTimeout(async () => {
-      await saveLesson(updatedMaterials);
+      const { error } = await saveLesson(updatedMaterials);
+
+      if (error) {
+        console.log('error saving lesson', error);
+        snackbar.error('We apologise, there was an error saving your lesson.');
+      }
       isSaving = false;
     }, 500);
   }
@@ -244,9 +250,9 @@
   <VideoUploader {lessonId} />
 </Modal>
 
-<HtmlRender>
+<HtmlRender className="m-auto text-center">
   <svelte:fragment slot="content">
-    <h1 class="text-4xl mt-0 capitalize">
+    <h1 class="text-2xl md:text-4xl mt-0 capitalize">
       {lessonTitle}
     </h1>
   </svelte:fragment>

src/lib/components/Course/components/Navigation/index.svelte

@@ -13,7 +13,7 @@
   import { course } from '$lib/components/Course/store';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
   import { isMobile } from '$lib/utils/store/useMobile';
-  import { menu, sideBar } from '$lib/components/Org/store';
+  import { sideBar } from '$lib/components/Org/store';
   import { profile } from '$lib/utils/store/user';
   import { getIsLessonComplete } from '../Lesson/functions';
 
@@ -38,7 +38,9 @@
   let menuContentRef;
 
   const toggleSidebar = () => {
-    $menu.hidden = !$menu.hidden;
+    if ($isMobile) {
+      $sideBar.hidden = !$sideBar.hidden;
+    }
   };
 
   function handleMainGroupClick(href: string) {
@@ -103,7 +105,7 @@
     if (newWidth < 150) {
       sidebarRef.style.width = '0';
       menuContentRef.style.display = 'none';
-      $sideBar.open = false;
+      $sideBar.hidden = true;
       isDragging = false;
       resize = false;
     } else if (newWidth > window.innerWidth / 3 && window.innerWidth >= 1280) {
@@ -231,21 +233,25 @@
 </script>
 
 <aside
-  class={`${
+  class={`
-    $menu.hidden
+  ${
-      ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[40]'
+    $sideBar.hidden
+      ? '-translate-x-[100%] absolute z-[40]'
       : 'translate-x-0 absolute md:relative z-[40]'
-  } transition w-[90vw] md:w-[350px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] ${
+  }
+    transition w-[90vw] md:w-[300px] lg:w-[350px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] 
+  
+  ${
     resize && 'border-r-8 border-r-blue-500'
   } overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
-  style={$sideBar.open && 'width:0' ? 'width :300px' : 'width:0'}
+  style={$sideBar.hidden === true ? 'width:0' : 'width:300px'}
   bind:this={sidebarRef}
 >
   <div class="sidebar-contenth-full flex flex-col">
     <ul
       class="sidebar-content my-5"
-      style={$sideBar.open && 'width:0' ? 'display:block' : ''}
       bind:this={menuContentRef}
+      style={$sideBar.hidden === true ? '' : 'display:block'}
     >
       {#each navItems as navItem}
         {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}

src/lib/components/Course/index.svelte

@@ -48,7 +48,7 @@
         $course.overview = html;
       }}
       placeholder="Write your overview here"
-      height="700"
+      height={700}
     />
   {:else}
     <HtmlRender className="p-2" content={$course.overview || ''} />

src/lib/components/LMS/SideBar.svelte

@@ -9,7 +9,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
-  import { menu } from '$lib/components/Org/store';
+  import { sideBar } from '$lib/components/Org/store';
 
   function isActive(pagePath: string, itemPath: string) {
     const pageLinkItems = pagePath.split('/');
@@ -44,13 +44,13 @@
     }
   ];
   const toggleSidebar = () => {
-    $menu.hidden = !$menu.hidden;
+    $sideBar.hidden = !$sideBar.hidden;
   };
 </script>
 
 <aside
   class={`${
-    $menu.hidden
+    $sideBar.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)]`}

src/lib/components/Navigation/app.svelte

@@ -12,18 +12,14 @@
   import { appStore } from '$lib/utils/store/app';
   import { currentOrgPath } from '$lib/utils/store/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
-  import { menu, sideBar } from '../Org/store';
+  import { sideBar } from '../Org/store';
 
   export let title = '';
   export let navClass = '';
   export let isCoursePage = false;
 
   const toggleSidebar = () => {
-    $menu.hidden = !$menu.hidden;
+    $sideBar.hidden = !$sideBar.hidden;
-  };
-
-  const openSidebar = () => {
-    $sideBar.open = !$sideBar.open;
   };
 
   function toggleDarkMode() {
@@ -49,8 +45,12 @@
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       <li class="md:hidden">
-        <IconButton onClick={toggleSidebar}>
+        <IconButton
-          {#if $menu.hidden}
+          onClick={() => {
+            toggleSidebar();
+          }}
+        >
+          {#if $sideBar.hidden}
             <Menu size={16} class=" text-white" />
           {:else}
             <Close size={16} class=" text-white" />
@@ -60,7 +60,11 @@
 
       {#if isCoursePage}
         <li class="hidden md:block">
-          <IconButton onClick={openSidebar}>
+          <IconButton
+            onClick={() => {
+              toggleSidebar();
+            }}
+          >
             <Menu size={16} class=" text-white" />
           </IconButton>
         </li>

src/lib/components/Navigation/lms.svelte

@@ -10,14 +10,14 @@
   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 { sideBar } from '$lib/components/Org/store';
   import { currentOrg } from '$lib/utils/store/org';
   import { toggleBodyByMode } from '$lib/utils/functions/app';
 
   export let navClass = '';
 
   const toggleSidebar = () => {
-    $menu.hidden = !$menu.hidden;
+    $sideBar.hidden = !$sideBar.hidden;
   };
 
   function toggleDarkMode() {
@@ -38,7 +38,7 @@
   <ul class="flex w-full items-center">
     <li class="md:hidden">
       <IconButton onClick={toggleSidebar}>
-        {#if $menu.hidden}
+        {#if $sideBar.hidden}
           <Menu size={16} class=" text-white" />
         {:else}
           <Close size={16} class=" text-white" />

src/lib/components/Org/SideBar.svelte

@@ -14,7 +14,7 @@
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
-  import { menu } from './store';
+  import { sideBar } from './store';
 
   const menuItems = [
     {
@@ -54,13 +54,13 @@
     return pagePath.includes(itemPath);
   }
   const toggleSidebar = () => {
-    $menu.hidden = !$menu.hidden;
+    $sideBar.hidden = !$sideBar.hidden;
   };
 </script>
 
 <aside
   class={`${
-    $menu.hidden
+    $sideBar.hidden
       ? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
       : 'translate-x-0 absolute md:relative z-40'
   } overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-neutral-900 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}

src/lib/components/Org/store.js

@@ -1,13 +1,9 @@
 import { writable } from 'svelte/store';
 
-export const menu = writable({
-  hidden: true
-});
-
 export const newOrgModal = writable({
   open: false
 });
 
 export const sideBar = writable({
-  open: true
+  hidden: false
 });

src/lib/components/Snackbar/index.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import InformationIcon from 'carbon-icons-svelte/lib/Information.svelte';
+  import { InlineNotification } from 'carbon-components-svelte';
-  import WarningIcon from 'carbon-icons-svelte/lib/Warning.svelte';
+  import { capitalizeFirstLetter } from '$lib/utils/functions/string';
-  import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
 
-  import CloseButton from '../Buttons/Close/index.svelte';
+  import { SNACKBAR_SEVERITY } from './constants';
-  import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
   import { snackbarStore, snackbarStoreInitialState } from './store';
 
-  let severityColor: string;
   let timeoutId: NodeJS.Timeout | undefined;
+  let kind: 'error' | 'info' | 'info-square' | 'success' | 'warning' | 'warning-alt' = 'info';
 
   function handleClose() {
     if (typeof $snackbarStore.handleClose === 'function') {
@@ -39,41 +37,37 @@
   }
 
   $: handleOpen($snackbarStore.open);
-  $: severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
+  $: kind =
+    $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS
+      ? 'success'
+      : $snackbarStore.severity === SNACKBAR_SEVERITY.ERROR
+      ? 'error'
+      : 'info';
 </script>
 
 {#if $snackbarStore.open}
   {#key $snackbarStore.message}
-    <div
+    <div transition:fly={{ x: 200, duration: 500 }} class="root absolute">
-      transition:fly={{ x: 200, duration: 500 }}
+      <InlineNotification
-      class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
+        {kind}
-    >
+        title={capitalizeFirstLetter(kind || '')}
-      <div class="flex items-center">
+        subtitle={$snackbarStore.message}
-        {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+        on:close={(e) => {
-          <CheckmarkOutline24 size={24} class="carbon-icon dark:text-white" />
+          e.preventDefault();
-        {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+          handleClose();
-          <WarningIcon size={24} class="carbon-icon dark:text-white" />
+        }}
-        {:else}
+      />
-          <InformationIcon size={24} class="carbon-icon dark:text-white" />
-        {/if}
-        <p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
-      </div>
-
-      <CloseButton onClick={handleClose} contained={true} color="text-white" />
     </div>
   {/key}
 {/if}
 
 <style>
   .root {
-    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
     right: 5%;
     left: auto;
     top: 24px;
     transform: translateX(-5%);
     min-width: 288px;
-    padding: 6px 16px;
-    flex-wrap: wrap;
     z-index: 51;
   }
 </style>

src/lib/components/TextEditor/index.svelte

@@ -7,7 +7,7 @@
   export let onChange = (html: string) => {};
   export let height = 300;
   export let placeholder = '';
-  export let editorWindowRef: Window;
+  export let editorWindowRef: Window | undefined = undefined;
   export let maxHeight: number | undefined = undefined;
 
   const apiKey = PUBLIC_TINYMCE_API_KEY;

src/lib/utils/functions/string.ts

@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(val: string): string {
+  return val.charAt(0).toUpperCase() + val.slice(1);
+}