CLASSROOMIO-T-86:Implemented the my learning page
Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com> Merge-request: CLASSROOMIO-MR-42 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Ifeanyi Nwosu
Ifeanyi Nwosu
parent
6253c4598e
commit
1649a703d8
+61
-53
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
reviews page
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user