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>

src/lib/components/Org/Settings/LandingpageSettings.svelte

@@ -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

@@ -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

@@ -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

@@ -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>