feat: move lesson comments under lesson note
This commit is contained in:
Rotimi Best
@@ -0,0 +1,34 @@
|
||||
<script>
|
||||
export let width = 'max-w-4xl w-full lg:w-11/12';
|
||||
export let padding = 'pb-5 px-4';
|
||||
export let className = '';
|
||||
export let headerClassName = '';
|
||||
export let onClick = () => {};
|
||||
export let isPageNavHidden = false;
|
||||
|
||||
$: padding = isPageNavHidden ? `pb-20 px-4` : padding;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="overflow-y-auto {isPageNavHidden
|
||||
? 'h-[calc(100vh-65px)] lg:h-[calc(100vh-127px)]'
|
||||
: 'h-[calc(100vh-127px)]'} mx-auto mt-4 {width} {className} relative {padding}"
|
||||
on:click={onClick}
|
||||
>
|
||||
{#if $$slots.header}
|
||||
<div
|
||||
class="head sticky right-0 flex w-full items-center justify-between px-3 dark:bg-neutral-800 {headerClassName}"
|
||||
>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.head {
|
||||
top: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script>
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import Chip from '../Chip/index.svelte';
|
||||
import TextField from '../Form/TextField.svelte';
|
||||
|
||||
export let title = '';
|
||||
export let overidableStyle = '';
|
||||
export let navItems = [];
|
||||
export let disableSticky = false;
|
||||
export let isTitleEditable = false;
|
||||
export let onEditComplete = () => {};
|
||||
export let paddingClass = 'px-2';
|
||||
export let hideOnMobile = false;
|
||||
|
||||
let dynamicRootClass = '';
|
||||
let enterEditTitleMode = false;
|
||||
|
||||
$: dynamicRootClass = Array.isArray(navItems) && navItems.length > 4 ? 'bring-down' : '';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="{hideOnMobile &&
|
||||
'hideOnMobile'} header border-b border-gray-200 bg-white dark:border-neutral-600 dark:bg-black {!disableSticky &&
|
||||
'sticky'} {dynamicRootClass}"
|
||||
style={overidableStyle}
|
||||
>
|
||||
<div
|
||||
class="{hideOnMobile
|
||||
? 'hidden lg:flex'
|
||||
: ''} {paddingClass} m-auto flex min-h-[61px] max-w-4xl items-center justify-between"
|
||||
>
|
||||
{#if !!title}
|
||||
{#if isTitleEditable}
|
||||
{#if !enterEditTitleMode}
|
||||
<button class="w-full" on:click={() => (enterEditTitleMode = true)}>
|
||||
<h4
|
||||
class="editable-title overflow-ellipsis rounded-md px-3 hover:bg-gray-100 dark:bg-black"
|
||||
>
|
||||
{title}
|
||||
</h4>
|
||||
</button>
|
||||
{:else}
|
||||
<TextField
|
||||
bind:value={title}
|
||||
placeholder={$t('course.navItem.settings.course_title')}
|
||||
onChange={() => {
|
||||
enterEditTitleMode = false;
|
||||
|
||||
if (typeof onEditComplete === 'function') {
|
||||
onEditComplete();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex w-full items-center" {title}>
|
||||
<slot name="image" />
|
||||
<h4
|
||||
class="{$$slots.image
|
||||
? 'ml-2'
|
||||
: ''} truncate whitespace-nowrap text-lg font-semibold dark:text-white"
|
||||
>
|
||||
{title}
|
||||
</h4>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if Array.isArray(navItems) && navItems.length}
|
||||
<div class="flex items-center justify-evenly">
|
||||
{#each navItems as item}
|
||||
<a
|
||||
class="relative mr-5 flex items-center pb-2 text-sm font-bold {item.isActive
|
||||
? 'text-primary-700'
|
||||
: 'text-black dark:text-white'} hover:no-underline"
|
||||
href={item.href}
|
||||
>
|
||||
{item.label}
|
||||
|
||||
{#if typeof item.badgeValue === 'number'}
|
||||
<Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
|
||||
{/if}
|
||||
<span
|
||||
class="bg-primary-700 absolute bottom-0 left-0 h-1 transition-all duration-500 ease-in-out {item.isActive
|
||||
? 'w-full'
|
||||
: 'w-0'}"
|
||||
/>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<slot name="widget" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
min-height: 61px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header.bring-down {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.editable-title {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.title {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.hideOnMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
|
||||
export let isOrg = false;
|
||||
|
||||
function handleClick() {
|
||||
if (!isOrg) {
|
||||
return goto('/');
|
||||
}
|
||||
|
||||
return goto('https://classroomio.com');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root flex w-screen flex-col items-center justify-center">
|
||||
<img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
|
||||
<div class="flex w-4/5 flex-col items-center justify-center gap-3 dark:text-white lg:w-2/5">
|
||||
<p class="mb-5 text-4xl font-semibold dark:text-white">
|
||||
{#if isOrg}
|
||||
Organization doesn't exist!
|
||||
{:else}
|
||||
Page not found
|
||||
{/if}
|
||||
</p>
|
||||
<p class=" mb-5 text-center text-lg text-gray-700 dark:text-white">
|
||||
The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
|
||||
</p>
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.CONTAINED_DARK}
|
||||
label="Go Home"
|
||||
className="text-lg"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: calc(100vh - 45px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="root flex h-[calc(100vh-48px)] w-screen flex-col items-center justify-center gap-2 bg-[#F3F5F9] text-center text-black dark:bg-black dark:text-white"
|
||||
>
|
||||
<img src="./unauthorized.svg" alt="unauthorized" class="w-[220px]" />
|
||||
<p class=" text-4xl font-bold text-black dark:text-white md:text-5xl">Page not found</p>
|
||||
<p class=" mb-2 mt-1 text-base font-[400] text-[#656565] dark:text-white">
|
||||
The page you are trying to access does not exist
|
||||
</p>
|
||||
|
||||
<PrimaryButton label="Go Home" onClick={() => goto('https://www.classroomio.com')} />
|
||||
<PrimaryButton
|
||||
label="Help"
|
||||
variant={VARIANTS.LINK}
|
||||
onClick={() => goto('https://help.classroomio.com/')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as PageBody } from './Body.svelte';
|
||||
export { default as PageNav } from './Nav.svelte';
|
||||
export { default as PageNotFound } from './NotFound.svelte';
|
||||
export { default as PageRestricted } from './Restricted.svelte';
|
||||
export { default as PageUnauthorized } from './Unauthorized.svelte';
|
||||
Reference in New Issue
Block a user