Merge branch 'main' of https://gitlab.com/thenextgreat/classroomio
This commit is contained in:
+1
-1
@@ -24,7 +24,7 @@
|
|||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover" class="">
|
||||||
<div style="display: contents">
|
<div style="display: contents">
|
||||||
%sveltekit.body%
|
%sveltekit.body%
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+365
-4
@@ -91,10 +91,371 @@ code {
|
|||||||
fill: red;
|
fill: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark :global(svg.carbon-icon) {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/**
|
||||||
|
Rose Theme
|
||||||
|
*/
|
||||||
|
.theme-rose .bg-primary-50 {
|
||||||
|
background-color: #fff1f2;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-50 {
|
||||||
|
color: #fff1f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-100 {
|
||||||
|
background-color: #ffe4e7;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-100 {
|
||||||
|
color: #ffe4e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-200 {
|
||||||
|
background-color: #fecdd4;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-200 {
|
||||||
|
color: #fecdd4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-300 {
|
||||||
|
background-color: #fda4b2;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-300 {
|
||||||
|
color: #fda4b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-400 {
|
||||||
|
background-color: #fb7189;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-400 {
|
||||||
|
color: #fb7189;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-500 {
|
||||||
|
background-color: #f43f63;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-500 {
|
||||||
|
color: #f43f63;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-600 {
|
||||||
|
background-color: #e21d4e;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-600 {
|
||||||
|
color: #e21d4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-700 {
|
||||||
|
background-color: #be1241;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-700 {
|
||||||
|
color: #be1241;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-800 {
|
||||||
|
background-color: #9f123d;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-800 {
|
||||||
|
color: #9f123d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-rose .bg-primary-900 {
|
||||||
|
background-color: #88133a;
|
||||||
|
}
|
||||||
|
.theme-rose .text-primary-900 {
|
||||||
|
color: #88133a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Blue Theme
|
||||||
|
*/
|
||||||
|
.bg-primary-50 {
|
||||||
|
background-color: #eff6ff;
|
||||||
|
}
|
||||||
|
.text-primary-50 {
|
||||||
|
color: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-100 {
|
||||||
|
background-color: #dbeafe;
|
||||||
|
}
|
||||||
|
.text-primary-100 {
|
||||||
|
color: #dbeafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-200 {
|
||||||
|
background-color: #bfdafe;
|
||||||
|
}
|
||||||
|
.text-primary-200 {
|
||||||
|
color: #bfdafe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-300 {
|
||||||
|
background-color: #92c4fe;
|
||||||
|
}
|
||||||
|
.text-primary-300 {
|
||||||
|
color: #92c4fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-400 {
|
||||||
|
background-color: #5fa3fb;
|
||||||
|
}
|
||||||
|
.text-primary-400 {
|
||||||
|
color: #5fa3fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-500 {
|
||||||
|
background-color: #3a7ff7;
|
||||||
|
}
|
||||||
|
.text-primary-500 {
|
||||||
|
color: #3a7ff7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-600 {
|
||||||
|
background-color: #2460ec;
|
||||||
|
}
|
||||||
|
.text-primary-600 {
|
||||||
|
color: #2460ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-700 {
|
||||||
|
background-color: #1d4ee2;
|
||||||
|
}
|
||||||
|
.text-primary-700 {
|
||||||
|
color: #1d4ee2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-800 {
|
||||||
|
background-color: #1d3eb0;
|
||||||
|
}
|
||||||
|
.text-primary-800 {
|
||||||
|
color: #1d3eb0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-primary-900 {
|
||||||
|
background-color: #1d398b;
|
||||||
|
}
|
||||||
|
.text-primary-900 {
|
||||||
|
color: #1d398b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Green Theme
|
||||||
|
*/
|
||||||
|
.theme-green .bg-primary-50 {
|
||||||
|
background-color: #effef0;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-50 {
|
||||||
|
color: #effef0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-100 {
|
||||||
|
background-color: #d9ffdc;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-100 {
|
||||||
|
color: #d9ffdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-200 {
|
||||||
|
background-color: #b6fcbc;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-200 {
|
||||||
|
color: #b6fcbc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-300 {
|
||||||
|
background-color: #7df88a;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-300 {
|
||||||
|
color: #7df88a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-400 {
|
||||||
|
background-color: #3deb51;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-400 {
|
||||||
|
color: #3deb51;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-500 {
|
||||||
|
background-color: #12bf26;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-500 {
|
||||||
|
color: #12bf26;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-600 {
|
||||||
|
background-color: #0aaf1d;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-600 {
|
||||||
|
color: #0aaf1d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-700 {
|
||||||
|
background-color: #0c891b;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-700 {
|
||||||
|
color: #0c891b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-800 {
|
||||||
|
background-color: #0f6c1b;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-800 {
|
||||||
|
color: #0f6c1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .bg-primary-900 {
|
||||||
|
background-color: #0f581a;
|
||||||
|
}
|
||||||
|
.theme-green .text-primary-900 {
|
||||||
|
color: #0f581a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Orange Theme
|
||||||
|
*/
|
||||||
|
.theme-orange .bg-primary-50 {
|
||||||
|
background-color: #fff8ec;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-50 {
|
||||||
|
color: #fff8ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-100 {
|
||||||
|
background-color: #fff0d3;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-100 {
|
||||||
|
color: #fff0d3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-200 {
|
||||||
|
background-color: #ffdca5;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-200 {
|
||||||
|
color: #ffdca5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-300 {
|
||||||
|
background-color: #ffc26d;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-300 {
|
||||||
|
color: #ffc26d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-400 {
|
||||||
|
background-color: #ff9d32;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-400 {
|
||||||
|
color: #ff9d32;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-500 {
|
||||||
|
background-color: #ff7f0a;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-500 {
|
||||||
|
color: #ff7f0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-600 {
|
||||||
|
background-color: #ff6600;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-600 {
|
||||||
|
color: #ff6600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-700 {
|
||||||
|
background-color: #cc4902;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-700 {
|
||||||
|
color: #cc4902;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-800 {
|
||||||
|
background-color: #a1390b;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-800 {
|
||||||
|
color: #a1390b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-orange .bg-primary-900 {
|
||||||
|
background-color: #82310c;
|
||||||
|
}
|
||||||
|
.theme-orange .text-primary-900 {
|
||||||
|
color: #82310c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Violet Theme
|
||||||
|
*/
|
||||||
|
.theme-violet .bg-primary-50 {
|
||||||
|
background-color: #fff2fe;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-50 {
|
||||||
|
color: #fff2fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-100 {
|
||||||
|
background-color: #ffe3fe;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-100 {
|
||||||
|
color: #ffe3fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-200 {
|
||||||
|
background-color: #ffc6fe;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-200 {
|
||||||
|
color: #ffc6fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-300 {
|
||||||
|
background-color: #ff99f7;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-300 {
|
||||||
|
color: #ff99f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-400 {
|
||||||
|
background-color: #ff5df2;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-400 {
|
||||||
|
color: #ff5df2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-500 {
|
||||||
|
background-color: #ff21f5;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-500 {
|
||||||
|
color: #ff21f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-600 {
|
||||||
|
background-color: #fb00ff;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-600 {
|
||||||
|
color: #fb00ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-700 {
|
||||||
|
background-color: #cf00ce;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-700 {
|
||||||
|
color: #cf00ce;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-800 {
|
||||||
|
background-color: #a900a6;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-800 {
|
||||||
|
color: #a900a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-violet .bg-primary-900 {
|
||||||
|
background-color: #890684;
|
||||||
|
}
|
||||||
|
.theme-violet .text-primary-900 {
|
||||||
|
color: #890684;
|
||||||
|
}
|
||||||
|
|||||||
+1
-1
@@ -13,7 +13,7 @@
|
|||||||
have gotten the error notification and will push a fix ASAP. In the
|
have gotten the error notification and will push a fix ASAP. In the
|
||||||
meantime, take a short break and come back a bit later.
|
meantime, take a short break and come back a bit later.
|
||||||
</p>
|
</p>
|
||||||
<a class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
<a class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||||
href="mailto:support@classroomio.com">Contact Us</a>
|
href="mailto:support@classroomio.com">Contact Us</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,4 @@
|
|||||||
export let className;
|
export let className;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<img
|
<img alt={name} {src} class="w-10 h-10 rounded-full bg-primary-100 {className}" />
|
||||||
alt={name}
|
|
||||||
{src}
|
|
||||||
class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
|
|
||||||
/>
|
|
||||||
|
|||||||
@@ -30,9 +30,7 @@
|
|||||||
const totalVoteOfAllOptions = getTotalVotes(options);
|
const totalVoteOfAllOptions = getTotalVotes(options);
|
||||||
const totalVotesOfCurrentOption = currentOption.selectedBy.length;
|
const totalVotesOfCurrentOption = currentOption.selectedBy.length;
|
||||||
|
|
||||||
return (
|
return Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0;
|
||||||
Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function didUserSelect(option) {
|
function didUserSelect(option) {
|
||||||
@@ -52,10 +50,7 @@
|
|||||||
{#if selectedOptionToView}
|
{#if selectedOptionToView}
|
||||||
<div>
|
<div>
|
||||||
<div class="flex items-center mb-5">
|
<div class="flex items-center mb-5">
|
||||||
<button
|
<button class="text-xl w-10 px-3" on:click={() => (selectedOptionToView = null)}>
|
||||||
class="text-xl w-10 px-3"
|
|
||||||
on:click={() => (selectedOptionToView = null)}
|
|
||||||
>
|
|
||||||
{`<`}
|
{`<`}
|
||||||
</button>
|
</button>
|
||||||
<div class="flex-grow text-center">
|
<div class="flex-grow text-center">
|
||||||
@@ -79,7 +74,7 @@
|
|||||||
</h3>
|
</h3>
|
||||||
<p class="dark:text-white text-sm italic">
|
<p class="dark:text-white text-sm italic">
|
||||||
Created by <a
|
Created by <a
|
||||||
class="text-blue-500"
|
class="text-primary-500"
|
||||||
href="https://twitter.com/rotimi_best"
|
href="https://twitter.com/rotimi_best"
|
||||||
target="_blank">@{poll.author.label}</a
|
target="_blank">@{poll.author.label}</a
|
||||||
>
|
>
|
||||||
@@ -124,15 +119,12 @@
|
|||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="w-4/5 h-2 bg-gray-200 relative">
|
<div class="w-4/5 h-2 bg-gray-200 relative">
|
||||||
<span
|
<span
|
||||||
class="absolute top-0 left-0 bg-blue-700 h-full"
|
class="absolute top-0 left-0 bg-primary-700 h-full"
|
||||||
style="width: {calculatePercent(poll.options, option)}%;"
|
style="width: {calculatePercent(poll.options, option)}%;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{#if option.selectedBy.length}
|
{#if option.selectedBy.length}
|
||||||
<button
|
<button class="text-xl px-3 ml-5" on:click={() => (selectedOptionToView = option)}>
|
||||||
class="text-xl px-3 ml-5"
|
|
||||||
on:click={() => (selectedOptionToView = option)}
|
|
||||||
>
|
|
||||||
>
|
>
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -151,19 +143,17 @@
|
|||||||
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
|
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
|
||||||
option
|
option
|
||||||
) &&
|
) &&
|
||||||
'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
|
'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"
|
||||||
on:click={handleSelect(index)}
|
on:click={handleSelect(index)}
|
||||||
>
|
>
|
||||||
{#if hasUserVoted}
|
{#if hasUserVoted}
|
||||||
<span
|
<span
|
||||||
class="progress absolute top-0 left-0 {didUserSelect(option)
|
class="progress absolute top-0 left-0 {didUserSelect(option)
|
||||||
? 'bg-blue-700'
|
? 'bg-primary-700'
|
||||||
: 'bg-gray-300'} h-full bg-opacity-25"
|
: 'bg-gray-300'} h-full bg-opacity-25"
|
||||||
style="width: {calculatePercent(poll.options, option)}%;"
|
style="width: {calculatePercent(poll.options, option)}%;"
|
||||||
/>
|
/>
|
||||||
<strong class="mr-3"
|
<strong class="mr-3">{calculatePercent(poll.options, option)}%</strong>
|
||||||
>{calculatePercent(poll.options, option)}%</strong
|
|
||||||
>
|
|
||||||
{/if}
|
{/if}
|
||||||
{option.label}
|
{option.label}
|
||||||
</button>
|
</button>
|
||||||
@@ -182,7 +172,7 @@
|
|||||||
{#if isAuthor}
|
{#if isAuthor}
|
||||||
<div class="w-full text-center mt-3">
|
<div class="w-full text-center mt-3">
|
||||||
<button
|
<button
|
||||||
class="px-5 py-3 bg-blue-700 text-white"
|
class="px-5 py-3 bg-primary-700 text-white"
|
||||||
on:click={() => (viewResult = !viewResult)}
|
on:click={() => (viewResult = !viewResult)}
|
||||||
>
|
>
|
||||||
{#if viewResult}
|
{#if viewResult}
|
||||||
@@ -191,10 +181,7 @@
|
|||||||
View results
|
View results
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="px-5 py-3 bg-red-500 text-white" on:click={handlePollDelete}>
|
||||||
class="px-5 py-3 bg-red-500 text-white"
|
|
||||||
on:click={handlePollDelete}
|
|
||||||
>
|
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -75,9 +75,11 @@
|
|||||||
{#if !showOnlyContent}
|
{#if !showOnlyContent}
|
||||||
<div class="w-full p-6 border-t border-grey text-center">
|
<div class="w-full p-6 border-t border-grey text-center">
|
||||||
{#if isLogin}
|
{#if isLogin}
|
||||||
Not registered yet? <a class="hover:underline text-blue-700" href="/signup">Sign up</a>
|
Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
|
||||||
{:else}
|
{:else}
|
||||||
Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
|
Already have an account? <a class="hover:underline text-primary-700" href="/login"
|
||||||
|
>Log In</a
|
||||||
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -7,8 +7,4 @@
|
|||||||
export let height = 'h-10';
|
export let height = 'h-10';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<img
|
<img alt={name} {src} class="{className} {width} {height} {shape} bg-primary-100" />
|
||||||
alt={name}
|
|
||||||
{src}
|
|
||||||
class="{className} {width} {height} {shape} bg-light-blue-100"
|
|
||||||
/>
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
export let onClick;
|
export let onClick;
|
||||||
export let contained;
|
export let contained;
|
||||||
export let color = 'text-blue-700 bg-blue-200 dark:bg-gray-500';
|
export let color = 'text-primary-700 bg-primary-200 dark:bg-gray-500';
|
||||||
export let size = 'large';
|
export let size = 'large';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -15,4 +15,4 @@
|
|||||||
<CloseIcon size={20} class="carbon-icon dark:text-white" title="Delete" />
|
<CloseIcon size={20} class="carbon-icon dark:text-white" title="Delete" />
|
||||||
{/if}
|
{/if}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<!-- color="text-blue-700 bg-blue-200 dark:bg-gray-200 dark:text-black" -->
|
<!-- color="text-primary-700 bg-primary-200 dark:bg-gray-200 dark:text-black" -->
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p
|
<p
|
||||||
class="org-avatar text-xs bg-blue-200 text-blue-700 font-bold py-1 px-1 rounded-md text-center"
|
class="org-avatar text-xs bg-primary-200 text-primary-700 font-bold py-1 px-1 rounded-md text-center"
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
StructuredListRow,
|
StructuredListRow,
|
||||||
StructuredListCell,
|
StructuredListCell,
|
||||||
StructuredListBody,
|
StructuredListBody,
|
||||||
Pagination,
|
Pagination
|
||||||
} from 'carbon-components-svelte';
|
} from 'carbon-components-svelte';
|
||||||
|
|
||||||
let searchValue = '';
|
let searchValue = '';
|
||||||
@@ -17,9 +17,7 @@
|
|||||||
|
|
||||||
<section class="flex flex-wrap items-start gap-2 mb-10 -ml-4 -mr-4">
|
<section class="flex flex-wrap items-start gap-2 mb-10 -ml-4 -mr-4">
|
||||||
{#each CertificateReportData as data (data.id)}
|
{#each CertificateReportData as data (data.id)}
|
||||||
<div
|
<div class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5">
|
||||||
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>
|
<p class="text-xs font-normal">{data.title}</p>
|
||||||
<bold class="text-2xl font-medium">{data.value}</bold>
|
<bold class="text-2xl font-medium">{data.value}</bold>
|
||||||
</div>
|
</div>
|
||||||
@@ -39,22 +37,18 @@
|
|||||||
|
|
||||||
<section class="mt-14 border-t border-gray-300">
|
<section class="mt-14 border-t border-gray-300">
|
||||||
<StructuredList>
|
<StructuredList>
|
||||||
<StructuredListHead class="bg-blue-50 py-0">
|
<StructuredListHead class="bg-primary-50 py-0">
|
||||||
<StructuredListRow head class="py-0">
|
<StructuredListRow head class="py-0">
|
||||||
<StructuredListCell head class="py-0">
|
<StructuredListCell head class="py-0">
|
||||||
<div
|
<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 />
|
<Checkbox bind:checked />
|
||||||
<p class="text-blue-900 text-start w-full text-sm font-medium">
|
<p class="text-primary-900 text-start w-full text-sm font-medium">Name of student</p>
|
||||||
Name of student
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</StructuredListCell>
|
</StructuredListCell>
|
||||||
<StructuredListCell head class="py-0">
|
<StructuredListCell head class="py-0">
|
||||||
<div
|
<div class="flex-2 items-center w-full text-primary-900 text-sm font-medium">
|
||||||
class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
|
|
||||||
>
|
|
||||||
<p class="align-middle text-sm font-medium pt-1">Date issued</p>
|
<p class="align-middle text-sm font-medium pt-1">Date issued</p>
|
||||||
<p class="opacity-0">personalized</p>
|
<p class="opacity-0">personalized</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,8 +70,8 @@
|
|||||||
<div class="flex-2 flex flex-row items-center gap-10 w-full">
|
<div class="flex-2 flex flex-row items-center gap-10 w-full">
|
||||||
<p class="text-sm font-normal align-middle">{item.issued}</p>
|
<p class="text-sm font-normal align-middle">{item.issued}</p>
|
||||||
{#if item.peronalized == true}
|
{#if item.peronalized == true}
|
||||||
<span class="text-center bg-blue-100 px-3 py-2 rounded-lg">
|
<span class="text-center bg-primary-100 px-3 py-2 rounded-lg">
|
||||||
<p class="opacity-100 text-xs text-blue-600">personalized</p>
|
<p class="opacity-100 text-xs text-primary-600">personalized</p>
|
||||||
</span>
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="opacity-0">personalized</p>
|
<p class="opacity-0">personalized</p>
|
||||||
|
|||||||
@@ -4,11 +4,13 @@
|
|||||||
|
|
||||||
export let studentName;
|
export let studentName;
|
||||||
let borderwidth = 'border-l-8';
|
let borderwidth = 'border-l-8';
|
||||||
let bordercolor = 'border-blue-800';
|
let bordercolor = 'border-primary-800';
|
||||||
let logo = './logo-512.png';
|
let logo = './logo-512.png';
|
||||||
</script>
|
</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="{borderwidth} {bordercolor}">
|
||||||
<div class="w-full px-5 py-3">
|
<div class="w-full px-5 py-3">
|
||||||
<p class="text-sm font-normal my-2 uppercase text-gray-500">
|
<p class="text-sm font-normal my-2 uppercase text-gray-500">
|
||||||
@@ -24,7 +26,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<p
|
<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}
|
{$course.title}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -21,9 +21,7 @@
|
|||||||
modalHeading="Delete question"
|
modalHeading="Delete question"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h1 class="dark:text-white text-lg">
|
<h1 class="dark:text-white text-lg">Are you sure you want to delete this question?</h1>
|
||||||
Are you sure you want to delete this question?
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class="mt-5 flex items-center justify-between">
|
<div class="mt-5 flex items-center justify-between">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
@@ -37,7 +35,7 @@
|
|||||||
/>
|
/>
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label="Yes, delete"
|
label="Yes, delete"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onDelete();
|
onDelete();
|
||||||
|
|||||||
@@ -132,7 +132,7 @@
|
|||||||
/>
|
/>
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label={isDeleting ? 'Deleting...' : 'Yes, delete'}
|
label={isDeleting ? 'Deleting...' : 'Yes, delete'}
|
||||||
isDisabled={isDeleting}
|
isDisabled={isDeleting}
|
||||||
onClick={handleDelete}
|
onClick={handleDelete}
|
||||||
@@ -168,7 +168,7 @@
|
|||||||
<div class="float-right">
|
<div class="float-right">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label="Delete this exercise"
|
label="Delete this exercise"
|
||||||
onClick={() => (shouldDelete = true)}
|
onClick={() => (shouldDelete = true)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -22,18 +22,12 @@
|
|||||||
let maxPoints = 0;
|
let maxPoints = 0;
|
||||||
|
|
||||||
function getMaxPoints(questions) {
|
function getMaxPoints(questions) {
|
||||||
return (questions || []).reduce(
|
return (questions || []).reduce((acc, question) => acc + question.points, 0);
|
||||||
(acc, question) => acc + question.points,
|
|
||||||
0
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateTotal(grades) {
|
function calculateTotal(grades) {
|
||||||
if (!grades) return 0;
|
if (!grades) return 0;
|
||||||
return Object.values(grades).reduce(
|
return Object.values(grades).reduce((acc, grade) => acc + parseInt(grade), 0);
|
||||||
(acc, grade) => acc + parseInt(grade),
|
|
||||||
0
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleStatusChange() {
|
function handleStatusChange() {
|
||||||
@@ -41,7 +35,7 @@
|
|||||||
submissionId: data.id,
|
submissionId: data.id,
|
||||||
prevStatusId: data.status_id,
|
prevStatusId: data.status_id,
|
||||||
nextStatusId: status.value,
|
nextStatusId: status.value,
|
||||||
total,
|
total
|
||||||
});
|
});
|
||||||
|
|
||||||
$snackbarStore.open = true;
|
$snackbarStore.open = true;
|
||||||
@@ -49,9 +43,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setStatus(data) {
|
function setStatus(data) {
|
||||||
status = SELECTABLE_STATUS.find(
|
status = SELECTABLE_STATUS.find((status) => status.value === data.status_id);
|
||||||
(status) => status.value === data.status_id
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getStatusColor(status) {
|
function getStatusColor(status) {
|
||||||
@@ -62,7 +54,7 @@
|
|||||||
// case STATUS.SUBMITTED:
|
// case STATUS.SUBMITTED:
|
||||||
// return '';
|
// return '';
|
||||||
// case STATUS.IN_PROGRESS:
|
// case STATUS.IN_PROGRESS:
|
||||||
// return 'text-white bg-blue-700';
|
// return 'text-white bg-primary-700';
|
||||||
// case STATUS.GRADED:
|
// case STATUS.GRADED:
|
||||||
// return 'text-white bg-green-700';
|
// return 'text-white bg-green-700';
|
||||||
// }
|
// }
|
||||||
@@ -91,7 +83,7 @@
|
|||||||
: []}
|
: []}
|
||||||
questionnaireMetaData={{
|
questionnaireMetaData={{
|
||||||
answers: data.answers || {},
|
answers: data.answers || {},
|
||||||
isFinished: true,
|
isFinished: true
|
||||||
}}
|
}}
|
||||||
bind:grades={data.questionAnswerByPoint}
|
bind:grades={data.questionAnswerByPoint}
|
||||||
/>
|
/>
|
||||||
@@ -121,17 +113,9 @@
|
|||||||
<p class="dark:text-white font-bold text-lg">
|
<p class="dark:text-white font-bold text-lg">
|
||||||
Details
|
Details
|
||||||
{#if data.isEarly}
|
{#if data.isEarly}
|
||||||
<span
|
<span class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"> early </span>
|
||||||
class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
|
|
||||||
>
|
|
||||||
early
|
|
||||||
</span>
|
|
||||||
{:else}
|
{:else}
|
||||||
<span
|
<span class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"> late </span>
|
||||||
class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
|
|
||||||
>
|
|
||||||
late
|
|
||||||
</span>
|
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -39,16 +39,14 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
$questionnaire.questions = $questionnaire.questions.sort(
|
$questionnaire.questions = $questionnaire.questions.sort((a, b) => a.order - b.order);
|
||||||
(a, b) => a.order - b.order
|
|
||||||
);
|
|
||||||
$questionnaireOrder.open = false;
|
$questionnaireOrder.open = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
$: items = filterOutDeleted($questionnaire.questions).map((q) => ({
|
$: items = filterOutDeleted($questionnaire.questions).map((q) => ({
|
||||||
id: q.id,
|
id: q.id,
|
||||||
name: q.title,
|
name: q.title,
|
||||||
type: q.question_type.id,
|
type: q.question_type.id
|
||||||
}));
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -64,8 +62,8 @@
|
|||||||
flipDurationMs,
|
flipDurationMs,
|
||||||
dropTargetStyle: {
|
dropTargetStyle: {
|
||||||
border: '2px #1d4ed8 solid',
|
border: '2px #1d4ed8 solid',
|
||||||
'border-style': 'dashed',
|
'border-style': 'dashed'
|
||||||
},
|
}
|
||||||
}}
|
}}
|
||||||
on:consider={handleDndConsider}
|
on:consider={handleDndConsider}
|
||||||
on:finalize={handleDndFinalize}
|
on:finalize={handleDndFinalize}
|
||||||
@@ -74,7 +72,7 @@
|
|||||||
{#each items as item (item.id)}
|
{#each items as item (item.id)}
|
||||||
<div
|
<div
|
||||||
animate:flip={{ duration: flipDurationMs }}
|
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}
|
{#if item.type === 1}
|
||||||
<RadioButtonCheckedIcon size={16} class="carbon-icon active" />
|
<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>
|
<h2 class="text-xl my-1.5">No question added for this exercise</h2>
|
||||||
<p class="text-sm text-center px-44">
|
<p class="text-sm text-center px-44">
|
||||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
<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>
|
</RoleBasedSecurity>
|
||||||
</p>
|
</p>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@@ -115,7 +115,7 @@
|
|||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
>
|
>
|
||||||
<form
|
<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}
|
on:submit|preventDefault={onUpload}
|
||||||
>
|
>
|
||||||
{#if isLoading}
|
{#if isLoading}
|
||||||
|
|||||||
@@ -203,7 +203,7 @@
|
|||||||
>
|
>
|
||||||
<TextChip
|
<TextChip
|
||||||
value={getLectureNo(index + 1)}
|
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"
|
size="sm"
|
||||||
shape="rounded-full"
|
shape="rounded-full"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
$settingsDialog.open = false;
|
$settingsDialog.open = false;
|
||||||
const logo = await updateCourse($course.id, avatar, {
|
const logo = await updateCourse($course.id, avatar, {
|
||||||
title: $course.title,
|
title: $course.title,
|
||||||
description: $course.description,
|
description: $course.description
|
||||||
});
|
});
|
||||||
|
|
||||||
if (logo) {
|
if (logo) {
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
<div class="mt-5 flex items-center justify-between">
|
<div class="mt-5 flex items-center justify-between">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label="Delete"
|
label="Delete"
|
||||||
onClick={() => (shouldDelete = true)}
|
onClick={() => (shouldDelete = true)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -176,7 +176,7 @@
|
|||||||
<a
|
<a
|
||||||
href="{$page.url.pathname}{navItem.key}"
|
href="{$page.url.pathname}{navItem.key}"
|
||||||
class="{navItem.key === activeNav &&
|
class="{navItem.key === activeNav &&
|
||||||
'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
|
'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
|
||||||
>
|
>
|
||||||
{navItem.label}
|
{navItem.label}
|
||||||
</a>
|
</a>
|
||||||
@@ -229,7 +229,10 @@
|
|||||||
{#each lessons as lesson, index}
|
{#each lessons as lesson, index}
|
||||||
<div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
|
<div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
|
||||||
<div class="flex items-center mb-3">
|
<div class="flex items-center mb-3">
|
||||||
<Chip value={getLectureNo(index + 1, '0')} className="bg-blue-100 text-blue-700" />
|
<Chip
|
||||||
|
value={getLectureNo(index + 1, '0')}
|
||||||
|
className="bg-primary-100 text-primary-700"
|
||||||
|
/>
|
||||||
<p class="dark:text-white ml-2 text-sm font-light">
|
<p class="dark:text-white ml-2 text-sm font-light">
|
||||||
{lesson.title}
|
{lesson.title}
|
||||||
</p>
|
</p>
|
||||||
@@ -305,13 +308,13 @@
|
|||||||
</div>
|
</div>
|
||||||
{#if !expandDescription[id] && review.description.split(' ').length > 9}
|
{#if !expandDescription[id] && review.description.split(' ').length > 9}
|
||||||
<button
|
<button
|
||||||
class="underline text-blue-700 mt-2 font-normal"
|
class="underline text-primary-700 mt-2 font-normal"
|
||||||
on:click={() => toggleDescription(id)}>See More</button
|
on:click={() => toggleDescription(id)}>See More</button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
{#if expandDescription[id]}
|
{#if expandDescription[id]}
|
||||||
<button
|
<button
|
||||||
class="underline text-blue-700 mt-2 font-normal"
|
class="underline text-primary-700 mt-2 font-normal"
|
||||||
on:click={() => toggleDescription(id)}>See Less</button
|
on:click={() => toggleDescription(id)}>See Less</button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -400,7 +403,7 @@
|
|||||||
{get(instructor, 'role', '')}
|
{get(instructor, 'role', '')}
|
||||||
</p>
|
</p>
|
||||||
<p class="dark:text-white text-md font-light flex items-center">
|
<p class="dark:text-white text-md font-light flex items-center">
|
||||||
<PlayFilled size={16} class="text-blue-700" />
|
<PlayFilled size={16} class="text-primary-700" />
|
||||||
<span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
|
<span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -46,9 +46,8 @@
|
|||||||
>
|
>
|
||||||
{#each options as option, index}
|
{#each options as option, index}
|
||||||
<button
|
<button
|
||||||
class="block px-4 py-3 text-left hover:bg-blue-100 {!isOptionLast(
|
class="block px-4 py-3 text-left hover:bg-primary-100 {!isOptionLast(index) &&
|
||||||
index
|
'border-b'} w-full dark:text-white dark:hover:text-black"
|
||||||
) && 'border-b'} w-full dark:text-white dark:hover:text-black"
|
|
||||||
on:click={onClick(option)}
|
on:click={onClick(option)}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
@@ -60,8 +59,8 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.dropdown {
|
.dropdown {
|
||||||
box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
|
box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%),
|
||||||
0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
|
0px 3px 14px 2px rgb(0 0 0 / 12%);
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
left: unset;
|
left: unset;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
export let textAreaHeight = '';
|
export let textAreaHeight = '';
|
||||||
export let textareaRef;
|
export let textareaRef;
|
||||||
export let buttonRef;
|
export let buttonRef;
|
||||||
const activeClassName = 'border-b-2 border-blue-700';
|
const activeClassName = 'border-b-2 border-primary-700';
|
||||||
|
|
||||||
const handleTabClick = (tab) => () => {
|
const handleTabClick = (tab) => () => {
|
||||||
isWriteMode = tab === 1;
|
isWriteMode = tab === 1;
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
Styling with Markdown is supported.
|
Styling with Markdown is supported.
|
||||||
<a
|
<a
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-blue-500 underline"
|
class="text-primary-500 underline"
|
||||||
href="https://guides.github.com/features/mastering-markdown"
|
href="https://guides.github.com/features/mastering-markdown"
|
||||||
>
|
>
|
||||||
Learn more
|
Learn more
|
||||||
|
|||||||
@@ -24,7 +24,8 @@
|
|||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<div class="w-full p-6 border-t border-grey text-center">
|
<div class="w-full p-6 border-t border-grey text-center">
|
||||||
Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
|
Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,10 +7,8 @@
|
|||||||
<div class="flex justify-center w-full">
|
<div class="flex justify-center w-full">
|
||||||
<span class="text-gray-700 text-sm py-3"
|
<span class="text-gray-700 text-sm py-3"
|
||||||
>Created with love by
|
>Created with love by
|
||||||
<a
|
<a class="underline text-primary-700" href="https://twitter.com/rotimi_best" target="_blank"
|
||||||
class="underline text-blue-700"
|
>Rotimi Best</a
|
||||||
href="https://twitter.com/rotimi_best"
|
|
||||||
target="_blank">Rotimi Best</a
|
|
||||||
></span
|
></span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
export let maxRows = 3;
|
export let maxRows = 3;
|
||||||
export let className = '';
|
export let className = '';
|
||||||
export let labelClassName = '';
|
export let labelClassName = '';
|
||||||
export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
|
export let bgColor = 'bg-gray-50 focus:bg-primary-50 dark:bg-white';
|
||||||
export let helperMessage = '';
|
export let helperMessage = '';
|
||||||
export let errorMessage = '';
|
export let errorMessage = '';
|
||||||
export let isRequired = false;
|
export let isRequired = false;
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
{placeholder}
|
{placeholder}
|
||||||
bind:value
|
bind:value
|
||||||
required={isRequired}
|
required={isRequired}
|
||||||
class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
|
class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
|
||||||
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
|
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
export let className = '';
|
export let className = '';
|
||||||
export let inputClassName = '';
|
export let inputClassName = '';
|
||||||
export let labelClassName = '';
|
export let labelClassName = '';
|
||||||
export let bgColor = 'bg-gray-100 focus:bg-blue-50 dark:bg-white';
|
export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-white';
|
||||||
export let type = 'text';
|
export let type = 'text';
|
||||||
export let isPassword = false;
|
export let isPassword = false;
|
||||||
export let autoFocus = false;
|
export let autoFocus = false;
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
<input
|
<input
|
||||||
use:typeAction
|
use:typeAction
|
||||||
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
||||||
? 'border-red-600'
|
? 'border-red-600'
|
||||||
: ''}"
|
: ''}"
|
||||||
on:keydown={onKeyDown}
|
on:keydown={onKeyDown}
|
||||||
|
|||||||
@@ -4,9 +4,8 @@
|
|||||||
|
|
||||||
<div class="break-all">
|
<div class="break-all">
|
||||||
{#each tags as tag}
|
{#each tags as tag}
|
||||||
<a
|
<a class="text-primary-700 dark:text-primary-500 mr-5 text-sm" href="?filter={tag}"
|
||||||
class="text-blue-700 dark:text-blue-500 mr-5 text-sm"
|
>#{tag.toLowerCase()}</a
|
||||||
href="?filter={tag}">#{tag.toLowerCase()}</a
|
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="dark"
|
class=""
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -59,7 +59,7 @@
|
|||||||
height="h-7"
|
height="h-7"
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
|
<TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<OrgSelector />
|
<OrgSelector />
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
this={item.icon}
|
this={item.icon}
|
||||||
color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
|
color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
|
||||||
size={24}
|
size={24}
|
||||||
class="carbon-icon dark:text-white"
|
class="carbon-icon text-white"
|
||||||
/>
|
/>
|
||||||
<p class="dark:text-white ml-2">{item.name}</p>
|
<p class="dark:text-white ml-2">{item.name}</p>
|
||||||
</li>
|
</li>
|
||||||
@@ -88,16 +88,14 @@
|
|||||||
<span class="flex-grow" />
|
<span class="flex-grow" />
|
||||||
<ul class="my-5 pb-5 px-4">
|
<ul class="my-5 pb-5 px-4">
|
||||||
<a href="/lms" class="text-black">
|
<a href="/lms" class="text-black">
|
||||||
<li
|
<li class="flex items-center py-3 px-4 mb-2 rounded">
|
||||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
|
|
||||||
>
|
|
||||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||||
<p class="dark:text-white ml-2">Help</p>
|
<p class="dark:text-white ml-2">Help</p>
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
<a href="/lms/settings" class="text-black">
|
<a href="/lms/settings" class="text-black">
|
||||||
<li
|
<li
|
||||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
class="flex items-center py-3 px-4 mb-2 rounded {isActive(
|
||||||
$page.url.pathname,
|
$page.url.pathname,
|
||||||
`/lms/settings`
|
`/lms/settings`
|
||||||
) && NavClasses.active}"
|
) && NavClasses.active}"
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
<div class="header w-full flex items-center">
|
<div class="header w-full flex items-center">
|
||||||
<Datepicker bind:store let:key let:send let:receive>
|
<Datepicker bind:store let:key let:send let:receive>
|
||||||
<button
|
<button
|
||||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||||
in:receive|local={{ key }}
|
in:receive|local={{ key }}
|
||||||
out:send|local={{ key }}
|
out:send|local={{ key }}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
export let value;
|
export let value;
|
||||||
export let placeholder = ``;
|
export let placeholder = ``;
|
||||||
const activeClassName = 'border-b-2 border-blue-700';
|
const activeClassName = 'border-b-2 border-primary-700';
|
||||||
let isWriteMode = true;
|
let isWriteMode = true;
|
||||||
|
|
||||||
const handleTabClick = (tab) => (event) => {
|
const handleTabClick = (tab) => (event) => {
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
export let navClass = '';
|
export let navClass = '';
|
||||||
export let isCoursePage = false;
|
export let isCoursePage = false;
|
||||||
|
|
||||||
function toggleTheme() {
|
function toggleDarkMode() {
|
||||||
$appStore.isDark = !$appStore.isDark;
|
$appStore.isDark = !$appStore.isDark;
|
||||||
|
|
||||||
toggleBodyByTheme($appStore.isDark);
|
toggleBodyByTheme($appStore.isDark);
|
||||||
@@ -36,7 +36,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-700">
|
<nav
|
||||||
|
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
|
||||||
|
>
|
||||||
<ul class="flex w-full items-center">
|
<ul class="flex w-full items-center">
|
||||||
<div class="flex items-center text-white">
|
<div class="flex items-center text-white">
|
||||||
{#if isCoursePage}
|
{#if isCoursePage}
|
||||||
@@ -66,7 +68,7 @@
|
|||||||
<NotificationIcon size={20} class="text-white mr-2" />
|
<NotificationIcon size={20} class="text-white mr-2" />
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<IconButton size="small" onClick={toggleTheme}>
|
<IconButton size="small" onClick={toggleDarkMode}>
|
||||||
{#if $appStore.isDark}
|
{#if $appStore.isDark}
|
||||||
<Sun size={16} class="text-white" />
|
<Sun size={16} class="text-white" />
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
export let navClass = '';
|
export let navClass = '';
|
||||||
|
|
||||||
function toggleTheme() {
|
function toggleDarkMode() {
|
||||||
$appStore.isDark = !$appStore.isDark;
|
$appStore.isDark = !$appStore.isDark;
|
||||||
|
|
||||||
toggleBodyByTheme($appStore.isDark);
|
toggleBodyByTheme($appStore.isDark);
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
|
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
|
||||||
<ul class="flex w-full items-center">
|
<ul class="flex w-full items-center">
|
||||||
<div class="">
|
<div class="">
|
||||||
<a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
|
<a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
<NotificationIcon size={20} class="text-white mr-2" />
|
<NotificationIcon size={20} class="text-white mr-2" />
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<IconButton size="small" onClick={toggleTheme}>
|
<IconButton size="small" onClick={toggleDarkMode}>
|
||||||
{#if $appStore.isDark}
|
{#if $appStore.isDark}
|
||||||
<SunIcon size={16} class="text-white" />
|
<SunIcon size={16} class="text-white" />
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@@ -8,16 +8,9 @@
|
|||||||
export let open = false;
|
export let open = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Modal
|
<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Delete comment">
|
||||||
onClose={() => (open = false)}
|
|
||||||
bind:open
|
|
||||||
width="w-96"
|
|
||||||
modalHeading="Delete comment"
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<h1 class="dark:text-white text-lg">
|
<h1 class="dark:text-white text-lg">Are you sure you want to delete this comment?</h1>
|
||||||
Are you sure you want to delete this comment?
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div class="mt-5 flex items-center justify-between">
|
<div class="mt-5 flex items-center justify-between">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
@@ -28,7 +21,7 @@
|
|||||||
/>
|
/>
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label="Yes, delete"
|
label="Yes, delete"
|
||||||
onClick={onDelete}
|
onClick={onDelete}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -151,9 +151,9 @@
|
|||||||
>
|
>
|
||||||
<!-- Course Description -->
|
<!-- Course Description -->
|
||||||
<div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
|
<div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
|
||||||
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
|
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
|
||||||
<h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
|
<h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
|
||||||
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
|
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-md mb-6 text-xl">
|
<p class="text-md mb-6 text-xl">
|
||||||
Practical project-based courses that are easy to understand and straight to the point
|
Practical project-based courses that are easy to understand and straight to the point
|
||||||
@@ -179,9 +179,9 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<div class="w-full h-full flex items-center justify-center md:flex-row z-20 relative">
|
<div class="w-full h-full flex items-center justify-center md:flex-row z-20 relative">
|
||||||
<div class="max-w-[600px] mx-auto w-11/12 py-10 flex flex-col items-center">
|
<div class="max-w-[600px] mx-auto w-11/12 py-10 flex flex-col items-center">
|
||||||
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
|
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
|
||||||
<h1 class="text-4xl md:text-6xl text-center my-4 font-bold">
|
<h1 class="text-4xl md:text-6xl text-center my-4 font-bold">
|
||||||
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
|
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-md mb-6 text-center text-xl">
|
<p class="text-md mb-6 text-center text-xl">
|
||||||
Practical project-based courses that are easy to understand and straight to the point
|
Practical project-based courses that are easy to understand and straight to the point
|
||||||
@@ -227,7 +227,7 @@
|
|||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
||||||
<h1 class="text-5xl text-center my-4 font-bold">
|
<h1 class="text-5xl text-center my-4 font-bold">
|
||||||
Explore our <span class="text-blue-600">Courses</span>
|
Explore our <span class="text-primary-600">Courses</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-md text-center">
|
<p class="text-md text-center">
|
||||||
Find courses you will love from best teachers all over the world🌎.
|
Find courses you will love from best teachers all over the world🌎.
|
||||||
@@ -297,11 +297,11 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section-->
|
<!-- Contact Section-->
|
||||||
<section id="contact" transition:fade class="my-10 w-full bg-blue-50">
|
<section id="contact" transition:fade class="my-10 w-full bg-primary-50">
|
||||||
<div class="mx-auto max-w-6xl w-full">
|
<div class="mx-auto max-w-6xl w-full">
|
||||||
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
||||||
<h1 class="text-5xl text-center my-4 font-bold">
|
<h1 class="text-5xl text-center my-4 font-bold">
|
||||||
Have you got any <span class="text-blue-600">Question?</span>
|
Have you got any <span class="text-primary-600">Question?</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-md text-center">Reach out to us with any question you might have.</p>
|
<p class="text-md text-center">Reach out to us with any question you might have.</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -393,7 +393,7 @@
|
|||||||
<!-- Waitlist Section -->
|
<!-- Waitlist Section -->
|
||||||
<section id="waitlist" transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
|
<section id="waitlist" transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
|
||||||
<div
|
<div
|
||||||
class="bg-blue-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
|
class="bg-primary-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
|
||||||
>
|
>
|
||||||
<div class="w-full md:w-[65%] md:mr-4">
|
<div class="w-full md:w-[65%] md:mr-4">
|
||||||
<h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
|
<h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
|
||||||
@@ -474,7 +474,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<p class="text-center mt-5">
|
<p class="text-center mt-5">
|
||||||
Powered by
|
Powered by
|
||||||
<a class="text-blue-600 underline" href="https://classroomio.com" target="_blank"
|
<a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
|
||||||
>ClassroomIO</a
|
>ClassroomIO</a
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -12,15 +12,12 @@
|
|||||||
...m,
|
...m,
|
||||||
open: false,
|
open: false,
|
||||||
id: null,
|
id: null,
|
||||||
isQuestion: false,
|
isQuestion: false
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
async function deleteQuiz() {
|
async function deleteQuiz() {
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase.from('quiz').delete().match({ id: $deleteModal.id });
|
||||||
.from('quiz')
|
|
||||||
.delete()
|
|
||||||
.match({ id: $deleteModal.id });
|
|
||||||
console.log('data', data);
|
console.log('data', data);
|
||||||
console.log('error', error);
|
console.log('error', error);
|
||||||
|
|
||||||
@@ -53,7 +50,7 @@
|
|||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
className="px-6 py-3"
|
className="px-6 py-3"
|
||||||
variant={VARIANTS.CONTAINED_DANGER}
|
variant={VARIANTS.CONTAINED}
|
||||||
label="Delete"
|
label="Delete"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if ($deleteModal.isQuestion) {
|
if ($deleteModal.isQuestion) {
|
||||||
|
|||||||
@@ -12,18 +12,18 @@
|
|||||||
css: (t) => `
|
css: (t) => `
|
||||||
${slideTrans.css(t)}
|
${slideTrans.css(t)}
|
||||||
opacity: ${t};
|
opacity: ${t};
|
||||||
`,
|
`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="circle flex items-center flex-col justify-center {className}">
|
<div class="circle flex items-center flex-col justify-center {className}">
|
||||||
{#key value}
|
{#key value}
|
||||||
<h3 class="text-blue-600" transition:fadeSlide={{ duration: 500 }}>
|
<h3 class="text-primary-600" transition:fadeSlide={{ duration: 500 }}>
|
||||||
{value}
|
{value}
|
||||||
</h3>
|
</h3>
|
||||||
{/key}
|
{/key}
|
||||||
<p class="text-blue-600 text-md">{label}</p>
|
<p class="text-primary-600 text-md">{label}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -13,29 +13,50 @@
|
|||||||
|
|
||||||
let avatar;
|
let avatar;
|
||||||
let loading = false;
|
let loading = false;
|
||||||
|
const themes = {
|
||||||
|
rose: 'theme-rose',
|
||||||
|
green: 'theme-green',
|
||||||
|
orange: 'theme-orange',
|
||||||
|
violet: 'theme-violet',
|
||||||
|
default: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleChangeTheme(t = '') {
|
||||||
|
return async () => {
|
||||||
|
document.body.className = document.body.className
|
||||||
|
.split(' ')
|
||||||
|
.filter((c) => !c.includes('theme'))
|
||||||
|
.join(' ')
|
||||||
|
.concat(!!t ? ' ' : '', t);
|
||||||
|
$currentOrg.theme = t;
|
||||||
|
|
||||||
|
const res = await supabase
|
||||||
|
.from('organization')
|
||||||
|
.update({ theme: t })
|
||||||
|
.match({ id: $currentOrg.id });
|
||||||
|
|
||||||
|
console.log('Update theme', res);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
async function handleUpdate() {
|
async function handleUpdate() {
|
||||||
try {
|
try {
|
||||||
loading = true;
|
loading = true;
|
||||||
|
|
||||||
const updates = {
|
const updates = {
|
||||||
name: $currentOrg.name,
|
name: $currentOrg.name
|
||||||
};
|
};
|
||||||
|
|
||||||
if (avatar) {
|
if (avatar) {
|
||||||
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
|
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
|
||||||
|
|
||||||
const { data } = await supabase.storage
|
const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
|
||||||
.from('avatars')
|
cacheControl: '3600',
|
||||||
.upload(filename, avatar, {
|
upsert: false
|
||||||
cacheControl: '3600',
|
});
|
||||||
upsert: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (data && data.Key) {
|
if (data && data.Key) {
|
||||||
const { publicURL } = supabase.storage
|
const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
|
||||||
.from('avatars')
|
|
||||||
.getPublicUrl(filename);
|
|
||||||
|
|
||||||
updates.avatar_url = publicURL;
|
updates.avatar_url = publicURL;
|
||||||
$currentOrg.avatar_url = publicURL;
|
$currentOrg.avatar_url = publicURL;
|
||||||
@@ -50,7 +71,7 @@
|
|||||||
|
|
||||||
currentOrg.update((_currentOrg) => ({
|
currentOrg.update((_currentOrg) => ({
|
||||||
..._currentOrg,
|
..._currentOrg,
|
||||||
...updates,
|
...updates
|
||||||
}));
|
}));
|
||||||
$snackbarStore.open = true;
|
$snackbarStore.open = true;
|
||||||
$snackbarStore.message = 'Update successful';
|
$snackbarStore.message = 'Update successful';
|
||||||
@@ -78,15 +99,9 @@
|
|||||||
|
|
||||||
<Grid class="border-c rounded border-gray-200 w-full mt-5">
|
<Grid class="border-c rounded border-gray-200 w-full mt-5">
|
||||||
<Row class="py-7 border-bottom-c">
|
<Row class="py-7 border-bottom-c">
|
||||||
<Column sm={2} md={2} lg={4}
|
<Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
|
||||||
><SectionTitle>Organization Profile</SectionTitle></Column
|
|
||||||
>
|
|
||||||
<Column sm={2} md={6} lg={8}>
|
<Column sm={2} md={6} lg={8}>
|
||||||
<TextField
|
<TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
|
||||||
label="Organization Name"
|
|
||||||
bind:value={$currentOrg.name}
|
|
||||||
className="w-60 mb-5"
|
|
||||||
/>
|
|
||||||
<UploadImage
|
<UploadImage
|
||||||
bind:avatar
|
bind:avatar
|
||||||
src={$currentOrg.avatar_url}
|
src={$currentOrg.avatar_url}
|
||||||
@@ -102,24 +117,64 @@
|
|||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
</Row>
|
</Row>
|
||||||
<!-- <Row class="py-7 border-bottom-c">
|
<Row class="py-7 border-bottom-c">
|
||||||
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
|
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
|
||||||
<Column sm={2} md={6} lg={8}>
|
<Column sm={2} md={6} lg={8}>
|
||||||
<h4 class="dark:text-white">Set your brand</h4>
|
<h4 class="dark:text-white mt-0">Set your brand color</h4>
|
||||||
|
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
class="rounded-full border-2 {$currentOrg.theme === themes.default &&
|
||||||
|
'border-[#1d4ee2]'} mr-3"
|
||||||
|
on:click={handleChangeTheme(themes.default)}
|
||||||
|
>
|
||||||
|
<div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
|
||||||
|
'border-[#be1241]'} mr-3"
|
||||||
|
on:click={handleChangeTheme(themes.rose)}
|
||||||
|
>
|
||||||
|
<div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="rounded-full border-2 {$currentOrg.theme === themes.green &&
|
||||||
|
'border-[#0c891b]'} mr-3"
|
||||||
|
on:click={handleChangeTheme(themes.green)}
|
||||||
|
>
|
||||||
|
<div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
|
||||||
|
'border-[#cc4902]'} mr-3"
|
||||||
|
on:click={handleChangeTheme(themes.orange)}
|
||||||
|
>
|
||||||
|
<div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
|
||||||
|
'border-[#cf00ce]'} mr-3"
|
||||||
|
on:click={handleChangeTheme(themes.violet)}
|
||||||
|
>
|
||||||
|
<div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</Column>
|
</Column>
|
||||||
</Row> -->
|
</Row>
|
||||||
<Row class="py-7 border-bottom-c">
|
<Row class="py-7 border-bottom-c">
|
||||||
<Column sm={2} md={2} lg={4}
|
<Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
|
||||||
><SectionTitle>Custom Domain</SectionTitle></Column
|
|
||||||
>
|
|
||||||
<Column sm={2} md={6} lg={8}>
|
<Column sm={2} md={6} lg={8}>
|
||||||
<h4 class="dark:text-white">Customise your Domain</h4>
|
<h4 class="dark:text-white mt-0">Customise your Domain</h4>
|
||||||
<p class="text-sm text-gray-500 dark:text-white">
|
<p class="text-sm text-gray-500 dark:text-white">
|
||||||
Create a custom URL so your audience can get to your organization easily
|
Create a custom URL so your audience can get to your organization easily
|
||||||
</p>
|
</p>
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Edit domain"
|
label="Edit domain"
|
||||||
className="my-7 py-5 px-10 text-blue-700"
|
className="my-7 py-5 px-10 text-primary-700"
|
||||||
variant={VARIANTS.OUTLINED}
|
variant={VARIANTS.OUTLINED}
|
||||||
onClick={() => gotoSetting('/domains')}
|
onClick={() => gotoSetting('/domains')}
|
||||||
/>
|
/>
|
||||||
@@ -130,12 +185,11 @@
|
|||||||
<Column sm={2} md={6} lg={8}>
|
<Column sm={2} md={6} lg={8}>
|
||||||
<h4 class="dark:text-white">Set up your website</h4>
|
<h4 class="dark:text-white">Set up your website</h4>
|
||||||
<p class="text-sm text-gray-500 dark:text-white">
|
<p class="text-sm text-gray-500 dark:text-white">
|
||||||
Add team mates to your organization so you can both collaborate on
|
Add team mates to your organization so you can both collaborate on projects.
|
||||||
projects.
|
|
||||||
</p>
|
</p>
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Manage Team"
|
label="Manage Team"
|
||||||
className="my-7 py-5 px-10 text-blue-700"
|
className="my-7 py-5 px-10 text-primary-700"
|
||||||
variant={VARIANTS.OUTLINED}
|
variant={VARIANTS.OUTLINED}
|
||||||
onClick={() => gotoSetting('/teams')}
|
onClick={() => gotoSetting('/teams')}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -99,6 +99,6 @@
|
|||||||
isDisabled={loading}
|
isDisabled={loading}
|
||||||
onClick={handleUpdate}
|
onClick={handleUpdate}
|
||||||
/>
|
/>
|
||||||
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
|
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
|
||||||
</Row>
|
</Row>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
height="h-7"
|
height="h-7"
|
||||||
/>
|
/>
|
||||||
{:else if $currentOrg.shortName}
|
{:else if $currentOrg.shortName}
|
||||||
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
|
<TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<OrgSelector />
|
<OrgSelector />
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
{#each menuItems as menuItem}
|
{#each menuItems as menuItem}
|
||||||
<a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
|
<a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
|
||||||
<li
|
<li
|
||||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-primary-200 dark:hover:bg-gray-700 {isActive(
|
||||||
$page.url.pathname,
|
$page.url.pathname,
|
||||||
`${$currentOrgPath}${menuItem.path}`
|
`${$currentOrgPath}${menuItem.path}`
|
||||||
) && NavClasses.active}"
|
) && NavClasses.active}"
|
||||||
@@ -107,16 +107,14 @@
|
|||||||
<span class="flex-grow" />
|
<span class="flex-grow" />
|
||||||
<ul class="my-5 pb-5 px-4">
|
<ul class="my-5 pb-5 px-4">
|
||||||
<a href={$currentOrgPath} class="text-black no-underline">
|
<a href={$currentOrgPath} class="text-black no-underline">
|
||||||
<li
|
<li class="flex items-center py-3 px-4 mb-2 rounded">
|
||||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
|
|
||||||
>
|
|
||||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||||
<p class="dark:text-white ml-2">Help</p>
|
<p class="dark:text-white ml-2">Help</p>
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
<a href="{$currentOrgPath}/settings" class="text-black no-underline">
|
<a href="{$currentOrgPath}/settings" class="text-black no-underline">
|
||||||
<li
|
<li
|
||||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
class="flex items-center py-3 px-4 mb-2 rounded {isActive(
|
||||||
$page.url.pathname,
|
$page.url.pathname,
|
||||||
`${$currentOrgPath}/settings`
|
`${$currentOrgPath}/settings`
|
||||||
) && NavClasses.active}"
|
) && NavClasses.active}"
|
||||||
|
|||||||
@@ -13,15 +13,14 @@
|
|||||||
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<button
|
<button
|
||||||
class="{disabled &&
|
class="{disabled && 'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
|
||||||
'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
|
'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
|
||||||
'border-b border-gray-100'} {active && 'bg-blue-100 dark:bg-gray-500'}"
|
|
||||||
on:click={onClick}
|
on:click={onClick}
|
||||||
>
|
>
|
||||||
{#if avatarText}
|
{#if avatarText}
|
||||||
<TextChip
|
<TextChip
|
||||||
value={avatarText}
|
value={avatarText}
|
||||||
className="mr-2 bg-blue-200 font-bold dark:bg-gray-600"
|
className="mr-2 bg-primary-200 font-bold dark:bg-gray-600"
|
||||||
{size}
|
{size}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
// import
|
// import
|
||||||
// border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
|
// border border-gray-300 rounded-md p-3 bg-primary-200 bg-opacity-25
|
||||||
export let width = 'max-w-4xl 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 padding = 'pb-5 px-4';
|
||||||
export let className = '';
|
export let className = '';
|
||||||
|
|||||||
@@ -12,15 +12,16 @@ export const VARIANTS = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const VARIANTS_CLASS = {
|
export const VARIANTS_CLASS = {
|
||||||
[VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white font-bold',
|
[VARIANTS.CONTAINED]: 'border-none bg-primary-700 hover:bg-primary-900 text-white font-bold',
|
||||||
[VARIANTS.CONTAINED_LIGHT]: 'border-none bg-blue-600 hover:bg-blue-900 text-white font-bold',
|
[VARIANTS.CONTAINED_LIGHT]:
|
||||||
|
'border-none bg-primary-600 hover:bg-primary-900 text-white font-bold',
|
||||||
[VARIANTS.CONTAINED_WHITE]:
|
[VARIANTS.CONTAINED_WHITE]:
|
||||||
'border-none hover:border-black-300 hover:bg-blue-700 dark:hover:bg-blue-900 text-black hover:text-white bg-white',
|
'border-none hover:border-black-300 hover:bg-primary-700 dark:hover:bg-primary-900 text-black hover:text-white bg-white',
|
||||||
[VARIANTS.CONTAINED_INFO]: 'border-none bg-gray-400 hover:bg-gray-600 text-white',
|
[VARIANTS.CONTAINED_INFO]: 'border-none bg-gray-400 hover:bg-gray-600 text-white',
|
||||||
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
|
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
|
||||||
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
|
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
|
||||||
[VARIANTS.OUTLINED]:
|
[VARIANTS.OUTLINED]:
|
||||||
'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white dark:text-white',
|
'border border-primary-700 hover:border-black-300 hover:bg-primary-700 text-black dark:text-white',
|
||||||
[VARIANTS.NONE]:
|
[VARIANTS.NONE]:
|
||||||
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
|
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
|
||||||
[VARIANTS.TEXT]: 'text-black hover:underline',
|
[VARIANTS.TEXT]: 'text-black hover:underline',
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
isLoading ? VARIANTS.OUTLINED : variant
|
isLoading ? VARIANTS.OUTLINED : variant
|
||||||
]} {!disablePadding &&
|
]} {!disablePadding &&
|
||||||
'py-[0.60rem] px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
|
'py-[0.60rem] px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
|
||||||
'py-[0.60rem] border-blue-700'} {variant !== VARIANTS.TEXT &&
|
'py-[0.60rem] border-primary-700'} {variant !== VARIANTS.TEXT &&
|
||||||
'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
|
'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
|
||||||
VARIANTS.CONTAINED_WHITE
|
VARIANTS.CONTAINED_WHITE
|
||||||
? 'dark:text-white'
|
? 'dark:text-white'
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="root bg-blue-700 hover:bg-blue-900 text-white font-bold rounded inline-flex items-center float-right"
|
class="root bg-primary-700 hover:bg-primary-900 text-white font-bold rounded inline-flex items-center float-right"
|
||||||
{href}
|
{href}
|
||||||
on:click={handleClick}
|
on:click={handleClick}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<div class="w-full h-3 rounded-md bg-gray-300 relative">
|
<div class="w-full h-3 rounded-md bg-gray-300 relative">
|
||||||
<span
|
<span
|
||||||
class="progress absolute top-0 left-0 rounded-md bg-blue-700 h-full"
|
class="progress absolute top-0 left-0 rounded-md bg-primary-700 h-full"
|
||||||
style="width: {value}%;"
|
style="width: {value}%;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
ref.scrollIntoView({
|
ref.scrollIntoView({
|
||||||
block: 'start',
|
block: 'start',
|
||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
inline: 'nearest',
|
inline: 'nearest'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -31,10 +31,10 @@
|
|||||||
bind:this={ref}
|
bind:this={ref}
|
||||||
class="bg-white dark:bg-gray-800 border {hasError
|
class="bg-white dark:bg-gray-800 border {hasError
|
||||||
? 'border-red-700'
|
? 'border-red-700'
|
||||||
: 'border-gray hover:border-blue-700'} rounded-md mb-6 relative root"
|
: 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
|
||||||
>
|
>
|
||||||
{#if isTitle}
|
{#if isTitle}
|
||||||
<div class="title absolute bg-blue-700" />
|
<div class="title absolute bg-primary-700" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if onClose && !isTitle}
|
{#if onClose && !isTitle}
|
||||||
|
|||||||
@@ -3,13 +3,13 @@ export const SNACKBAR_SEVERITY = {
|
|||||||
WARNING: 'WARNING',
|
WARNING: 'WARNING',
|
||||||
DEFAULT: 'DEFAULT',
|
DEFAULT: 'DEFAULT',
|
||||||
INFO: 'INFO',
|
INFO: 'INFO',
|
||||||
SUCCESS: 'SUCCESS',
|
SUCCESS: 'SUCCESS'
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SNACKBAR_SEVERITY_COLOR = {
|
export const SNACKBAR_SEVERITY_COLOR = {
|
||||||
ERROR: 'bg-red-600',
|
ERROR: 'bg-red-600',
|
||||||
WARNING: 'bg-yellow-600',
|
WARNING: 'bg-yellow-600',
|
||||||
INFO: 'bg-blue-600',
|
INFO: 'bg-primary-600',
|
||||||
DEFAULT: 'bg-gray-600',
|
DEFAULT: 'bg-gray-600',
|
||||||
SUCCESS: 'bg-green-600',
|
SUCCESS: 'bg-green-600'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
{#if !tab.icon && !tab.badgeValue}
|
{#if !tab.icon && !tab.badgeValue}
|
||||||
<button
|
<button
|
||||||
class="relative {currentTab === tab.value
|
class="relative {currentTab === tab.value
|
||||||
? 'text-blue-700'
|
? 'text-primary-700'
|
||||||
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
|
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
|
||||||
on:click={onChange(tab.value)}
|
on:click={onChange(tab.value)}
|
||||||
>
|
>
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
{tab.label}
|
{tab.label}
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
|
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||||
tab.value
|
tab.value
|
||||||
? 'w-full'
|
? 'w-full'
|
||||||
: 'w-0'}"
|
: 'w-0'}"
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<button
|
<button
|
||||||
class="relative {currentTab === tab.value
|
class="relative {currentTab === tab.value
|
||||||
? 'text-blue-700'
|
? 'text-primary-700'
|
||||||
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
|
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
|
||||||
on:click={onChange(tab.value)}
|
on:click={onChange(tab.value)}
|
||||||
>
|
>
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
|
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||||
tab.value
|
tab.value
|
||||||
? 'w-full'
|
? 'w-full'
|
||||||
: 'w-0'}"
|
: 'w-0'}"
|
||||||
|
|||||||
@@ -39,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="width-fit text-blue-700 flex items-center cursor-pointer text-sm mt-3"
|
class="width-fit text-primary-700 flex items-center cursor-pointer text-sm mt-3"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
fileinput.click();
|
fileinput.click();
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -18,18 +18,13 @@
|
|||||||
<p class="text-black text-sm md:text-base lg:text-lg">
|
<p class="text-black text-sm md:text-base lg:text-lg">
|
||||||
We at <a
|
We at <a
|
||||||
href="https://app.classroomio.com/"
|
href="https://app.classroomio.com/"
|
||||||
class="text-blue-700 no-underline hover:no-underline">ClassroomIO</a
|
class="text-primary-700 no-underline hover:no-underline">ClassroomIO</a
|
||||||
>
|
>
|
||||||
are a small team with a large mission to empower educators with great
|
are a small team with a large mission to empower educators with great technology to help them train
|
||||||
technology to help them train the future generation. Education is the most
|
the future generation. Education is the most powerful gift you can give anyone, and it makes so much
|
||||||
powerful gift you can give anyone, and it makes so much sense to give you
|
sense to give you all the tools you need to give more people this GIFT.
|
||||||
all the tools you need to give more people this GIFT.
|
<span class="text-primary-700">Thank you for choosing us;</span> we deeply appreciate it and are
|
||||||
<span class="text-blue-700">Thank you for choosing us;</span> we deeply appreciate
|
at your service.
|
||||||
it and are at your service.
|
|
||||||
</p>
|
</p>
|
||||||
<img
|
<img src="/images/welcome-modal-banner.svg" alt="A welcome banner" class="w-full my-6" />
|
||||||
src="/images/welcome-modal-banner.svg"
|
|
||||||
alt="A welcome banner"
|
|
||||||
class="w-full my-6"
|
|
||||||
/>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
export const NavClasses = {
|
export const NavClasses = {
|
||||||
active: 'bg-gray-200 dark:bg-gray-700',
|
active: 'active-sidenav bg-primary-700 text-white transition delay-150 duration-300 ease-in-out',
|
||||||
background: ''
|
background: ''
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -58,6 +58,7 @@ export async function getOrganizations(userId) {
|
|||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
siteName,
|
siteName,
|
||||||
|
theme,
|
||||||
avatar_url
|
avatar_url
|
||||||
)
|
)
|
||||||
`
|
`
|
||||||
@@ -72,6 +73,7 @@ export async function getOrganizations(userId) {
|
|||||||
name: orgMember?.organization?.name,
|
name: orgMember?.organization?.name,
|
||||||
shortName: orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
|
shortName: orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
|
||||||
siteName: orgMember?.organization?.siteName,
|
siteName: orgMember?.organization?.siteName,
|
||||||
|
theme: orgMember?.organization?.theme,
|
||||||
avatar_url: orgMember?.organization?.avatar_url,
|
avatar_url: orgMember?.organization?.avatar_url,
|
||||||
memberId: orgMember?.id
|
memberId: orgMember?.id
|
||||||
});
|
});
|
||||||
@@ -155,7 +157,7 @@ export async function getCourseBySiteName(siteName) {
|
|||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getCurrentOrg(siteName) {
|
export async function getCurrentOrg(siteName, justGet = false) {
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase
|
||||||
.from('organization')
|
.from('organization')
|
||||||
.select(
|
.select(
|
||||||
@@ -163,15 +165,20 @@ export async function getCurrentOrg(siteName) {
|
|||||||
id,
|
id,
|
||||||
name,
|
name,
|
||||||
siteName,
|
siteName,
|
||||||
|
theme,
|
||||||
avatar_url
|
avatar_url
|
||||||
`
|
`
|
||||||
)
|
)
|
||||||
.eq('siteName', siteName);
|
.eq('siteName', siteName);
|
||||||
|
|
||||||
if (error || isEmpty(data)) {
|
if (!justGet && (error || isEmpty(data))) {
|
||||||
console.error('Error getOrganization', error);
|
console.error('Error getOrganization', error);
|
||||||
return goto('/404');
|
return goto('/404');
|
||||||
}
|
}
|
||||||
|
|
||||||
currentOrg.set(data[0]);
|
if (!justGet) {
|
||||||
|
currentOrg.set(data[0]);
|
||||||
|
} else {
|
||||||
|
return data[0];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ export const currentOrg = writable({
|
|||||||
shortName: '',
|
shortName: '',
|
||||||
siteName: '',
|
siteName: '',
|
||||||
avatar_url: '',
|
avatar_url: '',
|
||||||
|
theme: '',
|
||||||
memberId: ''
|
memberId: ''
|
||||||
});
|
});
|
||||||
export const orgAudience = writable([]);
|
export const orgAudience = writable([]);
|
||||||
|
|||||||
@@ -24,12 +24,12 @@
|
|||||||
Something unexpected occured.
|
Something unexpected occured.
|
||||||
</h2>
|
</h2>
|
||||||
<p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
|
<p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
|
||||||
Don't worry, your learning is safe. It isn't your fault, it is ours. We
|
Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error
|
||||||
have gotten the error notification and will push a fix ASAP. In the
|
notification and will push a fix ASAP. In the meantime, take a short break and come back a bit
|
||||||
meantime, take a short break and come back a bit later.
|
later.
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||||
href="mailto:support@classroomio.com">Contact Us</a
|
href="mailto:support@classroomio.com">Contact Us</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
// import { redirect } from '@sveltejs/kit';
|
// import { redirect } from '@sveltejs/kit';
|
||||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
import { blockedSubdomain } from '$lib/utils/constants/app';
|
||||||
|
import { getCurrentOrg } from '$lib/utils/services/org';
|
||||||
|
|
||||||
/** @type {import('./$types').LayoutServerLoad} */
|
/** @type {import('./$types').LayoutServerLoad} */
|
||||||
export const load = ({ url, cookies }) => {
|
export const load = async ({ url, cookies }) => {
|
||||||
// if (url.hostname === 'classroomio.com') {
|
// if (url.hostname === 'classroomio.com') {
|
||||||
// throw redirect(301, 'https://about.classroomio.com');
|
// throw redirect(301, 'https://about.classroomio.com');
|
||||||
// }
|
// }
|
||||||
@@ -10,7 +11,8 @@ export const load = ({ url, cookies }) => {
|
|||||||
let response = {
|
let response = {
|
||||||
orgSiteName: '',
|
orgSiteName: '',
|
||||||
isOrgSite: false,
|
isOrgSite: false,
|
||||||
skipAuth: false
|
skipAuth: false,
|
||||||
|
org: {}
|
||||||
};
|
};
|
||||||
|
|
||||||
const debugOrgLandingPage = cookies.get('debugOrgLandingPage');
|
const debugOrgLandingPage = cookies.get('debugOrgLandingPage');
|
||||||
@@ -26,6 +28,7 @@ export const load = ({ url, cookies }) => {
|
|||||||
|
|
||||||
response.isOrgSite = debugMode || answer;
|
response.isOrgSite = debugMode || answer;
|
||||||
response.orgSiteName = debugMode ? 'codingdojo' : subdomain;
|
response.orgSiteName = debugMode ? 'codingdojo' : subdomain;
|
||||||
|
response.org = await getCurrentOrg(response.orgSiteName, true);
|
||||||
} else if (subdomain === 'play' || debugPlay === 'true') {
|
} else if (subdomain === 'play' || debugPlay === 'true') {
|
||||||
response.skipAuth = true;
|
response.skipAuth = true;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -34,7 +34,6 @@
|
|||||||
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
||||||
import { appStore } from '$lib/utils/store/app';
|
import { appStore } from '$lib/utils/store/app';
|
||||||
import { currentOrg } from '$lib/utils/store/org';
|
import { currentOrg } from '$lib/utils/store/org';
|
||||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
|
||||||
|
|
||||||
import '../app.postcss';
|
import '../app.postcss';
|
||||||
|
|
||||||
@@ -48,6 +47,10 @@
|
|||||||
setTimeout(() => set(currentPreloading), 250);
|
setTimeout(() => set(currentPreloading), 250);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function setTheme(theme) {
|
||||||
|
document.body.className = document.body.className.concat(' ', theme);
|
||||||
|
}
|
||||||
|
|
||||||
function setupSentry() {
|
function setupSentry() {
|
||||||
if (!dev) {
|
if (!dev) {
|
||||||
Sentry.init({
|
Sentry.init({
|
||||||
@@ -173,6 +176,8 @@
|
|||||||
// By default redirect to first organization
|
// By default redirect to first organization
|
||||||
goto(`/org/${orgRes.currentOrg.siteName}`);
|
goto(`/org/${orgRes.currentOrg.siteName}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTheme(orgRes.currentOrg.theme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -237,9 +242,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (data.isOrgSite) {
|
if (data.isOrgSite) {
|
||||||
|
console.log('data', data);
|
||||||
$appStore.orgSiteName = data.orgSiteName;
|
$appStore.orgSiteName = data.orgSiteName;
|
||||||
$appStore.isOrgSite = data.isOrgSite;
|
$appStore.isOrgSite = data.isOrgSite;
|
||||||
getCurrentOrg(data.orgSiteName);
|
|
||||||
|
currentOrg.set(data.org);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
@@ -357,7 +364,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.dark svg.dark path) {
|
:global(.dark svg.dark path),
|
||||||
|
:global(.active-sidenav svg.dark path),
|
||||||
|
:global(.active-sidenav svg.carbon-icon path) {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -62,7 +62,7 @@
|
|||||||
-->
|
-->
|
||||||
<div>
|
<div>
|
||||||
<h3 class="dark:text-white text-4xl text-center">
|
<h3 class="dark:text-white text-4xl text-center">
|
||||||
Classroom<span class="text-blue-700">IO</span>
|
Classroom<span class="text-primary-700">IO</span>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="dark:text-white text-lg text-center">
|
<p class="dark:text-white text-lg text-center">
|
||||||
The operating system for classroooms of the future 🚀🚀🚀.
|
The operating system for classroooms of the future 🚀🚀🚀.
|
||||||
@@ -90,7 +90,7 @@
|
|||||||
<div class="flex flex-col md:flex-row">
|
<div class="flex flex-col md:flex-row">
|
||||||
{#each areas as area, index}
|
{#each areas as area, index}
|
||||||
<div
|
<div
|
||||||
class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
|
class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
|
||||||
>
|
>
|
||||||
<h3 class="dark:text-white text-3xl">
|
<h3 class="dark:text-white text-3xl">
|
||||||
{#if index === 0}
|
{#if index === 0}
|
||||||
|
|||||||
@@ -162,11 +162,11 @@
|
|||||||
<section class="my-5 mx-9">
|
<section class="my-5 mx-9">
|
||||||
<StructuredList class="m-0">
|
<StructuredList class="m-0">
|
||||||
<!-- Moved the lesson headers outside the students loop -->
|
<!-- Moved the lesson headers outside the students loop -->
|
||||||
<StructuredListHead class="bg-blue-100">
|
<StructuredListHead class="bg-primary-100">
|
||||||
<StructuredListRow head class="mx-7">
|
<StructuredListRow head class="mx-7">
|
||||||
<StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
|
<StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
|
||||||
{#each $lessons as lesson, index}
|
{#each $lessons as lesson, index}
|
||||||
<StructuredListCell head class="text-blue-600 py-3"
|
<StructuredListCell head class="text-primary-600 py-3"
|
||||||
>Lesson 0{getLectureNo(index + 1)}</StructuredListCell
|
>Lesson 0{getLectureNo(index + 1)}</StructuredListCell
|
||||||
>
|
>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
@@ -29,6 +29,7 @@
|
|||||||
import { course, setCourse, group } from '$lib/components/Course/store';
|
import { course, setCourse, group } from '$lib/components/Course/store';
|
||||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||||
import TextChip from '$lib/components/Chip/Text.svelte';
|
import TextChip from '$lib/components/Chip/Text.svelte';
|
||||||
|
import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
const { courseId } = data;
|
const { courseId } = data;
|
||||||
@@ -143,7 +144,7 @@
|
|||||||
value={getLessonOrder(lesson.id)}
|
value={getLessonOrder(lesson.id)}
|
||||||
size="sm"
|
size="sm"
|
||||||
shape="rounded-full"
|
shape="rounded-full"
|
||||||
className="bg-blue-200 text-blue-600 text-xs"
|
className="bg-primary-200 text-primary-600 text-xs"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -186,12 +187,10 @@
|
|||||||
<p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
|
<p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
|
||||||
{:else}
|
{:else}
|
||||||
<a href="." class="flex items-center hover:underline mb-2">
|
<a href="." class="flex items-center hover:underline mb-2">
|
||||||
<img
|
<Avatar
|
||||||
alt="Placeholder"
|
className="w-6 h-6"
|
||||||
class="block rounded-full"
|
|
||||||
width="24"
|
|
||||||
height="20"
|
|
||||||
src={lesson.profile.avatar_url}
|
src={lesson.profile.avatar_url}
|
||||||
|
name="Avatar placeholder"
|
||||||
/>
|
/>
|
||||||
<p class="dark:text-white ml-2 text-sm">
|
<p class="dark:text-white ml-2 text-sm">
|
||||||
{lesson.profile.fullname}
|
{lesson.profile.fullname}
|
||||||
@@ -231,7 +230,7 @@
|
|||||||
<div class="flex">
|
<div class="flex">
|
||||||
<Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
|
<Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
|
||||||
<a
|
<a
|
||||||
class="text-sm ml-2 text-blue-600"
|
class="text-sm ml-2 text-primary-600"
|
||||||
href={lesson.call_url || '#'}
|
href={lesson.call_url || '#'}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -158,13 +158,13 @@
|
|||||||
class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
|
class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
|
||||||
>
|
>
|
||||||
<StructuredListRow head class="mx-7">
|
<StructuredListRow head class="mx-7">
|
||||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||||
>Name</StructuredListCell
|
>Name</StructuredListCell
|
||||||
>
|
>
|
||||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||||
>Role</StructuredListCell
|
>Role</StructuredListCell
|
||||||
>
|
>
|
||||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||||
>Action</StructuredListCell
|
>Action</StructuredListCell
|
||||||
>
|
>
|
||||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
<p class="dark:text-white text-base font-normal">
|
<p class="dark:text-white text-base font-normal">
|
||||||
{person.profile.fullname}
|
{person.profile.fullname}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs text-blue-600">
|
<p class="text-xs text-primary-600">
|
||||||
{getEmail(person)}
|
{getEmail(person)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -210,12 +210,12 @@
|
|||||||
<div class="flex items-center w-2/4 absolute bottom-3">
|
<div class="flex items-center w-2/4 absolute bottom-3">
|
||||||
<TextChip
|
<TextChip
|
||||||
value={person.email.substring(0, 2).toUpperCase()}
|
value={person.email.substring(0, 2).toUpperCase()}
|
||||||
className="bg-blue-200 text-black font-semibold text-xs mr-3"
|
className="bg-primary-200 text-black font-semibold text-xs mr-3"
|
||||||
shape="rounded-full"
|
shape="rounded-full"
|
||||||
/>
|
/>
|
||||||
<a
|
<a
|
||||||
href="mailto:{person.email}"
|
href="mailto:{person.email}"
|
||||||
class="text-md text-blue-600 mr-2 dark:text-white"
|
class="text-md text-primary-600 mr-2 dark:text-white"
|
||||||
>
|
>
|
||||||
{person.email}
|
{person.email}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -286,7 +286,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
class="text-blue-700 text-md font-bold"
|
class="text-primary-700 text-md font-bold"
|
||||||
href="{$page.url.pathname}?submissionId={item.id}"
|
href="{$page.url.pathname}?submissionId={item.id}"
|
||||||
>
|
>
|
||||||
{item.exercise.title}
|
{item.exercise.title}
|
||||||
|
|||||||
@@ -138,7 +138,7 @@
|
|||||||
<div class="header w-full flex items-center">
|
<div class="header w-full flex items-center">
|
||||||
<Datepicker bind:store let:key let:send let:receive>
|
<Datepicker bind:store let:key let:send let:receive>
|
||||||
<button
|
<button
|
||||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||||
in:receive|local={{ key }}
|
in:receive|local={{ key }}
|
||||||
out:send|local={{ key }}
|
out:send|local={{ key }}
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
@@ -150,7 +150,7 @@
|
|||||||
</Datepicker>
|
</Datepicker>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="header text-lg font-bold text-blue-700 flex px-5 items-center">
|
<div class="header text-lg font-bold text-primary-700 flex px-5 items-center">
|
||||||
{formatDate($store?.selected)}
|
{formatDate($store?.selected)}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -174,14 +174,14 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
<p class="dark:text-white text-grey text-sm flex items-center">
|
<p class="dark:text-white text-grey text-sm flex items-center">
|
||||||
<a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
|
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
|
||||||
{` ${lessonData.course_title}`}
|
{` ${lessonData.course_title}`}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{#if lessonData.is_unlocked}
|
{#if lessonData.is_unlocked}
|
||||||
<a
|
<a
|
||||||
class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||||
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
||||||
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|||||||
@@ -27,12 +27,9 @@
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
loading = true;
|
loading = true;
|
||||||
const { data, error } = await supabase.auth.resetPasswordForEmail(
|
const { data, error } = await supabase.auth.resetPasswordForEmail(fields.email, {
|
||||||
fields.email,
|
redirectTo: window.location.origin + ROUTE.RESET
|
||||||
{
|
});
|
||||||
redirectTo: window.location.origin + ROUTE.RESET,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
console.log('data', data);
|
console.log('data', data);
|
||||||
if (error) throw error;
|
if (error) throw error;
|
||||||
|
|
||||||
@@ -55,10 +52,8 @@
|
|||||||
<EmailSentIcon />
|
<EmailSentIcon />
|
||||||
<h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
|
<h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
|
||||||
<p class="dark:text-white text-md mb-6 text-center">
|
<p class="dark:text-white text-md mb-6 text-center">
|
||||||
We have sent a confirmation email to <span class="text-blue-700"
|
We have sent a confirmation email to <span class="text-primary-700">{fields.email}</span>.
|
||||||
>{fields.email}</span
|
Kindly check your inbox to reset password or spam to reset your password.
|
||||||
>. Kindly check your inbox to reset password or spam to reset your
|
|
||||||
password.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -72,12 +67,8 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="mt-4 w-full">
|
<div class="mt-4 w-full">
|
||||||
<h3 class="dark:text-white text-xl font-semibold my-3">
|
<h3 class="dark:text-white text-xl font-semibold my-3">Forgot Password</h3>
|
||||||
Forgot Password
|
<p class="dark:text-white text-sm mb-6">We will send you a reset link to your email</p>
|
||||||
</h3>
|
|
||||||
<p class="dark:text-white text-sm mb-6">
|
|
||||||
We will send you a reset link to your email
|
|
||||||
</p>
|
|
||||||
<TextField
|
<TextField
|
||||||
label="Your email"
|
label="Your email"
|
||||||
bind:value={fields.email}
|
bind:value={fields.email}
|
||||||
@@ -105,7 +96,7 @@
|
|||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Cancel"
|
label="Cancel"
|
||||||
type="button"
|
type="button"
|
||||||
className="sm:w-full w-full text-blue-700"
|
className="sm:w-full w-full text-primary-700"
|
||||||
variant={VARIANTS.NONE}
|
variant={VARIANTS.NONE}
|
||||||
onClick={() => goto(ROUTE.LOGIN)}
|
onClick={() => goto(ROUTE.LOGIN)}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Start learning"
|
label="Start learning"
|
||||||
variant={VARIANTS.CONTAINED_WHITE}
|
variant={VARIANTS.CONTAINED_WHITE}
|
||||||
className="bg-white text-blue-800"
|
className="bg-white text-primary-800"
|
||||||
onClick={() => goto('/lms/mylearning')}
|
onClick={() => goto('/lms/mylearning')}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -214,7 +214,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
class="text-blue-700 text-md font-bold"
|
class="text-primary-700 text-md font-bold"
|
||||||
href="{$page.url.pathname}?submissionId={item.id}"
|
href="{$page.url.pathname}?submissionId={item.id}"
|
||||||
>
|
>
|
||||||
{item.exercise.title}
|
{item.exercise.title}
|
||||||
|
|||||||
@@ -71,12 +71,12 @@
|
|||||||
<p class="text-sm text-red-500">{submitError}</p>
|
<p class="text-sm text-red-500">{submitError}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="w-full text-right">
|
<div class="w-full text-right">
|
||||||
<a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
|
<a class="text-md text-primary-700" href="/forgot"> Forgot password? </a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-4 w-full flex justify-end items-center">
|
<div class="my-4 w-full flex justify-end items-center">
|
||||||
<!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
|
<!-- <a href="/login" class="text-primary-700 text-sm">Create an account</a> -->
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Log In"
|
label="Log In"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
let fields: OnboardingField = {
|
let fields: OnboardingField = {
|
||||||
fullname: '',
|
fullname: '',
|
||||||
orgName: '',
|
orgName: '',
|
||||||
siteName: '',
|
siteName: ''
|
||||||
};
|
};
|
||||||
let errors: OnboardingField = {};
|
let errors: OnboardingField = {};
|
||||||
let progress = 50;
|
let progress = 50;
|
||||||
@@ -40,39 +40,39 @@
|
|||||||
const educatorGoals: Goal[] = [
|
const educatorGoals: Goal[] = [
|
||||||
{
|
{
|
||||||
label: 'Sell courses online',
|
label: 'Sell courses online',
|
||||||
value: 'sell-online',
|
value: 'sell-online'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Teach my current students online',
|
label: 'Teach my current students online',
|
||||||
value: 'teach-online',
|
value: 'teach-online'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'On another platform, expanding here',
|
label: 'On another platform, expanding here',
|
||||||
value: 'expanding-platform',
|
value: 'expanding-platform'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Just here to explore',
|
label: 'Just here to explore',
|
||||||
value: 'explore',
|
value: 'explore'
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const sources = [
|
const sources = [
|
||||||
{
|
{
|
||||||
label: 'Articles',
|
label: 'Articles',
|
||||||
value: 'articles',
|
value: 'articles'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Search engine',
|
label: 'Search engine',
|
||||||
value: 'search-engine',
|
value: 'search-engine'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Social media',
|
label: 'Social media',
|
||||||
value: 'social-media',
|
value: 'social-media'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Friends and family',
|
label: 'Friends and family',
|
||||||
value: 'friends-family',
|
value: 'friends-family'
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
async function setMetaData() {
|
async function setMetaData() {
|
||||||
@@ -121,7 +121,7 @@
|
|||||||
.from('organization')
|
.from('organization')
|
||||||
.insert({
|
.insert({
|
||||||
name: fields.orgName,
|
name: fields.orgName,
|
||||||
siteName: fields.siteName,
|
siteName: fields.siteName
|
||||||
})
|
})
|
||||||
.select();
|
.select();
|
||||||
console.log('Create organisation', org);
|
console.log('Create organisation', org);
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
.insert({
|
.insert({
|
||||||
organization_id: orgData.id,
|
organization_id: orgData.id,
|
||||||
profile_id: $profile.id,
|
profile_id: $profile.id,
|
||||||
role_id: 1,
|
role_id: 1
|
||||||
})
|
})
|
||||||
.select();
|
.select();
|
||||||
console.log('Create organisation member', data);
|
console.log('Create organisation member', data);
|
||||||
@@ -150,10 +150,7 @@
|
|||||||
'Something went wrong while creating this organization. Please reload and try again';
|
'Something went wrong while creating this organization. Please reload and try again';
|
||||||
|
|
||||||
// Delete organization so it can be recreated.
|
// Delete organization so it can be recreated.
|
||||||
await supabase
|
await supabase.from('organization').delete().match({ siteName: fields.siteName });
|
||||||
.from('organization')
|
|
||||||
.delete()
|
|
||||||
.match({ siteName: fields.siteName });
|
|
||||||
loading = false;
|
loading = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -175,7 +172,7 @@
|
|||||||
.update({
|
.update({
|
||||||
...fields,
|
...fields,
|
||||||
orgName: undefined,
|
orgName: undefined,
|
||||||
siteName: undefined,
|
siteName: undefined
|
||||||
})
|
})
|
||||||
.match({ id: $profile.id });
|
.match({ id: $profile.id });
|
||||||
loading = false;
|
loading = false;
|
||||||
@@ -205,13 +202,7 @@
|
|||||||
<!-- Header With Logo -->
|
<!-- Header With Logo -->
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<div class="flex items-center w-full justify-center mb-4">
|
<div class="flex items-center w-full justify-center mb-4">
|
||||||
<img
|
<img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
|
||||||
src="/logo-192.png"
|
|
||||||
alt="ClassroomIO logo"
|
|
||||||
height="50"
|
|
||||||
width="50"
|
|
||||||
data-atf="1"
|
|
||||||
/>
|
|
||||||
<h4 class="dark:text-white text-xl">ClassroomIO</h4>
|
<h4 class="dark:text-white text-xl">ClassroomIO</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -273,21 +264,14 @@
|
|||||||
<div id="goal-question" class="flex items-center flex-col mb-6">
|
<div id="goal-question" class="flex items-center flex-col mb-6">
|
||||||
<div class="w-10/12">
|
<div class="w-10/12">
|
||||||
<!-- Goal Question -->
|
<!-- Goal Question -->
|
||||||
<div
|
<div class="w-full flex items-start flex-col justify-between mb-10">
|
||||||
class="w-full flex items-start flex-col justify-between mb-10"
|
<label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
|
||||||
>
|
|
||||||
<label
|
|
||||||
for="text-field"
|
|
||||||
class="dark:text-white m-0 text-lg font-normal mb-3"
|
|
||||||
>
|
|
||||||
What brings you to ClassroomIO?
|
What brings you to ClassroomIO?
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<!-- Loop through Goals -->
|
<!-- Loop through Goals -->
|
||||||
{#each educatorGoals as goal}
|
{#each educatorGoals as goal}
|
||||||
<label
|
<label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
|
||||||
class="dark:text-white w-full inline-flex items-center mb-1 font-light"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
bind:group={fields.goal}
|
bind:group={fields.goal}
|
||||||
@@ -308,18 +292,13 @@
|
|||||||
|
|
||||||
<!-- Source Question -->
|
<!-- Source Question -->
|
||||||
<div class="w-full flex items-start flex-col justify-between">
|
<div class="w-full flex items-start flex-col justify-between">
|
||||||
<label
|
<label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
|
||||||
for="text-field"
|
|
||||||
class="dark:text-white m-0 text-lg font-normal mb-3"
|
|
||||||
>
|
|
||||||
How did you hear about us?
|
How did you hear about us?
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<!-- Loop through Goals -->
|
<!-- Loop through Goals -->
|
||||||
{#each sources as source}
|
{#each sources as source}
|
||||||
<label
|
<label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
|
||||||
class="dark:text-white w-full inline-flex items-center mb-1 font-light"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
bind:group={fields.source}
|
bind:group={fields.source}
|
||||||
@@ -346,7 +325,7 @@
|
|||||||
<div class="flex justify-between items-center mt-8 w-full">
|
<div class="flex justify-between items-center mt-8 w-full">
|
||||||
<div class="w-24 h-2 bg-gray-300 relative">
|
<div class="w-24 h-2 bg-gray-300 relative">
|
||||||
<span
|
<span
|
||||||
class="progress absolute top-0 left-0 bg-blue-700 h-full"
|
class="progress absolute top-0 left-0 bg-primary-700 h-full"
|
||||||
style="width: {progress}%;"
|
style="width: {progress}%;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -356,7 +335,7 @@
|
|||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
label="Back"
|
label="Back"
|
||||||
variant={VARIANTS.NONE}
|
variant={VARIANTS.NONE}
|
||||||
className="py-3 px-6 mr-2 text-blue-700"
|
className="py-3 px-6 mr-2 text-primary-700"
|
||||||
onClick={() => (step = step - 1)}
|
onClick={() => (step = step - 1)}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -222,7 +222,7 @@
|
|||||||
<div class="header w-full flex items-center">
|
<div class="header w-full flex items-center">
|
||||||
<Datepicker bind:store let:key let:send let:receive>
|
<Datepicker bind:store let:key let:send let:receive>
|
||||||
<button
|
<button
|
||||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||||
in:receive|local={{ key }}
|
in:receive|local={{ key }}
|
||||||
out:send|local={{ key }}
|
out:send|local={{ key }}
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
@@ -258,14 +258,14 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
<p class="dark:text-white text-grey text-sm flex items-center">
|
<p class="dark:text-white text-grey text-sm flex items-center">
|
||||||
<a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
|
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
|
||||||
{` ${lessonData.course_title}`}
|
{` ${lessonData.course_title}`}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{#if lessonData.is_unlocked}
|
{#if lessonData.is_unlocked}
|
||||||
<a
|
<a
|
||||||
class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||||
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
||||||
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|||||||
@@ -351,7 +351,7 @@
|
|||||||
{#each allThemes as _theme}
|
{#each allThemes as _theme}
|
||||||
<div
|
<div
|
||||||
class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
|
class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
|
||||||
_theme.id && 'border-blue-700'}"
|
_theme.id && 'border-primary-700'}"
|
||||||
>
|
>
|
||||||
{#if $quizStore.theme === _theme.id}
|
{#if $quizStore.theme === _theme.id}
|
||||||
<CheckmarkFilledIcon
|
<CheckmarkFilledIcon
|
||||||
|
|||||||
@@ -9,9 +9,8 @@
|
|||||||
|
|
||||||
<section class="w-full max-w-6xl mx-auto">
|
<section class="w-full max-w-6xl mx-auto">
|
||||||
<div class="py-10 px-5">
|
<div class="py-10 px-5">
|
||||||
<a
|
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
|
||||||
class="text-gray-500 dark:text-white text-md"
|
>Back to Settings</a
|
||||||
href={`${$currentOrgPath}/settings`}>Back to Settings</a
|
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between mb-10">
|
<div class="flex items-center justify-between mb-10">
|
||||||
<h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
|
<h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
|
||||||
|
|||||||
@@ -9,9 +9,8 @@
|
|||||||
|
|
||||||
<section class="w-full max-w-6xl mx-auto">
|
<section class="w-full max-w-6xl mx-auto">
|
||||||
<div class="py-10 px-5">
|
<div class="py-10 px-5">
|
||||||
<a
|
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
|
||||||
class="text-gray-500 dark:text-white text-md"
|
>Back to Settings</a
|
||||||
href={`${$currentOrgPath}/settings`}>Back to Settings</a
|
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between mb-10">
|
<div class="flex items-center justify-between mb-10">
|
||||||
<h1 class="dark:text-white text-3xl font-bold">Team members</h1>
|
<h1 class="dark:text-white text-3xl font-bold">Team members</h1>
|
||||||
|
|||||||
@@ -118,7 +118,7 @@
|
|||||||
src={currentProfile.avatar_url}
|
src={currentProfile.avatar_url}
|
||||||
height="260"
|
height="260"
|
||||||
width="260"
|
width="260"
|
||||||
class="rounded-full bg-light-blue-100 mb-4"
|
class="rounded-full bg-primary-100 mb-4"
|
||||||
/> -->
|
/> -->
|
||||||
<UploadImage bind:avatar src={currentProfile.avatar_url} widthHeight="w-60 h-60" />
|
<UploadImage bind:avatar src={currentProfile.avatar_url} widthHeight="w-60 h-60" />
|
||||||
|
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
|
|
||||||
<div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
|
<div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
|
||||||
<h4 class="dark:text-white m-0 font-normal">
|
<h4 class="dark:text-white m-0 font-normal">
|
||||||
<a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
|
<a class="text-primary-700 font-bold" href="/courses"> CitiBim </a>
|
||||||
</h4>
|
</h4>
|
||||||
<p class="dark:text-white text-gray-500">
|
<p class="dark:text-white text-gray-500">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam tenetur magnam.
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam tenetur magnam.
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
|
|
||||||
<div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
|
<div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
|
||||||
<h4 class="dark:text-white m-0 font-normal">
|
<h4 class="dark:text-white m-0 font-normal">
|
||||||
<a class="text-blue-700 font-bold" href="/courses"> Climate Change Group </a>
|
<a class="text-primary-700 font-bold" href="/courses"> Climate Change Group </a>
|
||||||
</h4>
|
</h4>
|
||||||
<p class="dark:text-white text-gray-500">
|
<p class="dark:text-white text-gray-500">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi autem quo possimus
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi autem quo possimus
|
||||||
@@ -200,7 +200,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
|
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
|
||||||
</div>
|
</div>
|
||||||
<!-- {:else if loading}
|
<!-- {:else if loading}
|
||||||
<Box>
|
<Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user