CLASSROOMIO-T-85:Developed the Dahshboard UI for the student LMS
CLASSROOMIO-T-85:Added the datepicker and also created the UI for when no course is in progress CLASSROOMIO-T-85:Changed the images to svg and moved them into the images folder in the static dir CLASSROOMIO-T-85:Developed the Dahsboard UI for the student LMS Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio CLASSROOMIO-T-27: Review Section for Instructors on landing page CLASSROOMIO-T-27: Remove unused variable Merge branch 'CLASSROOMIO-T-27' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-27 CLASSROOMIO-T-27: Complete reviews functionality CLASSROOMIO-T-27: Review Render Update CLASSROOMIO-T-27: - Resolved Feedbacks CLASSROOMIO-T-27: Fixed Ratings Data CLASSROOMIO-T-27: - Added Ratings Svg - Fixed avatar_url feedback CLASSROOMIO-T-27: Import Adjustment CLASSROOMIO-T-27: Code Review CLASSROOM-T-27: Added Add Review Functionality CLASSROOMIO-T-27: - Unresolved Review - Enhance Code Redability CLASSROOMIO-T-27: Completed the delete functionality CLASSROOMIO-T-27: Hide/Show functionality CLASSROOMIO-T-27: Double Quotation Update CLASSROOMIO-T-27: Testing toggle functinality CLASSROOMIO-T-27: Added the icons CLASSROOMIO-T-27: Completion of the hide/show functionality CLASSROOMIO-T-27: Display the store data on the review page for styling CLASSROOMIO-T-27: Styling of the review component & connecting it's data CLASSROOMIO-T-27: - Add ReviewsForm - Completion of the Reviews Form Structure/Styling CLASSROOMIO-T-27: Added a reviews modal CLASSROOMIO-T-27: Logic update for review section CLASSROOMIO-T-50: Logic for overlapping reviews CLASSROOMIO-T-27: - Completion of the structure & styling with mock data. - Addition of custom ratings assets CLASSROOMIO-T-27: - Review Section Code Structure - Import Profile Picture Assets Co-authored-by: Rotimi Best <[email protected]> Co-authored-by: Tunji Adeyemi <[email protected]> Co-authored-by: tunny17 <[email protected]> Merge-request: CLASSROOMIO-MR-22 Merged-by: Best Admin <[email protected]> CLASSROOMIO-T-62: Dark Mode Bug Fix CLASSROOMIO-T-62: Delete Unused class CLASSROOMIO-T-62: Dark Mode Bug Fix Co-authored-by: Tunji Adeyemi <[email protected]> Merge-request: CLASSROOMIO-MR-23 Merged-by: Best Admin <[email protected]> Co-authored-by: Ifeanyi Nwosu <[email protected]> Co-authored-by: Tunji Adeyemi <[email protected]> Co-authored-by: tunny17 <[email protected]> Merge-request: CLASSROOMIO-MR-37 Merged-by: Best Admin <[email protected]>
This commit is contained in:
tunny17
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
tunny17
Ifeanyi Nwosu
Rotimi Best
tunny17
Ifeanyi Nwosu
parent
ef29fb575f
commit
b83a396991
@@ -2,7 +2,14 @@
|
||||
export let color = 'currentColor';
|
||||
</script>
|
||||
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 22 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="dark"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
|
||||
@@ -2,7 +2,14 @@
|
||||
export let color = 'currentColor';
|
||||
</script>
|
||||
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
width="25"
|
||||
height="24"
|
||||
viewBox="0 0 25 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="dark"
|
||||
>
|
||||
<g clip-path="url(#clip0_3647_18153)">
|
||||
<path
|
||||
d="M24 15C24 15.5304 23.7893 16.0391 23.4142 16.4142C23.0391 16.7893 22.5304 17 22 17H10L6 21V5C6 4.46957 6.21071 3.96086 6.58579 3.58579C6.96086 3.21071 7.46957 3 8 3H22C22.5304 3 23.0391 3.21071 23.4142 3.58579C23.7893 3.96086 24 4.46957 24 5V15Z"
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
|
||||
<aside class=" root bg-gray-100 dark:bg-gray-700 h-full">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="border-b border-gray-200 pt-5 px-4">
|
||||
{#if $currentOrg.avatar_url}
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<script>
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
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%]'
|
||||
}
|
||||
];
|
||||
</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 h-full border-2 border-[#EAEAEA] gap-10 rounded">
|
||||
{#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}
|
||||
<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>
|
||||
</div>
|
||||
<PrimaryButton
|
||||
label="continue"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
className="rounded-none text-[#0233BD]"
|
||||
/>
|
||||
</span>
|
||||
<div class="relative bg-[#EAEAEA] w-full h-1">
|
||||
<div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Box>
|
||||
</section>
|
||||
@@ -0,0 +1,80 @@
|
||||
<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';
|
||||
|
||||
let store;
|
||||
|
||||
const theme = {
|
||||
calendar: {
|
||||
width: '22em',
|
||||
height: '100%',
|
||||
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
|
||||
colors: {
|
||||
background: {
|
||||
highlight: '#0F62FE'
|
||||
}
|
||||
},
|
||||
font: {
|
||||
regular: '0.7em',
|
||||
large: '0.9em'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// just copy and paste
|
||||
</script>
|
||||
|
||||
<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] gap-5 rounded w-full h-fit xl:h-full flex flex-col justify-start"
|
||||
>
|
||||
<div class="w-full hidden xl:flex items-center justify-center">
|
||||
<InlineCalendar bind:store {theme} />
|
||||
</div>
|
||||
{#if $isMobile}
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
>
|
||||
{formatDate($store?.selected)}
|
||||
</button>
|
||||
</Datepicker>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="xl:hidden dark:text-white font-bold m-5">
|
||||
{formatDate($store?.selected)}
|
||||
</p>
|
||||
{/if}
|
||||
{#if formatDate($store?.selected) == 'Today'}
|
||||
<span class="flex flex-col md:flex-row items-baseline justify-center gap-10 mt-5">
|
||||
<p class="text-xs font-normal text-[#656565] dark:text-white">2:30pm</p>
|
||||
<div class="flex flex-col items-start gap-4">
|
||||
<span>
|
||||
<p class="text-lg font-semibold text-[#262626] dark:text-white">
|
||||
The essence of design collaboration
|
||||
</p>
|
||||
<a href="#" class="text-sm font-normal text-[#0233BD] dark:text-white"
|
||||
>Figma Introduction</a
|
||||
>
|
||||
</span>
|
||||
<PrimaryButton
|
||||
label="Join Call"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
className="bg-transparent outline-1 outline-[#0233BD] text-[#0233BD] rounded-md hover:bg-[blue]"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{:else}
|
||||
<p>No Lesson on this day</p>
|
||||
{/if}
|
||||
</Box>
|
||||
</section>
|
||||
@@ -0,0 +1 @@
|
||||
export const courseInProgress = false;
|
||||
@@ -1,15 +1,69 @@
|
||||
<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 PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import Box from '$lib/components/Box/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { goto } from '$app/navigation';
|
||||
</script>
|
||||
|
||||
<section class="m-5 w-[calc(100vw - 250px)] h-full gap-5">
|
||||
<h1 class="text-3xl font-semibold">Dashboard</h1>
|
||||
<svelte:head>
|
||||
<title>Student Dashboard - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="w-full h-full flex flex-row gap-3">
|
||||
<div class="w-full h-full border-2 border-dashed flex items-center justify-center">
|
||||
<p>Student section</p>
|
||||
<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 border-2 border-dashed flex items-center justify-center">
|
||||
<p>Currently Learning</p>
|
||||
|
||||
<div class="w-full h-full">
|
||||
<Learning />
|
||||
</div>
|
||||
<Box
|
||||
className="w-full xl:w-[400px] h-full bg-[#F5F8FE] dark:bg-gray-500 flex items-center justify-center my-20 xl:mt-11 p-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>
|
||||
</div>
|
||||
</Box>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user