CLASSROOMIO-T-145:Made the LMS dashboard responsive

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 <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-66
Merged-by: Best Admin <best@digdippa.com>
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
@@ -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>