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

CLASSROOMIO-T-95: Upload finishing touches

Browse Source
This commit is contained in:
Rotimi Best
2023-08-11 00:20:26 +01:00
parent d1c08802f5
commit 374fab01f5
14 changed files with 45 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Course/components/Navigation/NavExpandable.svelte
+3 -4
View File
@@ -3,6 +3,7 @@
import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte'; import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte'; import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import { NavClasses } from '$lib/utils/constants/reusableClass';
import NavIcons from './NavIcons.svelte'; import NavIcons from './NavIcons.svelte';
export let handleClick = () => {}; export let handleClick = () => {};
@@ -12,8 +13,6 @@
export let total = 0; export let total = 0;
// export let subMenuItems = []; // export let subMenuItems = [];
let activeClass = 'bg-gray-200 dark:bg-gray-800';
function onClick() { function onClick() {
handleClick(); handleClick();
} }
@@ -25,8 +24,8 @@
<div class=""> <div class="">
<button <button
class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isGroupActive && class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isGroupActive &&
activeClass} w-[95%]" NavClasses.active} w-[95%]"
tabindex="0" tabindex="0"
on:click={onClick} on:click={onClick}
> >
src/lib/components/Course/components/Navigation/index.svelte
+4 -5
View File
@@ -24,7 +24,7 @@
import { course } from '$lib/components/Course/store'; import { course } from '$lib/components/Course/store';
import { updateCourse } from '$lib/utils/services/courses'; import { updateCourse } from '$lib/utils/services/courses';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { currentOrgPath } from '$lib/utils/store/org'; import { NavClasses } from '$lib/utils/constants/reusableClass';
import { isMobile } from '$lib/utils/store/useMobile'; import { isMobile } from '$lib/utils/store/useMobile';
// export let lessonId; // export let lessonId;
@@ -32,7 +32,6 @@
export let isStudent = null; export let isStudent = null;
let show = null; let show = null;
let activeClass = 'bg-gray-200 dark:bg-gray-800';
let isLessonActive = false; let isLessonActive = false;
function handleMainGroupClick(href) { function handleMainGroupClick(href) {
@@ -151,7 +150,7 @@
<div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"> <div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
{#if show} {#if show}
<div class="relative h-full dark:bg-gray-700"> <div class="relative h-full dark:bg-gray-800">
<!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md"> <!-- <PageNav title="Back to courses" paddingClass="pl-2" titleSize="text-md">
<slot:fragment slot="image"> <slot:fragment slot="image">
<Avatar src={$course.logo} /> <Avatar src={$course.logo} />
@@ -202,12 +201,12 @@
<div <div
class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {( class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {(
path || $page.url.pathname path || $page.url.pathname
).includes(item.id) && activeClass}" ).includes(item.id) && NavClasses.active}"
> >
<TextChip <TextChip
value={getLectureNo(index + 1)} value={getLectureNo(index + 1)}
className="bg-blue-200 text-blue-600 text-xs mr-2" className="bg-blue-200 text-blue-600 text-xs mr-2"
size="xl" size="sm"
shape="rounded-full" shape="rounded-full"
/> />
<span>{item.title}</span> <span>{item.title}</span>
src/lib/components/Courses/components/Card/Loader.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script> </script>
<div <div
class="root w-72 border bg-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative" class="root w-72 border bg-gray-100 dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
> >
<SkeletonPlaceholder style="width: 100%; height: 10rem;" /> <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
<div class="p-3 pb-0"> <div class="p-3 pb-0">
src/lib/components/Courses/components/Card/index.svelte
+1 -1
View File
@@ -47,7 +47,7 @@
<a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black"> <a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
<div <div
class="root w-80 border bg-gray-100 dark:bg-gray-700 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative" class="root w-80 border bg-gray-100 dark:bg-gray-800 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
> >
{#if !isOnLandingPage} {#if !isOnLandingPage}
<Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}> <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
src/lib/components/LMS/SideBar.svelte
+4 -5
View File
@@ -11,8 +11,7 @@
import Avatar from '$lib/components/Avatar/index.svelte'; import Avatar from '$lib/components/Avatar/index.svelte';
import { currentOrg } from '$lib/utils/store/org'; import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { NavClasses } from '$lib/utils/constants/reusableClass';
let activeClass = 'bg-gray-200 dark:bg-gray-800';
function isActive(pagePath, itemPath) { function isActive(pagePath, itemPath) {
const pageLinkItems = pagePath.split('/'); const pageLinkItems = pagePath.split('/');
@@ -77,7 +76,7 @@
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive( class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.url.pathname, $page.url.pathname,
`${item.link}` `${item.link}`
) && activeClass}" ) && NavClasses.active}"
> >
<svelte:component <svelte:component
this={item.icon} this={item.icon}
@@ -101,10 +100,10 @@
</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-800 {isActive( class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
$page.url.pathname, $page.url.pathname,
`/lms/settings` `/lms/settings`
) && activeClass}" ) && NavClasses.active}"
> >
<Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" /> <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
<p class="dark:text-white ml-2">Settings</p> <p class="dark:text-white ml-2">Settings</p>
src/lib/components/Navigation/app.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
}} }}
size="small" size="small"
> >
<CourseIcon fill="#fff" /> <CourseIcon color="#fff" />
</IconButton> </IconButton>
{/if} {/if}
<a <a
src/lib/components/Org/Quiz/QuizCard.svelte
+7 -11
View File
@@ -1,5 +1,6 @@
<script> <script>
import pluralize from 'pluralize'; import pluralize from 'pluralize';
import { ImageLoader } from 'carbon-components-svelte';
import OverflowMenuHorizontalIcon from 'carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte'; import OverflowMenuHorizontalIcon from 'carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; import relativeTime from 'dayjs/plugin/relativeTime';
@@ -33,7 +34,7 @@
label: 'Rename', label: 'Rename',
onClick() { onClick() {
onRename(quiz); onRename(quiz);
}, }
}, },
// { // {
// label: 'Make a copy', // label: 'Make a copy',
@@ -45,8 +46,8 @@
label: 'Delete', label: 'Delete',
onClick() { onClick() {
onDelete(quiz); onDelete(quiz);
}, }
}, }
]; ];
} }
@@ -55,12 +56,11 @@
{#if quiz} {#if quiz}
<div <div
class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-700 mr-4 mb-5 relative flex p-3" class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mr-4 mb-5 relative flex p-3"
> >
<img <ImageLoader
src={themeImages[quiz.theme]?.card || themeImages.standard.card} src={themeImages[quiz.theme]?.card || themeImages.standard.card}
alt="quiz-card" alt="quiz-card"
class=""
style="max-width: 300px;" style="max-width: 300px;"
/> />
@@ -70,11 +70,7 @@
<a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a> <a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
</h4> </h4>
<Dropdown <Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
options={getOptions()}
classNames="absolute top-4 right-4"
isIcon={true}
>
<div class="p-1 rounded-full bg-gray-200 dark:bg-gray-600"> <div class="p-1 rounded-full bg-gray-200 dark:bg-gray-600">
<OverflowMenuHorizontalIcon size={20} class="carbon-icon active" /> <OverflowMenuHorizontalIcon size={20} class="carbon-icon active" />
</div> </div>
src/lib/components/Org/SideBar.svelte
+8 -7
View File
@@ -13,8 +13,7 @@
import Avatar from '$lib/components/Avatar/index.svelte'; import Avatar from '$lib/components/Avatar/index.svelte';
import { currentOrg, currentOrgPath } from '$lib/utils/store/org'; import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { NavClasses } from '$lib/utils/constants/reusableClass';
let activeClass = 'bg-gray-200 dark:bg-gray-800';
const menuItems = [ const menuItems = [
{ {
@@ -55,7 +54,9 @@
} }
</script> </script>
<aside class="root bg-gray-100 dark:bg-gray-700 h-full"> <aside
class="root bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1"
>
<div class="h-full flex flex-col"> <div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4"> <div class="border-b border-gray-200 pt-5 px-4">
{#if $currentOrg.avatar_url && $currentOrg.name} {#if $currentOrg.avatar_url && $currentOrg.name}
@@ -76,10 +77,10 @@
{#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-800 {isActive( class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
$page.url.pathname, $page.url.pathname,
`${$currentOrgPath}${menuItem.path}` `${$currentOrgPath}${menuItem.path}`
) && activeClass}" ) && NavClasses.active}"
> >
{#if menuItem.path === ''} {#if menuItem.path === ''}
<HomeIcon color="#7A797D" /> <HomeIcon color="#7A797D" />
@@ -115,10 +116,10 @@
</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-800 {isActive( class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
$page.url.pathname, $page.url.pathname,
`${$currentOrgPath}/settings` `${$currentOrgPath}/settings`
) && activeClass}" ) && NavClasses.active}"
> >
<Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" /> <Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
<p class="dark:text-white ml-2">Settings</p> <p class="dark:text-white ml-2">Settings</p>
src/lib/components/PageNav/index.svelte
+2 -2
View File
@@ -20,7 +20,7 @@
</script> </script>
<div <div
class="header dark:bg-gray-700 bg-white flex items-center justify-between {!disableSticky && class="header dark:bg-gray-800 bg-white flex items-center justify-between {!disableSticky &&
'sticky'} {paddingClass} {dynamicRootClass}" 'sticky'} {paddingClass} {dynamicRootClass}"
style={overidableStyle} style={overidableStyle}
> >
@@ -29,7 +29,7 @@
{#if !enterEditTitleMode} {#if !enterEditTitleMode}
<button class="w-full" on:click={() => (enterEditTitleMode = true)}> <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
<h4 <h4
class="editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis" class="editable-title hover:bg-gray-100 dark:bg-gray-800 px-3 rounded-md overflow-ellipsis"
> >
{title} {title}
</h4> </h4>
src/lib/components/PrimaryButton/index.svelte
+4 -2
View File
@@ -1,6 +1,7 @@
<script> <script>
import { Moon } from 'svelte-loading-spinners'; // import { Moon } from 'svelte-loading-spinners';
import { VARIANTS, VARIANTS_CLASS } from './constants'; import { VARIANTS, VARIANTS_CLASS } from './constants';
import { Loading } from 'carbon-components-svelte';
export let label = ''; export let label = '';
export let className = ''; export let className = '';
@@ -33,7 +34,8 @@
disabled={isDisabled} disabled={isDisabled}
> >
{#if isLoading} {#if isLoading}
<Moon size="20" color="#1d4ed8" unit="px" duration="1s" /> <Loading withOverlay={false} small />
<!-- <Moon size="20" color="#1d4ed8" unit="px" duration="1s" /> -->
{:else if !!label} {:else if !!label}
{label} {label}
{:else} {:else}
src/lib/utils/constants/reusableClass.js
+4
View File
@@ -0,0 +1,4 @@
export const NavClasses = {
active: 'bg-gray-200 dark:bg-gray-700',
background: ''
};
src/routes/courses/[id]/lessons/+page.svelte
+2 -2
View File
@@ -135,12 +135,12 @@
{#each $lessons as lesson (lesson.id)} {#each $lessons as lesson (lesson.id)}
<div <div
bind:this={ref} bind:this={ref}
class="h-32 relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center dark:bg-gray-700" class="h-32 relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-800"
> >
<div class="mr-5"> <div class="mr-5">
<TextChip <TextChip
value={getLessonOrder(lesson.id)} value={getLessonOrder(lesson.id)}
size="xl" size="sm"
shape="rounded-full" shape="rounded-full"
className="bg-blue-200 text-blue-600 text-xs" className="bg-blue-200 text-blue-600 text-xs"
/> />
src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js
+3 -4
View File
@@ -69,14 +69,13 @@ const uploadToMuse = (s3Data, fileName, lessonId, fileUrl) => {
.eq('id', lessonId) .eq('id', lessonId)
.select(); .select();
if (error) { if (error) {
console.log('Error updating supabase configs'); console.log('Error updating lesson', error);
} }
console.log('update error', error); console.log('update data', data);
console.log('update data', data, data[0].videos);
} }
}) })
.catch(function (error) { .catch(function (error) {
console.log('Upload error', error); console.log('Upload to Muse failed', error);
}); });
}; };
src/routes/courses/[id]/submissions/+page.svelte
+1 -1
View File
@@ -248,7 +248,7 @@
<div class="flex items-center w-full"> <div class="flex items-center w-full">
{#each sections as { id, title, items }, idx (id)} {#each sections as { id, title, items }, idx (id)}
<div <div
class="section rounded-md bg-gray-100 dark:bg-gray-700 border border-gray-50 p-3 h-80 mr-3 overflow-hidden" class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }} animate:flip={{ duration: flipDurationMs }}
> >
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">