CLASSROOMIO-T-205: Improve lesson page UX

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

@@ -26,6 +26,7 @@
 
   export let exerciseId;
   export let goBack = () => {};
+  export let isStudent = true;
 
   let preview = false;
   let editDescription = false;
@@ -66,7 +67,11 @@
   $: $questionnaire.questions.length < 1 && handleAddQuestion();
 </script>
 
-<PageBody padding="px-4 overflow-x-hidden" headerClassName="bg-gray-100 rounded-md mb-3">
+<PageBody
+  bind:isPageNavHidden={isStudent}
+  padding="px-4 overflow-x-hidden"
+  headerClassName="bg-gray-100 rounded-md mb-3"
+>
   <svelte:fragment slot="header">
     <RoleBasedSecurity allowedRoles={[1, 2]}>
       <div class="flex items-center py-2 w-">
@@ -139,5 +144,4 @@
   {:else}
     <ViewMode {preview} {exerciseId} />
   {/if}
-  <!-- </div> -->
 </PageBody>

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

@@ -150,7 +150,7 @@
 {/if}
 
 {#if exerciseId}
-  <Exercise {exerciseId} {goBack} />
+  <Exercise {exerciseId} {goBack} bind:isStudent />
 {:else}
   <NewExerciseModal
     bind:open
@@ -160,7 +160,7 @@
     bind:title={newExercise.title}
   />
 
-  <PageBody>
+  <PageBody bind:isPageNavHidden={isStudent}>
     <slot:fragment slot="header">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         <PrimaryButton className="mr-2 mb-2" label="Add" onClick={() => (open = !open)} />

src/lib/components/Course/components/Lesson/store/lessons.ts

@@ -12,6 +12,7 @@ export const lessons: Writable<Lesson[]> = writable([]);
 export const lesson = writable<LessonPage>({
   id: null,
   totalExercises: 0,
+  comments: 0,
   isSaving: false,
   materials: {
     note: '',

src/lib/components/CourseContainer/index.svelte

@@ -1,12 +1,8 @@
 <script>
   // @ts-nocheck
-
   import { Moon } from 'svelte-loading-spinners';
   import Navigation from '../Course/components/Navigation/index.svelte';
   import Backdrop from '$lib/components/Backdrop/index.svelte';
-  // import { lessons, lesson } from '../Course/components/Lesson/store/lessons';
-  // import { questionnaire } from '../Course/components/Lesson/Exercise/store/exercise';
-  // import { questionnaireMetaData } from '../Course/components/Lesson/store/answers';
   import { course, group } from '../Course/store';
   import Confetti from '../Confetti/index.svelte';
   import { isMobile } from '$lib/utils/store/useMobile';

src/lib/components/IconButton/index.svelte

@@ -30,7 +30,8 @@
   direction={toolTipProps.direction}
 >
   <button
-    class="root {color} {selected && 'active'} {size} {contained && 'contained '} {buttonClassName}"
+    class="root {color} {selected && 'active'} {size} {contained &&
+      'contained dark:bg-neutral-700'} {buttonClassName}"
     {disabled}
     {type}
     on:click={handleClick}

src/lib/components/LMS/SideBar.svelte

@@ -7,7 +7,6 @@
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
   import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
-  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';

src/lib/components/PageBody/index.svelte

@@ -6,9 +6,15 @@
   export let className = '';
   export let headerClassName = '';
   export let onClick = () => {};
+  export let isPageNavHidden = false;
 </script>
 
-<div class="root mt-4 mx-auto {width} {className} relative {padding}" on:click={onClick}>
+<div
+  class="overflow-y-auto {isPageNavHidden
+    ? 'h-[calc(100vh-65px)] lg:h-[calc(100vh-127px)]'
+    : 'h-[calc(100vh-127px)]'} mt-4 mx-auto {width} {className} relative {padding}"
+  on:click={onClick}
+>
   {#if $$slots.header}
     <div
       class="head dark:bg-black flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
@@ -21,10 +27,6 @@
 </div>
 
 <style>
-  .root {
-    overflow-y: auto;
-    height: calc(100vh - 127px);
-  }
   .head {
     top: 0px;
     z-index: 1;

src/lib/components/PageNav/index.svelte

@@ -12,6 +12,7 @@
   export let isTitleEditable = false;
   export let onEditComplete = () => {};
   export let paddingClass = 'px-2';
+  export let hideOnMobile = false;
 
   let dynamicRootClass = '';
   let enterEditTitleMode = false;
@@ -20,7 +21,9 @@
 </script>
 
 <div
-  class="header dark:bg-black dark:border-neutral-600 bg-white flex items-center justify-between {!disableSticky &&
+  class="{hideOnMobile
+    ? 'hidden lg:flex'
+    : ''} header dark:bg-black dark:border-neutral-600 bg-white flex items-center justify-between {!disableSticky &&
     'sticky'} {paddingClass} {dynamicRootClass}"
   style={overidableStyle}
 >