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]>
2023-08-10 12:23:10 +00:00
parent ef29fb575f
commit b83a396991
11 changed files with 235 additions and 10 deletions
@@ -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>