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

Merge branch 'CLASSROOMIO-T-11' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-11

Browse Source
This commit is contained in:
emmanuel
2023-07-27 16:56:49 +01:00
parent 79e2969fe1 a25c6c9e98
commit 26a79fdbd6
7 changed files with 60 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Ceritficate/Design.svelte
+29 -29
View File
@@ -12,34 +12,38 @@
import { course } from '../../store';
import { currentOrg } from '../../../../utils/store/org';
const professional = './professional.svg';
const plain = './plain.svg';
const student = 'Name of student';
const studentNamePlaceholder = 'Name of student';
const themes = [
{ label: 'professional', src: professional },
{ label: 'plain', src: plain },
];
const themes = ['professional', 'plain'];
let Selectedtheme = themes[0];
let isSaving = false;
const saveCertificate = () => {
// set isSaving to true
// Validation - make sure description isn't empty
/**
* Update course description and is_certificate_downloadable (like in src/components/Course/components/Settings/index.svelte)
* Update course description, is_certificate_downloadable and certificate_theme (like in src/components/Course/components/Settings/index.svelte)
*
* await updateCourse($course.id, undefined, {
description: $course.description,
is_certificate_downloadable: $course.is_certificate_downloadable
is_certificate_downloadable: $course.is_certificate_downloadable,
certificate_theme: $course.certificate_theme
});
* */
// set isSaving to false
};
</script>
<main class="md:-ml-4 md:-mr-4">
<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen&family=Roboto:wght@300;400;700&display=swap"
rel="stylesheet"
/>
</svelte:head>
<main class="md:-ml-4 md:-mr-4 px-2">
<div
class="flex-1 flex flex-col md:flex-row justify-between gap-3 w-full mb-3 h-4/5"
>
@@ -48,20 +52,16 @@
>Certificate settings</strong
>
<p class="text-xs font-normal my-4">Choose a theme</p>
<RadioButtonGroup bind:selected={Selectedtheme} class="mb-10">
{#each themes as value}
<RadioButtonGroup bind:selected={$course.certificate_theme} class="mb-10">
{#each themes as theme}
<div class="flex mr-3">
<RadioButton {value} size="sm" />
<img src={value.src} alt="themes" />
<RadioButton value={theme} size="sm" />
<img src={`./${theme}.svg`} alt="themes" />
</div>
{/each}
</RadioButtonGroup>
<div>
<p class="text-xs font-normal text-black my-2">Brand Logo</p>
<p class="text-base font-normal mt-2 mb-4">
We recommend using a PNG file with transparency. Maximum size: 512px x
512px.
</p>
<div>
<p class="text-base mt-1">
To update your brand image, go to <strong class="font-semibold"
@@ -70,7 +70,7 @@
</p>
<PrimaryButton
label="Go to Settings"
className="rounded-md mt-1"
className="rounded-md mt-3"
onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
/>
</div>
@@ -90,19 +90,19 @@
class="my-4"
size="sm"
>
<span slot="labelA" style="color: #161616">Student access</span>
<span slot="labelB" style="color: green">Student access</span>
<span slot="labelA" style="color: #161616">Locked</span>
<span slot="labelB" style="color: green">Unlocked</span>
</Toggle>
</div>
</section>
<section
class="certbg flex justify-center items-center rounded-md w-full md:w-3/5"
class="certificate-bg flex justify-center items-center rounded-md w-full md:w-3/5"
>
<div class="certContainer flex justify-center items-center h-5/6">
{#if Selectedtheme.label == 'professional'}
<Professional studentName={student} />
<div class="certificate-container flex justify-center items-center h-5/6">
{#if $course.certificate_theme === 'professional'}
<Professional studentName={studentNamePlaceholder} />
{:else}
<Plain studentName={student} />
<Plain studentName={studentNamePlaceholder} />
{/if}
</div>
</section>
@@ -121,11 +121,11 @@
p {
color: #262626;
}
.certContainer {
.certificate-container {
width: 95%;
max-width: 95%;
}
.certbg {
.certificate-bg {
background-color: #f5f8fe;
}
</style>
src/components/Course/components/Ceritficate/certificates/Plain.svelte
+7 -4
View File
@@ -9,25 +9,25 @@
</script>
<div
class="flex flex-col items-center justify-center {borderwidth} {bordercolor}"
class="flex flex-col items-center justify-center {borderwidth} {bordercolor} py-3"
>
<div class="flex items-center gap-1 my-2">
<img
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
alt="logo"
class=" w-14 h-14 rounded-md"
class=" w-10 h-10 rounded-md"
/>
<p class="font-semibold capitalize">{$currentOrg.name}</p>
</div>
<div class="w-full px-5 py-3">
<p
class="text-sm text-center font-normal my-2 uppercase tracking-wider text-gray-500 w-full"
class="text-sm text-center font-normal my-2 uppercase tracking-widest text-gray-500 w-full"
>
Certificate of completion
</p>
<div class="border-b border-gray-500 mb-4">
<p class="text-xs text-black font-medium">This is to certify that</p>
<p class="text-center">{studentName}</p>
<p class="student-name text-center text-5xl">{studentName}</p>
</div>
<div class="mb-2">
<p class="text-xs text-black font-medium">
@@ -46,6 +46,9 @@
</div>
<style>
.student-name {
font-family: 'Qwitcher Grypen', cursive;
}
.desc {
font-size: 10px;
}
src/components/Course/components/Ceritficate/certificates/Professional.svelte
+7 -4
View File
@@ -18,7 +18,7 @@
</p>
<div class="border-b border-gray-500 mb-4">
<p class="text-xs text-black font-medium">This is to certify that</p>
<p class="text-center">{studentName}</p>
<p class="student-name text-center text-5xl">{studentName}</p>
</div>
<div class="mb-2">
<p class="text-xs text-black font-medium">
@@ -26,18 +26,18 @@
</p>
<div>
<p
class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase"
class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
>
{$course.title}
</p>
</div>
</div>
<p class="desc mb-2 text-justify">{$course.description}</p>
<p class="desc mb-4 text-justify">{$course.description}</p>
<div class="flex items-center gap-1 my-2">
<img
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : logo}
alt="logo"
class="w-14 h-14 rounded-md"
class="w-10 h-10 rounded-md"
/>
<p class="font-semibold capitalize">{$currentOrg.name}</p>
</div>
@@ -46,6 +46,9 @@
</div>
<style>
.student-name {
font-family: 'Qwitcher Grypen', cursive;
}
.desc {
font-size: 10px;
}
src/components/Course/store.ts
+5
View File
@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
cost: 0,
currency: '',
is_certificate_downloadable: false,
certificate_theme: 'professional',
metadata: {
requirements: '',
description: '',
@@ -129,5 +130,9 @@ export async function setCourse(data: Course, setLesson = true) {
},
};
}
if (!data.certificate_theme) {
data.certificate_theme = 'professional';
}
course.set(data);
}
src/components/PageBody/index.svelte
+1 -1
View File
@@ -1,7 +1,7 @@
<script>
// import
// border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
export let width = 'max-w-3xl w-full lg:w-11/12';
export let width = 'max-w-4xl w-full lg:w-11/12';
export let padding = 'pb-5 px-4';
export let className = '';
</script>
src/routes/courses/[id]/certificates.svelte
+10 -9
View File
@@ -18,8 +18,8 @@
import Design from '../../../components/Course/components/Ceritficate/Design.svelte';
// import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
// import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
import { Tabs, Tab } from 'carbon-components-svelte';
import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
// import { Tabs, Tab } from 'carbon-components-svelte';
// import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
export let courseId: string = '';
let isStudent = false;
@@ -47,20 +47,21 @@
</slot:fragment>
</PageNav>
<PageBody className="w-full mx-0" padding="px-0">
<Tabs autoWidth class="border-b border-gray-200">
<PageBody className="w-full mx-0" padding="px-3">
<Design />
<!-- <Tabs autoWidth class="border-b border-gray-200">
<Tab label="Design" />
<!-- <Tab label="Reports" /> -->
<Tab label="Reports" />
<svelte:fragment slot="content">
<TabContent>
<Design />
</TabContent>
<!-- Temp disable Reports tab for V2 -->
<!-- <TabContent>
Temp disable Reports tab for V2
<TabContent>
<Reports />
</TabContent> -->
</TabContent>
</svelte:fragment>
</Tabs>
</Tabs> -->
</PageBody>
</CourseContainer>
src/utils/types/index.ts
+1
View File
@@ -97,6 +97,7 @@ export interface Course {
group?: Group;
organization?: Organization;
is_certificate_downloadable?: boolean;
certificate_theme?: string;
}
export interface Groupmember {