ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-41: Implement dark/light mode switch

Browse Source 
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <digdippa@gmail.com>
This commit is contained in:
Rotimi Best
2023-05-05 20:19:45 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 5f14b36ef8
commit 1388a41097
95 changed files with 611 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/courses/[id]/attendance.svelte
+10 -6
View File
@@ -136,9 +136,9 @@
<div
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<p class="w-1/4">Student</p>
<p class="dark:text-white w-1/4">Student</p>
{#each $lessons as lesson, index}
<p class="col" title={lesson.title}>
<p class="dark:text-white col" title={lesson.title}>
{getLectureNo(index + 1)}
</p>
{/each}
@@ -155,14 +155,16 @@
class="w-8 h-8 rounded-full mr-2"
/>
<div class="text-sm">
<p class="font-semibold">{student.profile.fullname}</p>
<p class="dark:text-white font-semibold">
{student.profile.fullname}
</p>
{#if student.assigned_student_id}
<p>#{student.assigned_student_id}</p>
<p class="dark:text-white">#{student.assigned_student_id}</p>
{/if}
</div>
</div>
{#each $lessons as lesson}
<p class="col">
<p class="dark:text-white col">
<input
class="form-radio {isStudent && 'cursor-not-allowed'}"
type="checkbox"
@@ -180,7 +182,9 @@
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No Student Added
</h3>
</Box>
{/each}
</div>
src/routes/courses/[id]/lessons/index.svelte
+8 -6
View File
@@ -198,7 +198,7 @@
</RoleBasedSecurity>
<div class="">
<h3 class="text-3xl font-bold">
<h3 class="dark:text-white text-3xl font-bold">
{getLessonOrder(lesson.id)}.
</h3>
</div>
@@ -206,7 +206,7 @@
{#if lessonEditing === lesson.id}
<TextField bind:value={lesson.title} autofocus={true} />
{:else}
<h3 class="text-2xl m-0 flex items-center">
<h3 class="dark:text-white text-2xl m-0 flex items-center">
<a
href={isStudent && !lesson.is_complete
? $page.path
@@ -237,7 +237,7 @@
labelKey="fullname"
/>
{:else if !lesson.profile}
<p class="ml-2 text-sm">No tutor added</p>
<p class="dark:text-white ml-2 text-sm">No tutor added</p>
{:else}
<a href="." class="flex items-center hover:underline">
<img
@@ -247,7 +247,7 @@
height="20"
src={lesson.profile.avatar_url}
/>
<p class="ml-2 text-sm">
<p class="dark:text-white ml-2 text-sm">
{lesson.profile.fullname}
</p>
</a>
@@ -265,7 +265,7 @@
/>
{:else}
<Time24 class="carbon-icon" />
<p class="text-md ml-2">
<p class="dark:text-white text-md ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
{/if}
@@ -303,7 +303,9 @@
</div>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No lesson added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No lesson added
</h3>
<img alt="No lesson added" src="/notfound2.gif" class="w-80" />
</Box>
{/each}
src/routes/courses/[id]/marks.svelte
+14 -9
View File
@@ -103,12 +103,12 @@
<div class="table rounded-md border border-gray-300 w-auto">
<div class="flex items-center {borderBottomGrey}">
<div class="box flex items-center p-3">
<p class="w-40">Student</p>
<p class="dark:text-white w-40">Student</p>
</div>
{#each $lessons as lesson, index}
{#if lessonMapping[lesson.id]}
<div class="box flex flex-col items-center {borderleftGrey}">
<p class="col lesson-number" title={lesson.title}>
<p class="dark:text-white col lesson-number" title={lesson.title}>
{getLectureNo(index + 1)}
</p>
<div
@@ -116,7 +116,8 @@
>
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
<p
class="col text-sm {index && borderleftGrey}"
class="col text-sm dark:text-white {index &&
borderleftGrey}"
title={lessonMapping[lesson.id][exerciseId].title}
>
{lessonMapping[lesson.id][exerciseId].title}
@@ -128,7 +129,7 @@
{/if}
{/each}
<div class="box flex items-center {borderleftGrey}">
<p class="w-20 text-center">Total</p>
<p class="dark:text-white w-20 text-center">Total</p>
</div>
</div>
@@ -143,8 +144,10 @@
class="w-8 h-8 rounded-full mr-2"
/>
<div class="text-sm">
<p class="font-semibold">{student.profile.fullname}</p>
<p>
<p class="dark:text-white font-semibold">
{student.profile.fullname}
</p>
<p class="dark:text-white">
{`${
student.assigned_student_id
? '#' + student.assigned_student_id
@@ -157,7 +160,7 @@
{#if lessonMapping[lesson.id]}
<div class="flex items-center">
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
<p class="col">
<p class="dark:text-white col">
{studentMarksByExerciseId[student.id]
? studentMarksByExerciseId[student.id][exerciseId] || '-'
: '-'}
@@ -169,7 +172,7 @@
<div class="w-20 flex items-center">
<div class="text-sm">
<p class="col">
<p class="dark:text-white col">
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
</p>
</div>
@@ -178,7 +181,9 @@
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No Student Added
</h3>
</Box>
{/each}
</div>
src/routes/courses/[id]/people.svelte
+11 -7
View File
@@ -136,12 +136,12 @@
<div
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<span class="w-1/4 text-center">ID</span>
<span class="dark:text-white w-1/4 text-center">ID</span>
<!-- <span class="flex-grow" /> -->
<p class="text-lg w-2/4">Name</p>
<p class="text-lg w-1/4 ">Role</p>
<p class="dark:text-white text-lg w-2/4">Name</p>
<p class="dark:text-white text-lg w-1/4">Role</p>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<p class="hidden lg:block text-lg w-20" />
<p class="dark:text-white hidden lg:block text-lg w-20" />
</RoleBasedSecurity>
</div>
@@ -157,7 +157,9 @@
/>
{:else}
<div class="student-id flex items-center justify-between relative">
<p class="w-11/12">{person.assigned_student_id || '-'}</p>
<p class="dark:text-white w-11/12">
{person.assigned_student_id || '-'}
</p>
{#if !isStudent}
<div class="absolute edit-btn">
<IconButton
@@ -182,7 +184,7 @@
name={person.profile.fullname}
/>
<div class="ml-2 break-all">
<p class="text-lg">{person.profile.fullname}</p>
<p class="dark:text-white text-lg">{person.profile.fullname}</p>
{#if !isStudent}
<a
href="mailto:{person.profile.email}"
@@ -206,7 +208,9 @@
</div>
{/if}
<p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
<p class="dark:text-white text-lg w-1/4">
{ROLE_LABEL[person.role_id]}
</p>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="hidden lg:block w-20">
src/routes/courses/[id]/submissions.svelte
+10 -6
View File
@@ -276,12 +276,12 @@
<div class="flex items-center w-full">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
class="section rounded-md bg-gray-100 dark:bg-gray-700 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
<Chip value={items.length} class="bg-set" />
<p class="ml-2 font-bold">{title}</p>
<p class="dark:text-white ml-2 font-bold">{title}</p>
</div>
<div
class="content pr-2 overflow-y-auto mb-3"
@@ -297,7 +297,7 @@
<div
class="border {item.isEarly
? 'border-grey-700'
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-3 px-3"
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-800 py-3 px-3"
animate:flip={{ duration: flipDurationMs }}
>
<div
@@ -311,7 +311,9 @@
class="block rounded-full h-6 w-6"
src={item.student.avatar_url}
/>
<p class="ml-2 text-sm">{item.student.username}</p>
<p class="dark:text-white ml-2 text-sm">
{item.student.username}
</p>
</div>
<a
class="text-blue-700 text-md font-bold"
@@ -324,12 +326,14 @@
href="{$page.path.replace('submissions', 'lessons')}/{item
.lesson.id}/exercises/{item.exercise.id}"
>
<p class="text-grey text-sm">
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
</p>
</a>
<p class="text-gray-500 text-xs">
<p
class="dark:text-white text-gray-500 dark:text-gray-200 text-xs"
>
{item.submittedAt}
</p>
<!-- <div class="badge rounded-md px-2 bg-green-500 text-white">