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

Merge branch 'main' into orglandg

Browse Source
This commit is contained in:
Rotimi Best
2023-08-16 04:24:57 +01:00
parent ad2b87ca15 1649a703d8
commit 802247ec11
15 changed files with 520 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/LMS/SideBar.svelte
+4 -7
View File
@@ -1,11 +1,11 @@
<script>
import { page } from '$app/stores';
import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
import TextChip from '$lib/components/Chip/Text.svelte';
import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
import ReviewsIcon from '$lib/components/Icons/ReviewsIcon.svelte';
import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
import ExerciseIcon from '$lib/components/Icons/ExerciseIcon.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
@@ -36,14 +36,9 @@
},
{
name: 'Exercise',
icon: ExerciseIcon,
icon: LicenseDraft,
link: '/lms/exercises'
},
{
name: 'Reviews',
icon: ReviewsIcon,
link: '/lms/reviews'
},
{
name: 'Community',
icon: CommunityIcon,
@@ -81,6 +76,8 @@
<svelte:component
this={item.icon}
color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
size={24}
class="carbon-icon dark:text-white"
/>
<p class="dark:text-white ml-2">{item.name}</p>
</li>
src/lib/components/LMS/components/AllLearning.svelte
+67
View File
@@ -0,0 +1,67 @@
<script>
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { mockData } from './store';
const gotoCourse = (title) => {
goto(`/courses/${title}`);
};
</script>
<section>
{#if mockData.length > 0}
<div
class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
>
{#each mockData as data}
<div
class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
>
<img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
<div class="w-full p-3">
<p
class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
>
{data.title}
</p>
<p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
{data.description}
</p>
<p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
<span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
<span>
<p>{data.lessons} lessons</p>
{#if data.inProgress}
<div class="flex items-center gap-2">
<div class=" relative bg-[#EAEAEA] w-full h-1">
<div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
</div>
<p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
</div>
{/if}
</span>
<PrimaryButton
label={data.inProgress ? 'Continue Course' : 'Start Course'}
variant={VARIANTS.OUTLINED}
className="rounded-none text-[#0233BD]"
onClick={() => gotoCourse(data.title)}
/>
</span>
</div>
</div>
{/each}
</div>
{:else}
<Box className="flex flex-col items-center mt-2">
<CoursesEmptyIcon />
<h3 class="text-center">You haven't started any course yet</h3>
<p class="w-[70%] md:w-[35%] text-center">
Once you start a course, your progress will reflect here
</p>
</Box>
{/if}
</section>
src/lib/components/LMS/components/Completed.svelte
+70
View File
@@ -0,0 +1,70 @@
<script>
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { courseCompleted } from './store';
const getCourse = () => {
goto(`/courses/${title}`);
};
</script>
<section>
{#if courseCompleted.length > 0}
<div
class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
>
{#each courseCompleted as data}s
<div
class="w-80 min-h-[350px] flex items-start justify-start flex-col border rounded mr-2 mb-5 border-gray-200"
>
<div class="w-full h-[180px]">
<img src={data.src} alt="course" class="w-full h-full object-cover" />
</div>
<div class="w-full p-3">
<p
class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] dark:text-white py-1"
>
{data.title}
</p>
<p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
{data.description}
</p>
<p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
<span
class="flex flex-col-reverse lg:flex-row items-start lg:items-center gap-2 justify-between"
>
<span>
<p>{data.lessons} lessons</p>
{#if data.inProgress}
<div class="flex items-center gap-2">
<div class=" relative bg-[#EAEAEA] w-full h-1">
<div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
</div>
<p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
</div>
{/if}
</span>
<PrimaryButton
label={data.inProgress ? 'Continue Course' : 'Start Course'}
variant={VARIANTS.OUTLINED}
className="rounded-none text-[#0233BD]"
onClick={getCourse}
/>
</span>
</div>
</div>
{/each}
</div>
{:else}
<Box className="flex flex-col items-center mt-2">
<CoursesEmptyIcon />
<h3 class="text-center">No courses completed yet</h3>
<p class="w-[70%] md:w-[35%] text-center">
Courses you complete will appear here. We believe in you , finish hard 💪🏾.
</p>
</Box>
{/if}
</section>
src/lib/components/LMS/components/InProgress.svelte
+67
View File
@@ -0,0 +1,67 @@
<script>
import { goto } from '$app/navigation';
import Box from '$lib/components/Box/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { mockData, courseInProgress } from './store';
const gotoCourse = (title) => {
goto(`/courses/${title}`);
};
</script>
<section>
{#if courseInProgress.length > 0}
<div
class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
>
{#each courseInProgress as data}
<div
class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
>
<img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
<div class="w-full p-3">
<p
class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
>
{data.title}
</p>
<p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
{data.description}
</p>
<p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
<span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
<span>
<p>{data.lessons} lessons</p>
{#if data.inProgress}
<div class="flex items-center gap-2">
<div class=" relative bg-[#EAEAEA] w-full h-1">
<div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
</div>
<p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
</div>
{/if}
</span>
<PrimaryButton
label={data.inProgress ? 'Continue Course' : 'Start Course'}
variant={VARIANTS.OUTLINED}
className="rounded-none text-[#0233BD]"
onClick={() => gotoCourse(data.title)}
/>
</span>
</div>
</div>
{/each}
</div>
{:else}
<Box className="flex flex-col items-center mt-2">
<CoursesEmptyIcon />
<h3 class="text-center">No course progress yet</h3>
<p class="w-[70%] md:w-[35%] text-center">
Once you start a course, your progress will reflect here
</p>
</Box>
{/if}
</section>
src/lib/components/LMS/components/Learning.svelte
+21 -28
View File
@@ -1,52 +1,39 @@
<script>
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import { goto } from '$app/navigation';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { course } from '$lib/components/Course/store';
import Box from '$lib/components/Box/index.svelte';
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
import { courseInProgress } from './store';
const mockData = [
{
title: 'Colorful digital painting',
description: 'Learn the basics of figma and start design web apps for the world ...',
src: '/painting.png',
progress: 'w-[30%]'
},
{
title: 'Photo editing 101',
description: 'Learn the different techniques to edit photos using Adobe Lightroom.',
src: '/digital.png',
progress: 'w-[45%]'
}
];
const gotoCourse = (title) => {
goto(`/courses/${title}`);
};
</script>
<section class="h-full mt-10 mb-20 xl:mt-2">
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
<Box
className="w-full border-2 border-[#EAEAEA] dark:bg-gray-700 h-[516px] overflow-y-auto gap-10 rounded"
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
>
{#if courseInProgress === false}
<div class="flex flex-col items-center">
<CoursesEmptyIcon />
<h3 class="">No courses progress yet</h3>
<p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
</div>
{:else}
<div class="w-full h-full flex flex-col justify-start">
{#each mockData as data, index}
{#if courseInProgress.length > 0}
<div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
{#each courseInProgress as data, index}
<div class="p-5">
<span class="flex flex-col md:flex-row gap-3 items-start pb-5">
<img src={data.src} alt="course" class="hidden md:block md:w-[60px] md:h-[60px]" />
<div class="w-full">
<p class="text-base font-semibold dark:text-white">{data.title}</p>
<p class="text-xs font-normal text-[#656565] dark:text-white">{data.description}</p>
<p class="line-clamp-2 text-xs font-normal text-[#656565] dark:text-white">
{data.description}
</p>
</div>
<PrimaryButton
label="continue"
label="Continue"
variant={VARIANTS.OUTLINED}
className="rounded-none text-[#0233BD]"
onClick={() => gotoCourse(data.title)}
/>
</span>
<div class="relative bg-[#EAEAEA] w-full h-1">
@@ -55,6 +42,12 @@
</div>
{/each}
</div>
{:else}
<div class="flex flex-col items-center">
<CoursesEmptyIcon />
<h3 class="text-center">No courses progress yet</h3>
<p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
</div>
{/if}
</Box>
</div>
</section>
src/lib/components/LMS/components/Student.svelte
+6 -7
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { InlineCalendar, Datepicker } from 'svelte-calendar';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import { isMobile } from '$lib/utils/store/useMobile';
import { formatDate } from '$lib/utils/functions/routes/dashboard';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -10,8 +9,8 @@
const theme = {
calendar: {
width: '22em',
height: '100%',
width: '250px',
height: '200px',
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
colors: {
background: {
@@ -31,10 +30,10 @@
<section class="w-full h-full mt-2">
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
<Box
className="p-5 border-2 border-[#EAEAEA] dark:bg-gray-700 gap-5 rounded w-full h-[516px] overflow-y-auto flex flex-col justify-start"
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 rounded w-full h-fit xl:h-[516px] p-3"
>
<div class="w-full hidden xl:flex items-center justify-center">
<div class="w-full h-fit hidden xl:flex items-center justify-center">
<InlineCalendar bind:store {theme} />
</div>
{#if $isMobile}
@@ -76,5 +75,5 @@
{:else}
<p>No Lesson on this day</p>
{/if}
</Box>
</div>
</section>
src/lib/components/LMS/components/store.js
+42 -1
View File
@@ -1 +1,42 @@
export const courseInProgress = false;
export const mockData = [
{
title: 'Photo editing 101',
description:
'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
author: 'Derrick Amenuvue',
lessons: 8,
inProgress: true,
completed: false,
src: '/digital.svg',
progress: 'w-[45%]',
progressRate: 45
},
{
title: 'Colorful digital painting',
description:
'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
author: 'Derrick Amenuvue',
inProgress: true,
completed: false,
lessons: 5,
src: '/painting.svg',
progress: 'w-[30%]',
progressRate: 45
},
{
title: 'AI for dummys',
description:
'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
author: 'Derrick Amenuvue',
inProgress: false,
completed: false,
lessons: 18,
src: '/digital.svg',
progress: 'w-[45%]',
progressRate: 45
}
];
export const courseInProgress = mockData.filter((course) => course.inProgress);
export const courseCompleted = mockData.filter((course) => course.completed);
export const totalCourses = mockData.length;
export const progressPercentage = Math.round((courseInProgress.length / totalCourses) * 100);
src/lib/components/Tabs/index.svelte
+46 -28
View File
@@ -8,34 +8,52 @@
<div class="w-full flex flex-col">
<div class="flex items-center border-b-2 w-full">
{#each tabs as tab}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-4 gap-3 items-center">
{#if tab.icon}
<svelte:component this={tab.icon} />
{/if}
{tab.label}
{#if typeof tab.badgeValue === 'number'}
<TextChip
value={tab.badgeValue}
size="sm"
shape="rounded-full"
className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
/>
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{#if !tab.icon && !tab.badgeValue}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
on:click={onChange(tab.value)}
>
<div class="flex items-center justify-center w-full text-center">
{tab.label}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{:else}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-4 gap-3 items-center">
{#if tab.icon}
<svelte:component this={tab.icon} />
{/if}
{tab.label}
{#if typeof tab.badgeValue === 'number'}
<TextChip
value={tab.badgeValue}
size="sm"
shape="rounded-full"
className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
/>
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{/if}
{/each}
</div>
src/routes/courses/[id]/lessons/+page.svelte
+61 -26
View File
@@ -1,6 +1,4 @@
<script>
import PageBody from '$lib/components/PageBody/index.svelte';
import TextChip from '$lib/components/Chip/Text.svelte';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { dndzone } from 'svelte-dnd-action';
@@ -11,6 +9,7 @@
import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
import Video from 'carbon-icons-svelte/lib/Video.svelte';
import WatsonHealthTextAnnotationToggle from 'carbon-icons-svelte/lib/WatsonHealthTextAnnotationToggle.svelte';
import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import Box from '$lib/components/Box/index.svelte';
@@ -28,6 +27,8 @@
handleDelete
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course, setCourse, group } from '$lib/components/Course/store';
import PageBody from '$lib/components/PageBody/index.svelte';
import TextChip from '$lib/components/Chip/Text.svelte';
export let data;
const { courseId } = data;
@@ -135,7 +136,7 @@
{#each $lessons as lesson (lesson.id)}
<div
bind:this={ref}
class="sm:h-48 md:h-40 lg:h-32 relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
>
<div class="mr-5">
<TextChip
@@ -173,13 +174,18 @@
<div
class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-2 w-4/5"
>
<div class="mb-3 lg:mb-0">
<div class="lg:mb-0">
{#if lessonEditing === lesson.id}
<Select bind:value={lesson.profile} options={$group.tutors} labelKey="fullname" />
<Select
bind:value={lesson.profile}
options={$group.tutors}
labelKey="fullname"
className="sm:my-1 w-[100%]"
/>
{:else if !lesson.profile}
<p class="dark:text-white ml-2 text-sm">No tutor added</p>
<p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
{:else}
<a href="." class="flex items-center hover:underline">
<a href="." class="flex items-center hover:underline mb-2">
<img
alt="Placeholder"
class="block rounded-full"
@@ -194,20 +200,22 @@
{/if}
</div>
<div class="flex items-center mb-3 lg:mb-0">
<div class="flex items-center lg:mb-0">
{#if lessonEditing === lesson.id}
<input
type="date"
name="lesson-date-picker"
class="p-2 m-2 rounded-md w-40"
class="p-2 my-2 rounded-md sm:w-[179px]"
value={formatDate(lesson.lesson_at)}
on:input={(e) => (lesson.lesson_at = e.target.value)}
/>
{:else}
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="dark:text-white text-sm ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
<div class="flex mb-2">
<Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
<p class="dark:text-white text-sm ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
</div>
{/if}
</div>
@@ -216,24 +224,26 @@
<TextField
bind:value={lesson.call_url}
autofocus={true}
className="w-40"
className="w-[179px]"
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
{:else}
<Video size={20} class="carbon-icon text-gray-400 dark:text-white" />
<a
class="text-sm ml-2 text-blue-600"
href={lesson.call_url || '#'}
target="_blank"
>
{lesson.call_url ? 'Join lesson' : 'No link'}
</a>
<div class="flex">
<Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
<a
class="text-sm ml-2 text-blue-600"
href={lesson.call_url || '#'}
target="_blank"
>
{lesson.call_url ? 'Join lesson' : 'No link'}
</a>
</div>
{/if}
</div>
</div>
<div class="flex flex-row absolute bottom-10 right-10">
<div class="success">
<div class="flex flex-row absolute sm:bottom-20 bottom-10 right-10">
<div class="success hidden md:block">
<IconButton
disabled={isStudent}
onClick={() => {
@@ -256,7 +266,7 @@
</div>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="">
<div class="hidden md:block">
{#if lessonEditing === lesson.id}
<IconButton
onClick={() => {
@@ -278,12 +288,37 @@
</RoleBasedSecurity>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="">
<div class="hidden md:block">
<IconButton onClick={handleDelete(lesson.id)}>
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
</RoleBasedSecurity>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<OverflowMenu size="xl" class="block md:hidden absolute right-10 bottom-4 pl-4">
<OverflowMenuItem
disabled={isStudent}
text={lesson.is_unlocked ? 'Lock' : 'Unlock'}
on:click={() => {
lesson.is_unlocked = !lesson.is_unlocked;
handleSaveLesson(lesson, $course.id);
}}
/>
<OverflowMenuItem
text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
on:click={() => {
if (lessonEditing === lesson.id) {
lessonEditing = null;
handleSaveLesson(lesson, $course.id);
} else {
lessonEditing = lesson.id;
}
}}
/>
<OverflowMenuItem danger text="Delete" on:click={handleDelete(lesson.id)} />
</OverflowMenu>
</RoleBasedSecurity>
</div>
</div>
</div>
src/routes/lms/+page.svelte
+61 -53
View File
@@ -1,7 +1,11 @@
<script>
import Student from '$lib/components/LMS/components/Student.svelte';
import Learning from '$lib/components/LMS/components/Learning.svelte';
import { courseInProgress } from '$lib/components/LMS/components/store';
import {
courseInProgress,
totalCourses,
progressPercentage
} from '$lib/components/LMS/components/store';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -12,58 +16,62 @@
<title>Student Dashboard - ClassroomIO</title>
</svelte:head>
<section class="m-5 w-[calc(100vw - 300px)] h-full gap-5">
<h1 class="text-3xl font-semibold">Dashboard</h1>
<div
class="w-full h-fit lg:h-[265px] flex items-center justify-between p-2 md:p-5 lg:p-10 rounded-md bg-[#042172] my-2"
>
<span>
<p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
Today is another day to bring you closer to your learning goals. Don’t give up, the more you
learn the better you get.
</p>
<PrimaryButton
label="Start learning"
variant={VARIANTS.CONTAINED_WHITE}
className="bg-white text-blue-800"
onClick={() => goto('/lms/mylearning')}
/>
</span>
<img
src="/images/student-learning.svg"
alt="student Learning Pictogram"
class="hidden md:block md:w-20 md:h-16 lg:w-[275px] lg:h-[205px]"
/>
</div>
<main class="flex w-full h-full flex-col xl:flex-row gap-5">
<div class="w-full h-full">
<Student />
</div>
<div class="w-full h-full">
<Learning />
</div>
<Box
className="w-full xl:w-[400px] h-[516px] overflow-y-auto bg-[#F5F8FE] dark:bg-gray-700 flex items-center justify-center my-20 xl:mt-11 p-2"
<section class="max-w-[1240px] gap-5 mx-auto">
<div class="m-5">
<h1 class="text-3xl font-semibold">Dashboard</h1>
<div
class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-[#042172] my-2"
>
<div
class="w-full h-full flex flex-col md:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
>
<div>
<img src="/images/target.svg" alt="student Learning score" />
</div>
<span class="text-center xl:text-start">
<p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
{#if courseInProgress}
<p class="text-xs font-normal text-[#656565] dark:text-white">2/15 lessons completed</p>
{:else}
<p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
{/if}
</span>
<h1 class="text-5xl md:text-7xl font-bold text-[#262626] dark:text-white my-0">
{courseInProgress ? 1 : 0} %
</h1>
<span>
<p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
Today is another day to bring you closer to your learning goals. Don’t give up, the more
you learn the better you get.
</p>
<PrimaryButton
label="Start learning"
variant={VARIANTS.CONTAINED_WHITE}
className="bg-white text-blue-800"
onClick={() => goto('/lms/mylearning')}
/>
</span>
<img
src="/images/student-learning.svg"
alt="student Learning Pictogram"
class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
/>
</div>
<main class="flex w-full h-full flex-col xl:flex-row xl:gap-5">
<div class="w-full h-full">
<Student />
</div>
</Box>
</main>
<div class="w-full h-full">
<Learning />
</div>
<div
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"
>
<div>
<img src="/images/target.svg" alt="student Learning score" />
</div>
<span class="text-center xl:text-start">
<p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
{#if courseInProgress.length > 0}
<p class="text-xs font-normal text-[#656565] dark:text-white">
{courseInProgress.length}/{totalCourses} lessons in progress
</p>
{:else}
<p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
{/if}
</span>
<h1 class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0">
{progressPercentage} %
</h1>
</div>
</div>
</main>
</div>
</section>
src/routes/lms/mylearning/+page.svelte
+54 -1
View File
@@ -1 +1,54 @@
My Learning
<script>
import TextField from '$lib/components/Form/TextField.svelte';
import { Search } from 'carbon-components-svelte';
import AllLearning from '$lib/components/LMS/components/AllLearning.svelte';
import Completed from '$lib/components/LMS/components/Completed.svelte';
import InProgress from '$lib/components/LMS/components/InProgress.svelte';
import Tabs from '$lib/components/Tabs/index.svelte';
import TabContent from '$lib/components/TabContent/index.svelte';
// let tabs = CONSTANTS.tabs;
const tabs = [
{
label: 'All',
value: 1
},
{
label: 'In progress',
value: 2
},
{
label: 'Complete',
value: 3
}
];
let currentTab = tabs[0].value;
const onChange =
(tab = 0) =>
() =>
(currentTab = tab);
</script>
<section class="max-w-[1240px] mx-auto">
<div class="m-2 md:m-5">
<div role="searchbox" class=" bg-gray-100 w-full md:w-[60%] lg:w-[30%]">
<Search placeholder="Search courses" class="dark:text-black" />
</div>
<h1 class="text-3xl font-semibold my-4">My Learning</h1>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<AllLearning />
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
<InProgress />
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
<Completed />
</TabContent>
</slot:fragment>
</Tabs>
</div>
</section>
src/routes/lms/reviews/+page.svelte
-1
View File
@@ -1 +0,0 @@
reviews page
src/routes/org/[slug]/+page.svelte
+1 -1
View File
@@ -207,7 +207,7 @@
{/each}
</div>
<div class="flex flex-wrap">
<div class="flex flex-wrap mt-5">
<!-- Your Schedule -->
<div>
<p class="dark:text-white font-bold mb-7">Your Schedule</p>
static/digital.svg
+10
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

static/painting.svg
+10
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB