ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-205: Improve lesson page UX

Browse Source
This commit is contained in:
Rotimi Best
2023-10-05 08:02:34 +01:00
parent d40b4bdd77
commit 589a61fe44
10 changed files with 74 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Course/components/Lesson/Exercise/index.svelte
+6 -2
View File
@@ -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
+2 -2
View File
@@ -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
+1
View File
@@ -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
-4
View File
@@ -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
+2 -1
View File
@@ -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
-1
View File
@@ -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
+7 -5
View File
@@ -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
+4 -1
View File
@@ -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}
>
src/lib/utils/types/index.ts
+1
View File
@@ -196,6 +196,7 @@ export enum VideoType {
export interface LessonPage {
id?: string | null;
totalExercises: Number;
comments: Number;
isSaving: Boolean;
materials: {
note: string;
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+51 -23
View File
@@ -1,8 +1,14 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { fetchCourse, fetchLesson, updateLessonCompletion } from '$lib/utils/services/courses';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import { Loading } from 'carbon-components-svelte';
@@ -17,15 +23,11 @@
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { apps } from '$lib/components/Apps/store';
import IconButton from '$lib/components/IconButton/index.svelte';
import {
lesson,
lessons,
handleSaveLesson
} from '$lib/components/Course/components/Lesson/store/lessons';
import { lesson, lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { browser } from '$app/environment';
import { currentOrg } from '$lib/utils/store/org';
import { snackbar } from '$lib/components/Snackbar/store';
import type { LessonCompletion, LessonPage } from '$lib/utils/types';
import type { LessonCompletion } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user.js';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
@@ -51,7 +53,7 @@
}
}
async function fetchReqData(lessonId = '', isMaterialsTabActive: false) {
async function fetchReqData(lessonId = '', isMaterialsTabActive: boolean) {
isFetching = true;
let lessonData;
@@ -109,6 +111,7 @@
});
await updateLessonCompletion(completion);
snackbar.success('Marked as complete');
isMarkingComplete = false;
}
@@ -167,7 +170,7 @@
isLoading = false;
};
function setLesson(lessonData, totalExercises) {
function setLesson(lessonData, totalExercises: number) {
if (!lessonData) return;
let lesson_completion: LessonCompletion[] = [];
@@ -208,6 +211,7 @@
isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
>
<PageNav
bind:hideOnMobile={isStudent}
navItems={[
{
label: 'Materials',
@@ -272,30 +276,54 @@
/>
{:else if !!data.lessonId}
<PageBody
bind:isPageNavHidden={isStudent}
onClick={() => {
$apps.open = false;
$apps.dropdown = false;
}}
width="lg:w-full xl:w-11/12"
className="overflow-x-hidden"
>
<Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
<div class="w-full flex flex-row-reverse mt-10">
<PrimaryButton
onClick={markLessonComplete}
isLoading={isMarkingComplete}
isDisabled={isMarkingComplete}
variant={VARIANTS.OUTLINED}
className="mt-10"
>
<CheckmarkOutlineIcon size={24} class="carbon-icon mr-2" />
Mark as {getIsLessonComplete($lesson.lesson_completion, $profile.id)
? 'Incomplete'
: 'Complete'}
</PrimaryButton>
</div>
</PageBody>
{/if}
<!-- Mobile Navigation -->
<div class="fixed bottom-5 w-[90%] flex items-center justify-center lg:hidden">
<div
class="flex items-center gap-2 w-fit rounded-full shadow-xl bg-gray-100 dark:bg-neutral-700 px-5 py-1"
>
{#if data.isMaterialsTabActive}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
on:click={() => goto(`${path}/exercises`)}
>
<ListChecked size={24} class="carbon-icon" />
<span class="ml-1">{$lesson.totalExercises}</span>
</button>
{:else}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
on:click={() => goto(path)}
>
<CourseIcon color="#fff" />
</button>
{/if}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
>
<SendAlt size={24} class="carbon-icon" />
<span class="ml-1">{$lesson.comments}</span>
</button>
<button class="px-2 my-2" on:click={markLessonComplete} disabled={isMarkingComplete}>
{#if getIsLessonComplete($lesson.lesson_completion, $profile.id)}
<CheckmarkFilledIcon size={24} class="carbon-icon text-primary-600" />
{:else}
<CheckmarkOutlineIcon size={24} class="carbon-icon" />
{/if}
</button>
</div>
</div>
</CourseContainer>
<style>