CLASSROOMIO-T-146:Made the course page responsive
CLASSROOMIO-T-146:Made updates to the code following the reviews CLASSROOMIO-T-146:Made updates to the Z-Index Merge branch 'main' into CLASSROOMIO-T-146 Merge branch 'main' into CLASSROOMIO-T-146 CLASSROOMIO-T-146:Made the course page responsive CLASSROOMIO-T-146:working on the course page responsiveness Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-146:Making the course page responsive CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: All done and ready CLASSROOMIO-T-145: Fixed the Z-index issue Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard Merge branch 'main' into CLASSROOMIO-T-145 CLASSROOMIO-T-145:Made the LMS dashboard responsive Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com> Merge-request: CLASSROOMIO-MR-73 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
emmanuel
@@ -315,14 +315,14 @@
|
||||
{#if !isQuizPage($page.url.pathname)}
|
||||
<OrgSideBar />
|
||||
{/if}
|
||||
<div class="org-slot w-full bg-white dark:bg-gray-800">
|
||||
<div class="org-slot bg-white dark:bg-gray-800 w-full">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{:else if isLMSPage($page.url.pathname)}
|
||||
<div class="org-root w-full flex items-center justify-between">
|
||||
<LMSSideBar />
|
||||
<div class="org-slot w-full bg-white dark:bg-gray-800">
|
||||
<div class="org-slot bg-white dark:bg-gray-800 w-full">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -138,77 +138,80 @@
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
<PageNav title="Attendance" />
|
||||
|
||||
<section class="mx-9 my-5">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div class="flex">
|
||||
<p class="flex items-center mr-5">
|
||||
<Checkbox checked disabled /> Present
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<Checkbox disabled /> Absent
|
||||
</p>
|
||||
<PageBody width="w-full max-w-6xl md:w-11/12">
|
||||
<section class="flex items-center mx-2 lg:mx-9 my-5">
|
||||
<div
|
||||
class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
|
||||
>
|
||||
<div class="flex">
|
||||
<p class="flex items-center mr-5">
|
||||
<Checkbox checked disabled /> Present
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<Checkbox disabled /> Absent
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Search
|
||||
class="dark:text-slate-950"
|
||||
placeholder="Search students"
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Search
|
||||
class="dark:text-slate-950"
|
||||
placeholder="Search students"
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="my-5 mx-9">
|
||||
<StructuredList class="m-0">
|
||||
<!-- Moved the lesson headers outside the students loop -->
|
||||
<StructuredListHead class="bg-primary-100">
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
|
||||
{#each $lessons as lesson, index}
|
||||
<StructuredListCell head class="text-primary-600 py-3"
|
||||
>Lesson 0{getLectureNo(index + 1)}</StructuredListCell
|
||||
>
|
||||
{/each}
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
|
||||
{#each searchStudents(searchValue) as student}
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>
|
||||
<div class="w-1/4 flex items-center">
|
||||
<p class="dark:text-white font-semibold">
|
||||
{student.profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
</StructuredListCell>
|
||||
{#each $lessons as lesson}
|
||||
<StructuredListCell class="">
|
||||
<Checkbox
|
||||
class={isStudent && 'cursor-not-allowed'}
|
||||
disabled={isStudent}
|
||||
checked={$attendance[student.id]
|
||||
? $attendance[student.id][lesson.id]
|
||||
? $attendance[student.id][lesson.id].is_present
|
||||
: false
|
||||
: false}
|
||||
on:change={(e) => handleAttendanceChange(e, student, lesson)}
|
||||
/>
|
||||
</StructuredListCell>
|
||||
<section class="my-5 mx-2 lg:mx-9">
|
||||
<StructuredList class="m-0 relative">
|
||||
<!-- Moved the lesson headers outside the students loop -->
|
||||
<StructuredListHead class="bg-primary-100">
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
|
||||
{#each $lessons as lesson, index}
|
||||
<StructuredListCell head class="text-primary-600 py-3"
|
||||
>Lesson 0{getLectureNo(index + 1)}</StructuredListCell
|
||||
>
|
||||
{/each}
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
{/each}
|
||||
</StructuredList>
|
||||
{#if students.length === 0}
|
||||
<div>
|
||||
<Box>
|
||||
</StructuredListHead>
|
||||
|
||||
{#each searchStudents(searchValue) as student}
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>
|
||||
<div class="w-1/4 flex items-center">
|
||||
<p class="dark:text-white font-semibold">
|
||||
{student.profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
</StructuredListCell>
|
||||
{#each $lessons as lesson}
|
||||
<StructuredListCell class="">
|
||||
<Checkbox
|
||||
class={isStudent && 'cursor-not-allowed'}
|
||||
disabled={isStudent}
|
||||
checked={$attendance[student.id]
|
||||
? $attendance[student.id][lesson.id]
|
||||
? $attendance[student.id][lesson.id].is_present
|
||||
: false
|
||||
: false}
|
||||
on:change={(e) => handleAttendanceChange(e, student, lesson)}
|
||||
/>
|
||||
</StructuredListCell>
|
||||
{/each}
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
{/each}
|
||||
</StructuredList>
|
||||
{#if students.length === 0}
|
||||
<Box className="h-[300px] w-full">
|
||||
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
|
||||
<h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-white text-center">No Student Added</h3>
|
||||
</Box>
|
||||
</div>
|
||||
{/if}
|
||||
<Pagination totalItems={10} pageSizes={[10, 15, 20]} />
|
||||
</section>
|
||||
{/if}
|
||||
{#if students.length !== 0}
|
||||
<Pagination totalItems={10} pageSizes={[10, 15, 20]} />
|
||||
{/if}
|
||||
</section>
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="root absolute inset-0 flex justify-center items-center z-50 bg-white"
|
||||
class="absolute inset-0 z-50 bg-white"
|
||||
in:fly={{ y: 500, duration: 500 }}
|
||||
out:fly={{ y: 500, duration: 500 }}
|
||||
>
|
||||
<Editor {courseId} bind:course={courseData} />
|
||||
<div class="rightBar" class:isMobile={$isMobile}>
|
||||
<div class="rightBar">
|
||||
<CourseLandingPage bind:courseData />
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,13 +43,8 @@
|
||||
<style>
|
||||
.rightBar {
|
||||
flex-grow: 1;
|
||||
width: calc(100% - 360px);
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.rightBar.isMobile {
|
||||
margin-left: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -321,12 +321,12 @@
|
||||
</div>
|
||||
{:else}
|
||||
<Box>
|
||||
<div class="flex justify-between flex-col items-center w-96">
|
||||
<div class="flex justify-between flex-col items-center w-[90%] md:w-96">
|
||||
<img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
|
||||
<h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
|
||||
<p class="text-sm text-center text-slate-500">
|
||||
Share your knowledge with the world by creating engaging lessons. Start by clicking on
|
||||
the New Lesson button.
|
||||
the Add button.
|
||||
</p>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
@@ -4,17 +4,19 @@
|
||||
import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
|
||||
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import { Loading } from 'carbon-components-svelte';
|
||||
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
|
||||
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
|
||||
import MODES from '$lib/utils/constants/mode.js';
|
||||
import MODES from '$lib/utils/constants/mode';
|
||||
import { setCourse, course } from '$lib/components/Course/store';
|
||||
import Download from 'carbon-icons-svelte/lib/Download.svelte';
|
||||
|
||||
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
|
||||
import { apps } from '$lib/components/Apps/store';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import {
|
||||
lesson,
|
||||
lessons,
|
||||
@@ -144,6 +146,10 @@
|
||||
}));
|
||||
}
|
||||
|
||||
const toggleApps = () => {
|
||||
$apps.open = !$apps.open;
|
||||
};
|
||||
|
||||
function toggleMode() {
|
||||
prevMode = mode;
|
||||
mode = mode === MODES.edit ? MODES.view : MODES.edit;
|
||||
@@ -176,9 +182,20 @@
|
||||
<svelte:fragment slot="widget">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
{#if data.isMaterialsTabActive}
|
||||
<div class="flex items-center">
|
||||
<div class="lg:hidden">
|
||||
<IconButton onClick={toggleApps} buttonClassName="">
|
||||
<OverflowMenuVertical size={24} />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div
|
||||
class={`flex-row ${
|
||||
$apps.dropdown && $apps.open
|
||||
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-gray-800 p-3 lg:p-0'
|
||||
: 'hidden'
|
||||
} lg:flex items-center`}
|
||||
>
|
||||
<PrimaryButton
|
||||
className="mr-2"
|
||||
className="mb-2 lg:mb-0 mr-2"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={downloadLesson}
|
||||
{isLoading}
|
||||
@@ -207,7 +224,7 @@
|
||||
<PageBody>
|
||||
<Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
|
||||
|
||||
<div class="w-full flex flex-row-reverse">
|
||||
<div class="w-full flex flex-row-reverse mt-10">
|
||||
<PrimaryButton
|
||||
onClick={markLessonComplete}
|
||||
isLoading={isMarkingComplete}
|
||||
|
||||
@@ -8,10 +8,7 @@
|
||||
import { ROLE } from '$lib/utils/constants/roles';
|
||||
import { setCourse, course, group } from '$lib/components/Course/store';
|
||||
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
|
||||
import {
|
||||
fetchCourse,
|
||||
fetchExercisesByMarks,
|
||||
} from '$lib/utils/services/courses';
|
||||
import { fetchCourse, fetchExercisesByMarks } from '$lib/utils/services/courses';
|
||||
import { getLectureNo } from '$lib/components/Course/function';
|
||||
import { fetchMarks } from '$lib/utils/services/marks';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
@@ -19,10 +16,8 @@
|
||||
export let data;
|
||||
const { courseId } = data;
|
||||
|
||||
let borderBottomGrey =
|
||||
'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
|
||||
let borderleftGrey =
|
||||
'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
|
||||
let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
|
||||
let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
|
||||
let students = [];
|
||||
let isStudent = false;
|
||||
|
||||
@@ -52,11 +47,11 @@
|
||||
if (studentMarksByExerciseId[groupmember_id]) {
|
||||
studentMarksByExerciseId[groupmember_id] = {
|
||||
...studentMarksByExerciseId[groupmember_id],
|
||||
[exercise_id]: total_points_gotten,
|
||||
[exercise_id]: total_points_gotten
|
||||
};
|
||||
} else {
|
||||
studentMarksByExerciseId[groupmember_id] = {
|
||||
[exercise_id]: total_points_gotten,
|
||||
[exercise_id]: total_points_gotten
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -70,11 +65,11 @@
|
||||
if (lessonMapping[lesson_id]) {
|
||||
lessonMapping[lesson_id] = {
|
||||
...lessonMapping[lesson_id],
|
||||
[exercise_id]: { title: exercise_title, points },
|
||||
[exercise_id]: { title: exercise_title, points }
|
||||
};
|
||||
} else {
|
||||
lessonMapping[lesson_id] = {
|
||||
[exercise_id]: { title: exercise_title, points },
|
||||
[exercise_id]: { title: exercise_title, points }
|
||||
};
|
||||
}
|
||||
});
|
||||
@@ -82,20 +77,16 @@
|
||||
|
||||
$: {
|
||||
students = isStudent
|
||||
? $group.people.filter(
|
||||
(person) => !!person.profile && person.profile.id === $profile.id
|
||||
)
|
||||
: $group.people.filter(
|
||||
(person) => !!person.profile && person.role_id === ROLE.STUDENT
|
||||
);
|
||||
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
|
||||
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
|
||||
}
|
||||
</script>
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
<PageNav title="Marks" />
|
||||
|
||||
<PageBody width="w-11/12">
|
||||
<div class="table rounded-md border border-gray-300 w-auto">
|
||||
<PageBody width="w-full max-w-6xl md:w-11/12">
|
||||
<div class="table rounded-md border border-gray-300 w-full">
|
||||
<div class="flex items-center {borderBottomGrey}">
|
||||
<div class="box flex items-center p-3">
|
||||
<p class="dark:text-white w-40">Student</p>
|
||||
@@ -111,8 +102,7 @@
|
||||
>
|
||||
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
|
||||
<p
|
||||
class="col text-sm dark:text-white {index &&
|
||||
borderleftGrey}"
|
||||
class="col text-sm dark:text-white {index && borderleftGrey}"
|
||||
title={lessonMapping[lesson.id][exerciseId].title}
|
||||
>
|
||||
{lessonMapping[lesson.id][exerciseId].title}
|
||||
@@ -129,9 +119,7 @@
|
||||
</div>
|
||||
|
||||
{#each students as student}
|
||||
<div
|
||||
class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
|
||||
>
|
||||
<div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
|
||||
<div class="w-40 flex items-center">
|
||||
<img
|
||||
alt="Student avatar"
|
||||
@@ -143,11 +131,7 @@
|
||||
{student.profile.fullname}
|
||||
</p>
|
||||
<p class="dark:text-white">
|
||||
{`${
|
||||
student.assigned_student_id
|
||||
? '#' + student.assigned_student_id
|
||||
: '-'
|
||||
}`}
|
||||
{`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -176,9 +160,7 @@
|
||||
{:else}
|
||||
<Box>
|
||||
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
|
||||
<h3 class="text-3xl text-gray-500 dark:text-white">
|
||||
No Student Added
|
||||
</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
|
||||
</Box>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import TextChip from '$lib/components/Chip/Text.svelte';
|
||||
import ComingSoon from '$lib/components/ComingSoon/index.svelte';
|
||||
import Filter from 'carbon-icons-svelte/lib/Filter.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import {
|
||||
@@ -17,6 +18,7 @@
|
||||
import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
|
||||
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import Select from '$lib/components/Form/Select.svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
@@ -135,138 +137,148 @@
|
||||
</RoleBasedSecurity>
|
||||
</slot:fragment>
|
||||
</PageNav>
|
||||
<section class="my-5 mx-9">
|
||||
<div class="flex flex-row flex-end justify-end items-center mb-7">
|
||||
<div class="mr-5 w-80">
|
||||
<Search
|
||||
class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
|
||||
placeholder="Search people"
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<Select bind:value={filterBy} options={ROLES} className="dark:text-black mt-3 w-20" />
|
||||
<!-- <select bind:value={filterBy} class="mt-3">
|
||||
{#each ROLES as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select> -->
|
||||
</div>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<p class="dark:text-white hidden lg:block text-lg w-20" />
|
||||
</RoleBasedSecurity>
|
||||
</div>
|
||||
|
||||
<StructuredList class="m-0">
|
||||
<StructuredListHead
|
||||
class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
|
||||
<PageBody width="w-full max-w-6xl md:w-11/12">
|
||||
<section class="my-5 mx-2 md:mx-9">
|
||||
<div
|
||||
class="flex flex-col md:flex-row flex-end gap-2 justify-end items-start md:items-center mb-7"
|
||||
>
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Name</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Role</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Action</StructuredListCell
|
||||
>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<p class="dark:text-white hidden lg:block text-lg w-20" />
|
||||
</RoleBasedSecurity>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<div class="max-w-[320px]">
|
||||
<Search
|
||||
class="dark:text-slate-950 border-0 bg-zinc-100 w-full"
|
||||
placeholder="Search people"
|
||||
bind:value={searchValue}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<Select
|
||||
bind:value={filterBy}
|
||||
options={ROLES}
|
||||
className="dark:text-black mt-3 max-w-[80px]"
|
||||
/>
|
||||
<!-- <select bind:value={filterBy} class="mt-3">
|
||||
{#each ROLES as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select> -->
|
||||
</div>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<p class="dark:text-white hidden lg:block text-lg w-20" />
|
||||
</RoleBasedSecurity>
|
||||
</div>
|
||||
|
||||
{#each filterPeople(searchValue, people) as person}
|
||||
<StructuredListBody>
|
||||
<StructuredListRow class="relative">
|
||||
<!-- first column -->
|
||||
<StructuredListCell class="w-3/6">
|
||||
{#if person.profile}
|
||||
<div class="flex items-center absolute bottom-3">
|
||||
<Avatar
|
||||
src={person.profile.avatar_url}
|
||||
name={person.profile.fullname}
|
||||
width="w-8"
|
||||
height="h-8"
|
||||
className="mr-3"
|
||||
/>
|
||||
<div class="flex items-center">
|
||||
<div class="mr-2">
|
||||
<p class="dark:text-white text-base font-normal">
|
||||
{person.profile.fullname}
|
||||
</p>
|
||||
<p class="text-xs text-primary-600">
|
||||
{getEmail(person)}
|
||||
</p>
|
||||
</div>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<div class="hidden lg:flex lg:justify-between lg:items-center mr-2">
|
||||
<CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
|
||||
<StructuredList class="m-0">
|
||||
<StructuredListHead
|
||||
class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
|
||||
>
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Name</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Role</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Action</StructuredListCell
|
||||
>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<p class="dark:text-white hidden lg:block text-lg w-20" />
|
||||
</RoleBasedSecurity>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
|
||||
{#each filterPeople(searchValue, people) as person}
|
||||
<StructuredListBody>
|
||||
<StructuredListRow class="relative">
|
||||
<!-- first column -->
|
||||
<StructuredListCell class="w-4/6 md:w-3/6">
|
||||
{#if person.profile}
|
||||
<div class="flex items-start lg:items-center">
|
||||
<Avatar
|
||||
src={person.profile.avatar_url}
|
||||
name={person.profile.fullname}
|
||||
width="w-8"
|
||||
height="h-8"
|
||||
className="mr-3"
|
||||
/>
|
||||
<div class="flex flex-col lg:flex-row items-start lg:items-center">
|
||||
<div class="mr-2">
|
||||
<p class="dark:text-white text-base font-normal">
|
||||
{person.profile.fullname}
|
||||
</p>
|
||||
<p class="text-xs text-primary-600 line-clamp-1">
|
||||
{getEmail(person)}
|
||||
</p>
|
||||
</div>
|
||||
</RoleBasedSecurity>
|
||||
{#if person.profile_id == $profile.id}
|
||||
<ComingSoon label="You" />
|
||||
<div class="flex items-center">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<CopyButton
|
||||
text={getEmail(person)}
|
||||
feedback="Copied Email to clipboard"
|
||||
/>
|
||||
</RoleBasedSecurity>
|
||||
{#if person.profile_id == $profile.id}
|
||||
<ComingSoon label="You" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-start lg:items-center w-2/4">
|
||||
<TextChip
|
||||
value={person.email.substring(0, 2).toUpperCase()}
|
||||
className="bg-primary-200 text-black font-semibold text-xs mr-3"
|
||||
shape="rounded-full"
|
||||
/>
|
||||
<a
|
||||
href="mailto:{person.email}"
|
||||
class="text-md text-primary-600 mr-2 dark:text-white"
|
||||
>
|
||||
{person.email}
|
||||
</a>
|
||||
<div class="flex items-center justify-between">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
|
||||
</RoleBasedSecurity>
|
||||
|
||||
<TextChip
|
||||
value="Pending"
|
||||
className="text-xs bg-yellow-200 text-yellow-700 h-fit"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
|
||||
<!-- second column -->
|
||||
<StructuredListCell class="w-1/4 px-3">
|
||||
<p class=" dark:text-white font-normal text-center text-base w-1/4">
|
||||
{ROLE_LABEL[person.role_id]}
|
||||
</p>
|
||||
</StructuredListCell>
|
||||
|
||||
<!-- third column -->
|
||||
<StructuredListCell class="p-0 w-1/4">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<div class="hidden lg:flex lg:justify-between lg:items-center w-20">
|
||||
{#if person.profile_id !== $profile.id}
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
member = person;
|
||||
$deleteMemberModal.open = true;
|
||||
}}
|
||||
>
|
||||
<TrashCanIcon size={16} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center w-2/4 absolute bottom-3">
|
||||
<TextChip
|
||||
value={person.email.substring(0, 2).toUpperCase()}
|
||||
className="bg-primary-200 text-black font-semibold text-xs mr-3"
|
||||
shape="rounded-full"
|
||||
/>
|
||||
<a
|
||||
href="mailto:{person.email}"
|
||||
class="text-md text-primary-600 mr-2 dark:text-white"
|
||||
>
|
||||
{person.email}
|
||||
</a>
|
||||
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<div class="hidden lg:flex lg:justify-between lg:items-center w-20">
|
||||
<CopyButton text={getEmail(person)} feedback="Copied Email to clipboard" />
|
||||
</div>
|
||||
</RoleBasedSecurity>
|
||||
|
||||
<TextChip
|
||||
value="Pending"
|
||||
className="text-xs bg-yellow-200 text-yellow-700 h-fit"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
|
||||
<!-- second column -->
|
||||
<StructuredListCell class="w-1/4 py-4 px-3">
|
||||
<p class="dark:text-white font-normal text-base w-1/4 my-auto">
|
||||
{ROLE_LABEL[person.role_id]}
|
||||
</p>
|
||||
</StructuredListCell>
|
||||
|
||||
<!-- third column -->
|
||||
<StructuredListCell class="p-0 w-1/4">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<div class="hidden lg:flex lg:justify-between lg:items-center w-20">
|
||||
{#if person.profile_id !== $profile.id}
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
member = person;
|
||||
$deleteMemberModal.open = true;
|
||||
}}
|
||||
>
|
||||
<TrashCanIcon size={16} class="carbon-icon dark:text-white" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
</RoleBasedSecurity>
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
{/each}
|
||||
</StructuredList>
|
||||
<Pagination totalItems={10} pageSizes={[10, 15, 20]} />
|
||||
</section>
|
||||
</RoleBasedSecurity>
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
{/each}
|
||||
</StructuredList>
|
||||
<!-- <Pagination totalItems={10} pageSizes={[10, 15, 20]} /> -->
|
||||
</section>
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
|
||||
@@ -244,8 +244,8 @@
|
||||
<CourseContainer>
|
||||
<PageNav title="Submitted Exercises" />
|
||||
|
||||
<PageBody width="w-11/12 overflow-x-auto overflow-y-hidden">
|
||||
<div class="flex items-center w-full">
|
||||
<PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
|
||||
<div class="flex items-center w-full overflow-x-scroll">
|
||||
{#each sections as { id, title, items }, idx (id)}
|
||||
<div
|
||||
class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
|
||||
@@ -301,7 +301,7 @@
|
||||
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
|
||||
</p>
|
||||
</a>
|
||||
<p class="dark:text-white text-gray-500 dark:text-white text-xs">
|
||||
<p class="dark:text-white text-gray-500 text-xs">
|
||||
{item.submittedAt}
|
||||
</p>
|
||||
<!-- <div class="badge rounded-md px-2 bg-green-500 text-white">
|
||||
@@ -324,10 +324,15 @@
|
||||
.section {
|
||||
max-width: 355px;
|
||||
min-width: 355px;
|
||||
height: 80vh;
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 95%;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.section {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user