CLASSROOMIO-T-3: Make pages mobile friendly

src/routes/_layout.svelte

@@ -19,6 +19,7 @@
   import { handleAuthChange } from '../utils/functions/api';
   import { user, profile } from '../utils/store/user';
   import { getSupabase } from '../utils/functions/supabase';
+  import { isMobile } from '../utils/store/useMobile';
 
   export let segment;
   export let config;
@@ -95,7 +96,13 @@
     return /courses\/[a-z 0-9 -]/.test(path);
   }
 
+  function handleResize() {
+    isMobile.update(() => window.innerWidth <= 760);
+  }
+
   onMount(() => {
+    handleResize();
+
     const _isMvpUser = localStorage.getItem('mvp');
 
     console.log('mounting layout', isMvpUser, path, _isMvpUser);
@@ -103,9 +110,9 @@
       localStorage.setItem('mvp', 'true');
       allowUser = true;
     } else if (!_isMvpUser) {
-      if (!!path) {
-        goto('/courses');
-      }
+      // if (!!path) {
+      //   goto('/courses');
+      // }
 
       return;
     }
@@ -134,6 +141,7 @@
   $: path = $page.path.replace('/', '');
 </script>
 
+<svelte:window on:resize={handleResize} />
 <Tailwindcss />
 
 <!-- <Nav {segment} /> -->

src/routes/courses.svelte

@@ -104,7 +104,6 @@
   }
 
   async function getCourses(userId) {
-    console.log(`getCourses process.browser`, process.browser, cantFetch);
     if (process.browser) {
       if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
         const updatedProfile = await setProfileIdOfGroupMember(

src/routes/courses/[id]/lessons/index.svelte

@@ -136,7 +136,7 @@
 
   <PageBody padding="p-0">
     <section
-      class="w-11/12 py-3 px-4 m-auto lesson-list"
+      class="w-full lg:w-11/12 py-3 px-3 lg:px-4 m-auto lesson-list"
       use:dndzone={{
         items: $lessons,
         flipDurationMs,
@@ -179,7 +179,7 @@
 
           <RoleBasedSecurity allowedRoles="[1,2]">
             <!-- Edit/Save -->
-            <div class="absolute top-2 right-0">
+            <div class="absolute -top-2 -right-2">
               {#if lessonEditing === lesson.id}
                 <IconButton
                   onClick={() => {
@@ -226,31 +226,35 @@
               </div>
             </div> -->
 
-            <div class="flex items-center justify-between mt-6 w-full">
-              {#if lessonEditing === lesson.id}
-                <Select
-                  bind:value={lesson.profile}
-                  options={$group.tutors}
-                  labelKey="fullname"
-                />
-              {:else if !lesson.profile}
-                <p class="ml-2 text-sm">No tutor added</p>
-              {:else}
-                <a href="." class="flex items-center hover:underline">
-                  <img
-                    alt="Placeholder"
-                    class="block rounded-full"
-                    width="24"
-                    height="20"
-                    src={lesson.profile.avatar_url}
+            <div
+              class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-6 w-full"
+            >
+              <div class="mb-3 lg:mb-0">
+                {#if lessonEditing === lesson.id}
+                  <Select
+                    bind:value={lesson.profile}
+                    options={$group.tutors}
+                    labelKey="fullname"
                   />
-                  <p class="ml-2 text-sm">
-                    {lesson.profile.fullname}
-                  </p>
-                </a>
-              {/if}
+                {:else if !lesson.profile}
+                  <p class="ml-2 text-sm">No tutor added</p>
+                {:else}
+                  <a href="." class="flex items-center hover:underline">
+                    <img
+                      alt="Placeholder"
+                      class="block rounded-full"
+                      width="24"
+                      height="20"
+                      src={lesson.profile.avatar_url}
+                    />
+                    <p class="ml-2 text-sm">
+                      {lesson.profile.fullname}
+                    </p>
+                  </a>
+                {/if}
+              </div>
 
-              <div class="flex items-cente">
+              <div class="flex items-center mb-3 lg:mb-0">
                 {#if lessonEditing === lesson.id}
                   <input
                     type="date"
@@ -267,7 +271,7 @@
                 {/if}
               </div>
 
-              <div class="flex items-center">
+              <div class="flex items-center mb-3 lg:mb-0">
                 {#if lessonEditing === lesson.id}
                   <TextField
                     bind:value={lesson.call_url}

src/routes/login.svelte

@@ -54,7 +54,7 @@
 </svelte:head>
 
 <div class="w-full h-screen flex items-center justify-center ">
-  <div class="container border border-gray-300 rounded-md p-12">
+  <div class="container border border-gray-300 rounded-md p-2 lg:p-12">
     <form
       on:submit|preventDefault={handleSubmit}
       class="flex items-center flex-col w-full"
@@ -103,8 +103,8 @@
       </div>
 
       {#if !success}
-        <div class="my-4 w-full flex justify-between items-center">
-          <a href="/signup" class="text-blue-700 text-sm">Create an account</a>
+        <div class="my-4 w-full flex justify-end items-center">
+          <!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
           <PrimaryButton
             label={loading ? 'Creating...' : 'Next'}
             type="submit"

src/routes/profile/[id].svelte

@@ -121,9 +121,11 @@
   <title>Profile of {currentProfile.username}</title>
 </svelte:head>
 
-<section class="root w-11/12 mt-3 m-auto flex items-start justify-between">
+<section
+  class="root w-11/12 mt-3 m-auto flex items-start justify-between flex-col lg:flex-row"
+>
   {#if currentProfile.id}
-    <div class="w-1/4 flex items-center flex-col">
+    <div class="w-full lg:w-1/4 flex items-center flex-col">
       <!-- <img
         alt={currentProfile.username}
         src={currentProfile.avatar_url}