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

CLASSROOMIO-T-145:Made the LMS dashboard responsive

Browse Source 
CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: All done and ready

CLASSROOMIO-T-145: Fixed the Z-index issue

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145: Finished implementing the responsive design for the Main dashboard and LMS dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-144:Updating the dashboard responsiveness ooth for LMS and the Main dashboard

CLASSROOMIO-T-144:Updated the dashboard responsiveness ooth for LMS and the Main dashboard

Merge branch 'main' into CLASSROOMIO-T-145

CLASSROOMIO-T-145:Made the LMS dashboard responsive


Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-66
Merged-by: Best Admin <[email protected]>
This commit is contained in:
emmanuel
2023-09-08 09:17:05 +00:00
committed by Space Cloud
parent 7523e6c3e7
commit 536a444193
25 changed files with 275 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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">
<div
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"
class="root w-full md:w-80 border bg-gray-100 dark:bg-gray-800 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
>
{#if !isOnLandingPage}
<Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
src/lib/components/Courses/components/NewCourseModal/index.svelte
+1 -1
View File
@@ -87,7 +87,7 @@
<Modal
onClose={() => ($createCourseModal.open = false)}
bind:open={$createCourseModal.open}
width="w-2/5"
width="w-4/5 md:w-2/5"
modalHeading="Create a Course"
>
<form on:submit|preventDefault={createCourse}>
src/lib/components/Courses/index.svelte
+21 -9
View File
@@ -5,11 +5,14 @@
import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
import CopyCourseModal from './components/CopyCourseModal/index.svelte';
import { courses, courseMetaDeta } from './store';
import { isMobile } from '$lib/utils/store/useMobile';
</script>
<CopyCourseModal />
<div class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 m-auto`}>
<div
class={`w-full ${$courseMetaDeta.isLoading || $courses ? 'cards-container' : ''} my-4 mx-auto`}
>
{#if $courseMetaDeta.isLoading}
<CardLoader />
<CardLoader />
@@ -28,14 +31,23 @@
currency={courseData.currency}
totalLessons={courseData.total_lessons}
/>
{:else}
<Box>
<CoursesEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
<p class="dark:text-white w-1/3 text-center">
Share your knowledge with the world by creating engaging courses for your students.
</p>
</Box>
<!-- {:else}
<Box className="w-full">
<CoursesEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
<p class="dark:text-white w-1/3 text-center">
Share your knowledge with the world by creating engaging courses for your students.
</p>
</Box> -->
{/each}
{/if}
</div>
{#if !$courses.length}
<Box className="w-full">
<CoursesEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
<p class="dark:text-white w-1/3 text-center">
Share your knowledge with the world by creating engaging courses for your students.
</p>
</Box>
{/if}
src/lib/components/LMS/SideBar.svelte
+14 -4
View File
@@ -12,6 +12,7 @@
import { currentOrg } from '$lib/utils/store/org';
import { profile } from '$lib/utils/store/user';
import { NavClasses } from '$lib/utils/constants/reusableClass';
import { menu } from '$lib/components/Org/store';
function isActive(pagePath, itemPath) {
const pageLinkItems = pagePath.split('/');
@@ -45,9 +46,18 @@
link: '/lms/community'
}
];
const toggleSidebar = () => {
$menu.hidden = !$menu.hidden;
};
</script>
<aside class="w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full">
<aside
class={`${
$menu.hidden
? '-translate-x-[100%] top-[56px] md:top-0 absolute md:translate-x-0 md:relative z-[9999]'
: 'translate-x-0 absolute md:relative top-[56px] md:top-0 z-[9999]'
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-full`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
{#if $currentOrg.avatar_url}
@@ -66,7 +76,7 @@
<ul class="my-5">
{#each sideLinks as item (item.name)}
<a href={item.link} class="text-black">
<a href={item.link} class="text-black" on:click={toggleSidebar}>
<li
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
$page.url.pathname,
@@ -87,13 +97,13 @@
</div>
<span class="flex-grow" />
<ul class="my-5 pb-5 px-4">
<a href="/lms" class="text-black">
<a href="/lms" class="text-black" on:click={toggleSidebar}>
<li class="flex items-center py-3 px-4 mb-2 rounded">
<HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
<a href="/lms/settings" class="text-black">
<a href="/lms/settings" class="text-black" on:click={toggleSidebar}>
<li
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
$page.url.pathname,
src/lib/components/Navigation/app.svelte
+11 -9
View File
@@ -48,15 +48,17 @@
>
<ul class="flex w-full items-center">
<div class="flex items-center text-white">
<li>
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class="md:hidden text-white" />
{:else}
<Close size={16} class="md:hidden text-white" />
{/if}
</IconButton>
</li>
{#if !isCoursePage}
<li>
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class="md:hidden text-white" />
{:else}
<Close size={16} class="md:hidden text-white" />
{/if}
</IconButton>
</li>
{/if}
{#if isCoursePage}
<IconButton
onClick={() => {
src/lib/components/Navigation/lms.svelte
+15
View File
@@ -7,10 +7,16 @@
import IconButton from '$lib/components/IconButton/index.svelte';
import { appStore } from '$lib/utils/store/app';
import { Close, Menu } from 'carbon-icons-svelte';
import { menu } from '$lib/components/Org/store';
import { toggleBodyByMode } from '$lib/utils/functions/app';
export let navClass = '';
const toggleSidebar = () => {
$menu.hidden = !$menu.hidden;
};
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
@@ -23,6 +29,15 @@
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700">
<ul class="flex w-full items-center">
<li>
<IconButton onClick={toggleSidebar}>
{#if $menu.hidden}
<Menu size={16} class="md:hidden text-white" />
{:else}
<Close size={16} class="md:hidden text-white" />
{/if}
</IconButton>
</li>
<div class="">
<a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
ClassroomIO
src/lib/components/Org/Audience/index.svelte
+2 -4
View File
@@ -18,15 +18,13 @@
$: fetchInitData($currentOrg.id);
</script>
<div
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
>
<div class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto">
{#if $orgAudience.length || isLoading}
<AudienceList {isLoading} />
{:else}
<Box>
<AudienceEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No audience to manage!</h3>
<h3 class="dark:text-white text-2xl text-center my-5">No audience to manage!</h3>
<p class="dark:text-white w-1/3 text-center">
Manage all your students here and stay connected with them.
</p>
src/lib/components/Org/Community/index.svelte
+1 -1
View File
@@ -93,7 +93,7 @@
</div>
</div>
{:else}
<Box>
<Box className="w-screen">
<CoursesEmptyIcon />
<h3 class="dark:text-white text-2xl my-5">No Questions asked</h3>
<p class="dark:text-white w-1/3 text-center">Ask a question to the community</p>
src/lib/components/Org/Quiz/NewQuizModal.svelte
+9 -14
View File
@@ -6,17 +6,12 @@
import { snackbarStore } from '$lib/components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { supabase } from '$lib/utils/functions/supabase';
import {
currentOrg,
createQuizModal,
currentOrgPath,
quizesStore,
} from '$lib/utils/store/org';
import { currentOrg, createQuizModal, currentOrgPath, quizesStore } from '$lib/utils/store/org';
import { createQuizValidation } from '$lib/utils/functions/validator';
let open = false;
let errors = {
title: '',
title: ''
};
let isLoading = false;
@@ -76,16 +71,16 @@
{
id: 'circle',
label: '',
isCorrect: false,
isCorrect: false
},
{
id: 'triangle',
label: '',
isCorrect: false,
},
],
},
],
isCorrect: false
}
]
}
]
})
.select();
isLoading = false;
@@ -111,7 +106,7 @@
<Modal
onClose={handleClose}
bind:open
width="w-2/5"
width="w-4/5 md:w-2/5"
modalHeading="{$createQuizModal.openEdit ? 'Update' : 'Create'} a Quiz"
>
<form on:submit|preventDefault={createQuiz}>
src/lib/components/Org/Quiz/QuizCard.svelte
+7 -7
View File
@@ -56,17 +56,17 @@
{#if quiz}
<div
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"
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 flex-col lg:flex-row p-3"
>
<ImageLoader
src={themeImages[quiz.theme]?.card || themeImages.standard.card}
alt="quiz-card"
style="max-width: 300px;"
style="max-width:300px, min-width: 200px;"
/>
<div class="p-5 flex flex-col justify-between w-full">
<div class="p-2 md:p-5 flex flex-col justify-between w-full">
<div class="flex justify-between">
<h4 class="dark:text-white title text-md font-bold">
<h4 class="dark:text-white title text-md font-bold capitalize">
<a href="{$currentOrgPath}/quiz/{quiz.id}">{quiz.title}</a>
</h4>
@@ -77,10 +77,10 @@
</Dropdown>
</div>
<div class="flex justify-between">
<div class="flex md:flex-row flex-col justify-between">
<div>
<p class="mb-2">{pluralize('question', totalQuestions, true)}</p>
<p>Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
<p class="mb-2 md:mb-0">Updated {dayjs(quiz.updated_at).fromNow(true)} ago</p>
</div>
<PrimaryButton
@@ -96,6 +96,6 @@
<style>
.root {
height: 180px;
min-height: 180px;
}
</style>
src/lib/components/Org/Settings/LandingpageSettings.svelte
+25 -25
View File
@@ -136,25 +136,25 @@
</script>
<Grid class="border-c rounded border-gray-200 w-full mt-5 relative">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}>
<SectionTitle>Landing Page</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.header.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
<TextField
label="Title"
placeholder="Write your title here"
bind:value={$landingPageSettings.header.title}
className="mb-5"
className="w-full mb-5"
/>
<TextField
label="Title-Highlight"
placeholder="Write your titlehighlight here"
className="mb-5"
className="w-full mb-5"
bind:value={$landingPageSettings.header.titleHighlight}
/>
@@ -162,7 +162,7 @@
label="Subtitle"
labelClassName="font-light"
placeholder="Write your subtitle here"
className="mb-5"
className="w-full mb-5"
bind:value={$landingPageSettings.header.subtitle}
/>
@@ -170,7 +170,7 @@
<TextField
label="Label"
placeholder="Write your label here"
className="mt-3 mb-5"
className="w-full mt-3 mb-5"
bind:value={$landingPageSettings.header.action.label}
/>
<div class="gap-2 mb-5">
@@ -199,15 +199,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>About</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.aboutUs.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle></Column
>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
<TextField
label="Title"
placeholder="Write your title here"
@@ -244,15 +244,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>Courses</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.courses.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
<TextField
label="Title"
placeholder="Write your title here"
@@ -272,15 +272,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>Frequently Asked Questions</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.faq.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8}>
<TextField
label="Title"
placeholder="Write your title here"
@@ -331,15 +331,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>Contact us</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.contact.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8}>
<TextField
label="Title"
placeholder="Write your title here"
@@ -375,15 +375,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>Mailing List</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.mailinglist.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
<TextField
label="Title"
placeholder="Write your title here"
@@ -407,15 +407,15 @@
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}
><SectionTitle>Footer</SectionTitle>
<Toggle bind:toggled={$landingPageSettings.footer.show} size="sm">
<span slot="labelA" style="color: gray">Hide section</span>
<span slot="labelB" style="color: gray">Show section</span>
</Toggle>
</Column>
<Column sm={2} md={6} lg={8}>
<Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
<TextField
label="Facebook"
placeholder="Write your Facebook link here"
src/lib/components/Org/Settings/OrgSettings.svelte
+31 -27
View File
@@ -98,10 +98,14 @@
</script>
<Grid class="border-c rounded border-gray-200 w-full mt-5">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
<Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0 flex flex-col items-center lg:items-start">
<TextField
label="Organization Name"
bind:value={$currentOrg.name}
className="w-full lg:w-60 mb-5"
/>
<UploadImage
bind:avatar
src={$currentOrg.avatar_url}
@@ -110,65 +114,65 @@
/>
<PrimaryButton
label="Update Organization"
className="px-6 py-3 mr-5 mt-5"
className="px-6 py-3 lg:mr-5 mt-5"
isLoading={loading}
isDisabled={loading}
onClick={handleUpdate}
/>
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white mt-0">Set your brand color</h4>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={8} md={8} lg={8}>
<h4 class="dark:text-white lg: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"
'border-[#1d4ee2]'} mr-3 flex items-center justify-center"
on:click={handleChangeTheme(themes.default)}
>
<div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
<div class="w-3 h-3 md:w-6 md:h-6 bg-[#1d4ee2] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
'border-[#be1241]'} mr-3"
'border-[#be1241]'} mr-3 flex items-center justify-center"
on:click={handleChangeTheme(themes.rose)}
>
<div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
<div class="w-3 h-3 md:w-6 md:h-6 bg-[#be1241] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.green &&
'border-[#0c891b]'} mr-3"
'border-[#0c891b]'} mr-3 flex items-center justify-center"
on:click={handleChangeTheme(themes.green)}
>
<div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
<div class="w-3 h-3 md:w-6 md:h-6 bg-[#0c891b] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
'border-[#cc4902]'} mr-3"
'border-[#cc4902]'} mr-3 flex items-center justify-center"
on:click={handleChangeTheme(themes.orange)}
>
<div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
<div class="w-3 h-3 md:w-6 md:h-6 bg-[#cc4902] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
'border-[#cf00ce]'} mr-3"
'border-[#cf00ce]'} mr-3 flex items-center justify-center"
on:click={handleChangeTheme(themes.violet)}
>
<div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
<div class="w-3 h-3 md:w-6 md:h-6 bg-[#cf00ce] rounded-full m-1" />
</button>
</div>
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white mt-0">Customise your Domain</h4>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
<Column sm={8} md={8} lg={8}>
<h4 class="dark:text-white lg:mt-0">Customise your Domain</h4>
<p class="text-sm text-gray-500 dark:text-white">
Create a custom URL so your audience can get to your organization easily
</p>
@@ -180,10 +184,10 @@
/>
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Set up your website</h4>
<Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}><SectionTitle>Team</SectionTitle></Column>
<Column sm={8} md={8} lg={8}>
<h4 class="dark:text-white lg:mt-0">Set up your website</h4>
<p class="text-sm text-gray-500 dark:text-white">
Add team mates to your organization so you can both collaborate on projects.
</p>
src/lib/components/Org/Settings/Profile.svelte
+11 -11
View File
@@ -72,25 +72,25 @@
</script>
<Grid class="border-c rounded border-gray-200 w-full mt-5">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}>
<Row class="flex flex-col lg:flex-row items-center lg:items-start py-7 border-bottom-c ">
<Column sm={4} md={8} lg={4} class="mt-2 md:mt-0">
<SectionTitle>Profile Picture</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
<Column sm={2} md={4} lg={8} class="mt-2 lg:mt-0">
<UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-16 h-16 lg:w-24 lg:h-24" />
</Column>
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}>
<Row class="flex flex-col lg:flex-row py-7 border-bottom-c">
<Column sm={4} md={4} lg={4}>
<SectionTitle>Personal Information</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
<TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
<TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
<Column sm={8} md={8} lg={8} class="mt-2 lg:mt-0">
<TextField label="Full Name" bind:value={$profile.fullname} className="w-full lg:w-60 mb-4" />
<TextField label="Username" bind:value={$profile.username} className="w-full lg:w-60 mb-4" />
<TextField label="Email" bind:value={$profile.email} className="w-full lg:w-60 mb-4" />
</Column>
</Row>
<Row class="m-5 w-full flex items-center justify-center">
<Row class="m-5 w-full flex items-center gap-2 lg:justify-center">
<PrimaryButton
label="Update Profile"
className="mr-5"
src/lib/components/Org/Settings/index.svelte
+3 -3
View File
@@ -63,16 +63,16 @@
{/each}
<!-- <Tab label="Account" /> -->
<svelte:fragment slot="content">
<TabContent>
<TabContent class="w-full p-0">
<Profile />
</TabContent>
<!-- <TabContent>
<Account />
</TabContent> -->
<TabContent>
<TabContent class="w-full p-0">
<OrgSettings />
</TabContent>
<TabContent>
<TabContent class="w-full p-0">
<LandingpageSettings />
</TabContent>
</svelte:fragment>
src/lib/components/Org/SideBar.svelte
+14 -7
View File
@@ -53,14 +53,17 @@
return pagePath.includes(itemPath);
}
const toggleSidebar = () => {
$menu.hidden = !$menu.hidden;
};
</script>
<aside
class={` ${
class={`${
$menu.hidden
? '-translate-x-[100%] top-[48px] md:top-0 absolute md:translate-x-0 md:relative '
: 'translate-x-0 absolute md:relative top-[48px] md:top-0'
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
: 'translate-x-0 absolute md:relative z-[9999]'
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-36px)] md:h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
@@ -80,7 +83,11 @@
<ul class="my-5">
{#each menuItems as menuItem}
<a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
<a
href="{$currentOrgPath}{menuItem.path}"
class="text-black no-underline"
on:click={toggleSidebar}
>
<li
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
$page.url.pathname,
@@ -110,13 +117,13 @@
</div>
<span class="flex-grow" />
<ul class="my-5 pb-5 px-4">
<a href={$currentOrgPath} class="text-black no-underline">
<a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
<li class="flex items-center py-3 px-4 mb-2 rounded">
<HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
<a href="{$currentOrgPath}/settings" class="text-black no-underline">
<a href="{$currentOrgPath}/settings" class="text-black no-underline" on:click={toggleSidebar}>
<li
class="flex items-center py-3 px-4 mb-2 {NavClasses.item} {isActive(
$page.url.pathname,
src/routes/+layout.svelte
+20 -2
View File
@@ -346,11 +346,11 @@
}
.org-root {
height: calc(100vh - 44px);
height: calc(100vh - 38px);
}
.org-slot {
min-width: calc(100vw - 250px);
height: calc(100vh - 44px);
height: calc(100vh - 38px);
overflow-y: auto;
}
@@ -411,4 +411,22 @@
column-gap: 12px;
row-gap: 12px;
}
@media screen and (max-width: 768px) {
:global(.cards-container) {
width: 95%;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
column-gap: 12px;
row-gap: 12px;
}
}
@media screen and (max-width: 457px) {
.org-slot {
min-width: 100%;
max-height: calc(100vh - 38px);
overflow-y: auto;
}
}
</style>
src/routes/lms/+page.svelte
+1 -1
View File
@@ -52,7 +52,7 @@
class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
>
<div
class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
>
<div>
<img src="/images/target.svg" alt="student Learning score" />
src/routes/org/[slug]/+page.svelte
+37 -11
View File
@@ -14,6 +14,7 @@
import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
import { onMount } from 'svelte';
import { Add } from 'carbon-icons-svelte';
export let data;
const { orgName } = data;
@@ -194,24 +195,32 @@
<div class="py-10 px-5 w-full max-w-7xl mx-auto">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Dashboard</h1>
<PrimaryButton label="Create Course" onClick={createCourse} />
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
{#if $isMobile}
<PrimaryButton onClick={createCourse}>
<Add size={24} />
</PrimaryButton>
{:else}
<PrimaryButton label="Create Course" onClick={createCourse} />
{/if}
</div>
<div class="flex items-start flex-wrap">
{#each boxes as box}
<div class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5">
<div
class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 justify-center px-5 md:mr-5 mb-5"
>
<p class="dark:text-white mb-2 text-sm">{box.label}</p>
<p class="dark:text-white text-xl font-bold">{box.value}</p>
</div>
{/each}
</div>
<div class="flex flex-wrap mt-5">
<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-5 w-full">
<!-- Your Schedule -->
<div>
<div class="w-full md:w-auto">
<p class="dark:text-white font-bold mb-7">Your Schedule</p>
<div class="rounded border w-2/5 border-gray-200 mr-5 schedule-box">
<div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box">
{#if !$isMobile}
<div id="calendar" class="flex justify-center mt-5">
<InlineCalendar bind:store {theme} />
@@ -287,15 +296,15 @@
<!-- Your Activities -->
<div>
<p class="dark:text-white font-bold mb-7">Your Activities</p>
<div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
<p class="dark:text-white font-bold mb-7 mt-5 lg:mt-0">Your Activities</p>
<div class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5">
{#each activities as activity}
<div class="flex mb-3 pb-3 border-b border-gray-200">
<Avatar src={activity.avatar} name="avatar" />
<div class="ml-2 flex">
<div class="ml-2 flex flex-col lg:flex-row">
<div class="mr-2">
<p class="dark:text-white">{activity.name}</p>
<p class="dark:text-white mb-2 mt-1">
<p class="dark:text-white mb-2 mt-1 line-clamp-1 md:line-clamp-2">
{activity.description}
</p>
<a href={activity.link}>View</a>
@@ -323,9 +332,9 @@
}
.schedule-box,
.activities-box {
min-width: 450px;
height: 516px;
overflow-y: auto;
overflow: hidden;
}
.calendar-root {
@@ -373,4 +382,21 @@
font-size: 30px;
}
}
/* @media screen and (min-width: 756px) {
.schedule-box,
.activities-box {
height: fit-content;
overflow-y: auto;
overflow: hidden;
}
}
@media screen and (min-width: 756px) {
.schedule-box,
.activities-box {
height: fit-content;
overflow-y: auto;
}
} */
</style>
src/routes/org/[slug]/audience/+page.svelte
+2 -7
View File
@@ -17,13 +17,8 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Audience</h1>
<PrimaryButton
label="Export"
onClick={exportAudience}
isDisabled={isLoading}
{isLoading}
/>
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Audience</h1>
<PrimaryButton label="Export" onClick={exportAudience} isDisabled={isLoading} {isLoading} />
</div>
<Audience />
src/routes/org/[slug]/community/+page.svelte
+14 -6
View File
@@ -3,6 +3,9 @@
import Community from '$lib/components/Org/Community/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { currentOrgPath } from '$lib/utils/store/org';
import { isMobile } from '$lib/utils/store/useMobile';
import AddFilled from 'carbon-icons-svelte/lib/AddFilled.svelte';
import Add from 'carbon-icons-svelte/lib/Add.svelte';
function askCommunity() {
goto(`${$currentOrgPath}/community/ask`);
@@ -13,13 +16,18 @@
<title>Community - ClassroomIO</title>
</svelte:head>
<section class="w-full max-w-4xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Community</h1>
<PrimaryButton label="Ask Community" onClick={askCommunity} />
<section class="w-full md:max-w-4xl md:mx-auto">
<div class="w-full py-10 px-5">
<div class="flex items-center justify-between mb-10 w-full">
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Community</h1>
{#if $isMobile}
<PrimaryButton onClick={askCommunity}>
<Add size={24} />
</PrimaryButton>
{:else}
<PrimaryButton label="Ask Community" onClick={askCommunity} />
{/if}
</div>
<Community />
</div>
</section>
src/routes/org/[slug]/community/ask/+page.svelte
+11 -10
View File
@@ -55,7 +55,7 @@
<title>Ask the Community - ClassroomIO</title>
</svelte:head>
<section class="w-full max-w-3xl mx-auto">
<section class="w-full md:max-w-3xl md:mx-auto">
<div class="p-5">
<a
class="text-gray-500 dark:text-white text-md flex items-center"
@@ -63,15 +63,15 @@
>
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
</a>
<div class="flex items-center justify-between">
<h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>
<div class="flex items-center gap-12 justify-between">
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Ask the community</h1>
<PrimaryButton label="Publish" onClick={handleSave} />
</div>
</div>
<div class="mb-3 p-2">
<input
class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
class="title rounded-lg border border-1 border-gray p-2 w-full dark:text-black focus:outline-none"
error="false"
autocomplete="off"
placeholder="Title"
@@ -88,10 +88,11 @@
</p>
{/if}
</div>
<TextEditor
bind:value={fields.body}
placeholder="Ask the community any question you might have"
onChange={(html) => (fields.body = html)}
/>
<div class="px-2">
<TextEditor
bind:value={fields.body}
placeholder="Ask the community any question you might have"
onChange={(html) => (fields.body = html)}
/>
</div>
</section>
src/routes/org/[slug]/courses/+page.svelte
+12 -4
View File
@@ -9,6 +9,8 @@
import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
import { setProfileIdOfGroupMember } from '$lib/utils/services/courses';
import { currentOrg } from '$lib/utils/store/org';
import { Add } from 'carbon-icons-svelte';
import { isMobile } from '$lib/utils/store/useMobile';
export let data;
let { allCourses, cantFetch } = data;
@@ -47,11 +49,17 @@
<title>Courses - ClassroomIO</title>
</svelte:head>
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<section class="w-full md:max-w-6xl md:mx-auto">
<div class="py-10 px-2 md:px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Courses</h1>
<PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Courses</h1>
{#if $isMobile}
<PrimaryButton onClick={() => ($createCourseModal.open = true)}>
<Add size={24} />
</PrimaryButton>
{:else}
<PrimaryButton label="Create Course" onClick={() => ($createCourseModal.open = true)} />
{/if}
</div>
<NewCourseModal />
src/routes/org/[slug]/quiz/+page.svelte
+10 -5
View File
@@ -4,6 +4,8 @@
import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { createQuizModal } from '$lib/utils/store/org';
import { isMobile } from '$lib/utils/store/useMobile';
import { Add } from 'carbon-icons-svelte';
</script>
<svelte:head>
@@ -13,11 +15,14 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-3xl font-bold">Interactive Quizzes</h1>
<PrimaryButton
label="Create Quiz"
onClick={() => ($createQuizModal.open = true)}
/>
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Interactive Quizzes</h1>
{#if $isMobile}
<PrimaryButton onClick={() => ($createQuizModal.open = true)}>
<Add size={24} />
</PrimaryButton>
{:else}
<PrimaryButton label="Create Quiz" onClick={() => ($createQuizModal.open = true)} />
{/if}
</div>
<NewQuizModal />
src/routes/org/[slug]/settings/domains/+page.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
</svelte:head>
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="py-10 px-3 md:px-5">
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
>Back to Settings</a
>
src/routes/org/[slug]/settings/teams/+page.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
</svelte:head>
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="py-10 px-3 md:px-5">
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
>Back to Settings</a
>