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

CLASSROOMIO-T-108: Connect my learning page to BE

Browse Source
This commit is contained in:
Rotimi Best
2023-09-28 11:45:50 +01:00
parent 1b708211c7
commit acfd01316f
13 changed files with 147 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/LMS/components/AllLearning.svelte
-69
View File
@@ -1,69 +0,0 @@
<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-primary-700 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/InProgress.svelte
+12 -46
View File
@@ -1,14 +1,8 @@
<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}`);
};
import { courseInProgress } from './store';
import Card from '$lib/components/Courses/components/Card/index.svelte';
</script>
<section>
@@ -17,44 +11,16 @@
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-primary-700 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>
{#key data.id}
<Card
id={data.id}
bannerImage={data.src || '/images/classroomio-course-img-template.jpg'}
title={data.title}
description={data.description}
isLMS={true}
progressRate={data.progressRate}
/>
{/key}
{/each}
</div>
{:else}
src/lib/components/LMS/components/store.js
+3
View File
@@ -1,5 +1,6 @@
export const mockData = [
{
id: '1',
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 ...',
@@ -12,6 +13,7 @@ export const mockData = [
progressRate: 45
},
{
id: '2',
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 ...',
@@ -24,6 +26,7 @@ export const mockData = [
progressRate: 45
},
{
id: '3',
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 ...',