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
@@ -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;