CLASSROOMIO-T-127: Theming configuration
CLASSROOMIO-T-127: Add 4 themes configurations into the app Clean up Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-51 Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
910d9c50a9
commit
f39a0cee4b
@@ -8,7 +8,7 @@
|
||||
StructuredListRow,
|
||||
StructuredListCell,
|
||||
StructuredListBody,
|
||||
Pagination,
|
||||
Pagination
|
||||
} from 'carbon-components-svelte';
|
||||
|
||||
let searchValue = '';
|
||||
@@ -17,9 +17,7 @@
|
||||
|
||||
<section class="flex flex-wrap items-start gap-2 mb-10 -ml-4 -mr-4">
|
||||
{#each CertificateReportData as data (data.id)}
|
||||
<div
|
||||
class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5"
|
||||
>
|
||||
<div class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5">
|
||||
<p class="text-xs font-normal">{data.title}</p>
|
||||
<bold class="text-2xl font-medium">{data.value}</bold>
|
||||
</div>
|
||||
@@ -39,22 +37,18 @@
|
||||
|
||||
<section class="mt-14 border-t border-gray-300">
|
||||
<StructuredList>
|
||||
<StructuredListHead class="bg-blue-50 py-0">
|
||||
<StructuredListHead class="bg-primary-50 py-0">
|
||||
<StructuredListRow head class="py-0">
|
||||
<StructuredListCell head class="py-0">
|
||||
<div
|
||||
class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
|
||||
class="flex-3 flex flex-row items-center justify-start w-full text-primary-600 text-sm font-medium"
|
||||
>
|
||||
<Checkbox bind:checked />
|
||||
<p class="text-blue-900 text-start w-full text-sm font-medium">
|
||||
Name of student
|
||||
</p>
|
||||
<p class="text-primary-900 text-start w-full text-sm font-medium">Name of student</p>
|
||||
</div>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell head class="py-0">
|
||||
<div
|
||||
class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
|
||||
>
|
||||
<div class="flex-2 items-center w-full text-primary-900 text-sm font-medium">
|
||||
<p class="align-middle text-sm font-medium pt-1">Date issued</p>
|
||||
<p class="opacity-0">personalized</p>
|
||||
</div>
|
||||
@@ -76,8 +70,8 @@
|
||||
<div class="flex-2 flex flex-row items-center gap-10 w-full">
|
||||
<p class="text-sm font-normal align-middle">{item.issued}</p>
|
||||
{#if item.peronalized == true}
|
||||
<span class="text-center bg-blue-100 px-3 py-2 rounded-lg">
|
||||
<p class="opacity-100 text-xs text-blue-600">personalized</p>
|
||||
<span class="text-center bg-primary-100 px-3 py-2 rounded-lg">
|
||||
<p class="opacity-100 text-xs text-primary-600">personalized</p>
|
||||
</span>
|
||||
{:else}
|
||||
<p class="opacity-0">personalized</p>
|
||||
|
||||
@@ -4,11 +4,13 @@
|
||||
|
||||
export let studentName;
|
||||
let borderwidth = 'border-l-8';
|
||||
let bordercolor = 'border-blue-800';
|
||||
let bordercolor = 'border-primary-800';
|
||||
let logo = './logo-512.png';
|
||||
</script>
|
||||
|
||||
<div class="certificate-bg flex items-center justify-center border border-dashed border-blue-400">
|
||||
<div
|
||||
class="certificate-bg flex items-center justify-center border border-dashed border-primary-400"
|
||||
>
|
||||
<div class="{borderwidth} {bordercolor}">
|
||||
<div class="w-full px-5 py-3">
|
||||
<p class="text-sm font-normal my-2 uppercase text-gray-500">
|
||||
@@ -24,7 +26,7 @@
|
||||
</p>
|
||||
<div>
|
||||
<p
|
||||
class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
|
||||
class="clamp bg-transparent text-base font-semibold text-primary-800 text-center uppercase my-2"
|
||||
>
|
||||
{$course.title}
|
||||
</p>
|
||||
|
||||
@@ -21,9 +21,7 @@
|
||||
modalHeading="Delete question"
|
||||
>
|
||||
<div>
|
||||
<h1 class="dark:text-white text-lg">
|
||||
Are you sure you want to delete this question?
|
||||
</h1>
|
||||
<h1 class="dark:text-white text-lg">Are you sure you want to delete this question?</h1>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
@@ -37,7 +35,7 @@
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Yes, delete"
|
||||
onClick={() => {
|
||||
onDelete();
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label={isDeleting ? 'Deleting...' : 'Yes, delete'}
|
||||
isDisabled={isDeleting}
|
||||
onClick={handleDelete}
|
||||
@@ -168,7 +168,7 @@
|
||||
<div class="float-right">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Delete this exercise"
|
||||
onClick={() => (shouldDelete = true)}
|
||||
/>
|
||||
|
||||
@@ -22,18 +22,12 @@
|
||||
let maxPoints = 0;
|
||||
|
||||
function getMaxPoints(questions) {
|
||||
return (questions || []).reduce(
|
||||
(acc, question) => acc + question.points,
|
||||
0
|
||||
);
|
||||
return (questions || []).reduce((acc, question) => acc + question.points, 0);
|
||||
}
|
||||
|
||||
function calculateTotal(grades) {
|
||||
if (!grades) return 0;
|
||||
return Object.values(grades).reduce(
|
||||
(acc, grade) => acc + parseInt(grade),
|
||||
0
|
||||
);
|
||||
return Object.values(grades).reduce((acc, grade) => acc + parseInt(grade), 0);
|
||||
}
|
||||
|
||||
function handleStatusChange() {
|
||||
@@ -41,7 +35,7 @@
|
||||
submissionId: data.id,
|
||||
prevStatusId: data.status_id,
|
||||
nextStatusId: status.value,
|
||||
total,
|
||||
total
|
||||
});
|
||||
|
||||
$snackbarStore.open = true;
|
||||
@@ -49,9 +43,7 @@
|
||||
}
|
||||
|
||||
function setStatus(data) {
|
||||
status = SELECTABLE_STATUS.find(
|
||||
(status) => status.value === data.status_id
|
||||
);
|
||||
status = SELECTABLE_STATUS.find((status) => status.value === data.status_id);
|
||||
}
|
||||
|
||||
function getStatusColor(status) {
|
||||
@@ -62,7 +54,7 @@
|
||||
// case STATUS.SUBMITTED:
|
||||
// return '';
|
||||
// case STATUS.IN_PROGRESS:
|
||||
// return 'text-white bg-blue-700';
|
||||
// return 'text-white bg-primary-700';
|
||||
// case STATUS.GRADED:
|
||||
// return 'text-white bg-green-700';
|
||||
// }
|
||||
@@ -91,7 +83,7 @@
|
||||
: []}
|
||||
questionnaireMetaData={{
|
||||
answers: data.answers || {},
|
||||
isFinished: true,
|
||||
isFinished: true
|
||||
}}
|
||||
bind:grades={data.questionAnswerByPoint}
|
||||
/>
|
||||
@@ -121,17 +113,9 @@
|
||||
<p class="dark:text-white font-bold text-lg">
|
||||
Details
|
||||
{#if data.isEarly}
|
||||
<span
|
||||
class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
|
||||
>
|
||||
early
|
||||
</span>
|
||||
<span class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"> early </span>
|
||||
{:else}
|
||||
<span
|
||||
class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
|
||||
>
|
||||
late
|
||||
</span>
|
||||
<span class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"> late </span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -39,16 +39,14 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
$questionnaire.questions = $questionnaire.questions.sort(
|
||||
(a, b) => a.order - b.order
|
||||
);
|
||||
$questionnaire.questions = $questionnaire.questions.sort((a, b) => a.order - b.order);
|
||||
$questionnaireOrder.open = false;
|
||||
}
|
||||
|
||||
$: items = filterOutDeleted($questionnaire.questions).map((q) => ({
|
||||
id: q.id,
|
||||
name: q.title,
|
||||
type: q.question_type.id,
|
||||
type: q.question_type.id
|
||||
}));
|
||||
</script>
|
||||
|
||||
@@ -64,8 +62,8 @@
|
||||
flipDurationMs,
|
||||
dropTargetStyle: {
|
||||
border: '2px #1d4ed8 solid',
|
||||
'border-style': 'dashed',
|
||||
},
|
||||
'border-style': 'dashed'
|
||||
}
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
@@ -74,7 +72,7 @@
|
||||
{#each items as item (item.id)}
|
||||
<div
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class="flex items-center rounded-md p-4 border border-blue-600"
|
||||
class="flex items-center rounded-md p-4 border border-primary-600"
|
||||
>
|
||||
{#if item.type === 1}
|
||||
<RadioButtonCheckedIcon size={16} class="carbon-icon active" />
|
||||
|
||||
@@ -173,7 +173,7 @@
|
||||
<h2 class="text-xl my-1.5">No question added for this exercise</h2>
|
||||
<p class="text-sm text-center px-44">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
Click the <span class="text-blue-700">Edit</span> button to add.
|
||||
Click the <span class="text-primary-700">Edit</span> button to add.
|
||||
</RoleBasedSecurity>
|
||||
</p>
|
||||
</Box>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
disabled={isLoading}
|
||||
>
|
||||
<form
|
||||
class="h-full w-full flex flex-col items-center justify-center border border-blue-300 border-dashed rounded-xl"
|
||||
class="h-full w-full flex flex-col items-center justify-center border border-primary-300 border-dashed rounded-xl"
|
||||
on:submit|preventDefault={onUpload}
|
||||
>
|
||||
{#if isLoading}
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
>
|
||||
<TextChip
|
||||
value={getLectureNo(index + 1)}
|
||||
className="bg-blue-200 text-blue-600 text-xs mr-2"
|
||||
className="bg-primary-200 text-primary-600 text-xs mr-2"
|
||||
size="sm"
|
||||
shape="rounded-full"
|
||||
/>
|
||||
@@ -253,7 +253,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
height: calc(100vh - 44px);
|
||||
height: calc(100vh - 45px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 360px;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
$settingsDialog.open = false;
|
||||
const logo = await updateCourse($course.id, avatar, {
|
||||
title: $course.title,
|
||||
description: $course.description,
|
||||
description: $course.description
|
||||
});
|
||||
|
||||
if (logo) {
|
||||
@@ -100,7 +100,7 @@
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Delete"
|
||||
onClick={() => (shouldDelete = true)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user