CLASSROOMIO-T-3: Make pages mobile friendly

src/components/Course/components/Lesson/Materials/index.svelte

@@ -101,6 +101,7 @@
           frameborder="0"
           width="100%"
           height="569"
+          class="iframe"
           allowfullscreen="true"
           mozallowfullscreen="true"
           webkitallowfullscreen="true"
@@ -144,6 +145,7 @@
             <iframe
               width="100%"
               height="569"
+              class="iframe"
               src={formatYoutubeVideo(url)}
               title="YouTube video player"
               frameborder="0"
@@ -161,3 +163,15 @@
     </TabContent>
   </slot:fragment>
 </Tabs>
+
+<style>
+  .iframe {
+    height: 569px;
+  }
+
+  @media (max-width: 760px) {
+    .iframe {
+      height: 209px;
+    }
+  }
+</style>

src/components/Course/components/Navigation/index.svelte

@@ -24,6 +24,7 @@
   import { course, group } from '../../store';
   import { updateCourse } from '../../../../utils/services/courses';
   import { profile } from '../../../../utils/store/user';
+  import { isMobile } from '../../../../utils/store/useMobile';
 
   // export let lessonId;
   export let path;
@@ -34,6 +35,9 @@
 
   function handleMainGroupClick(href) {
     return () => {
+      if ($isMobile) {
+        show = false;
+      }
       goto(href);
     };
   }
@@ -49,6 +53,11 @@
     updateCourse($course.id, { title: $course.title });
   }
 
+  function handleMobileChange(isMobile) {
+    if (isMobile) show = false;
+    else show = true;
+  }
+
   onMount(() => {
     if (localStorage.getItem('hideCourseNav')) {
       show = localStorage.getItem('hideCourseNav') === 'false';
@@ -66,6 +75,8 @@
     });
   });
 
+  $: handleMobileChange($isMobile);
+
   $: {
     if (process.browser && show !== null) {
       localStorage.setItem('hideCourseNav', `${!show}`);
@@ -125,7 +136,9 @@
 
 <Settings />
 
-<div class="root z-10 {!show && 'hide'}">
+<div
+  class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
+>
   {#if show}
     <div class="relative h-full">
       <PageNav bind:title={$course.title} paddingClass="pl-2">
@@ -142,43 +155,47 @@
           </RoleBasedSecurity>
         </slot:fragment>
       </PageNav>
-      {#each navItems as navItem}
-        {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
-          <Expandable
-            label={navItem.label}
-            handleClick={handleMainGroupClick(navItem.to)}
-            isGroupActive={(path || $page.path) === navItem.to}
-            hideSortIcon={navItem.hideSortIcon}
-          >
-            {#if navItem.isLecture}
-              {#each $lessons as item, index}
-                <a
-                  class="item flex items-center {(path || $page.path).includes(
-                    item.id
-                  ) && 'active'} pl-7 py-2 {isStudent && !item.is_complete
-                    ? 'cursor-not-allowed'
-                    : ''}"
-                  href={isStudent && !item.is_complete
-                    ? $page.path
-                    : getLessonsRoute($course.id, item.id)}
-                >
-                  <span class="course-counter">
-                    {getLectureNo(index + 1)}
-                  </span>
-                  <span>{item.title}</span>
-                  {#if item.is_complete}
-                    <span class="ml-2 success">
-                      <CheckmarkFilled20 class="carbon-icon" />
+      <div class="navItems">
+        {#each navItems as navItem}
+          {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
+            <Expandable
+              label={navItem.label}
+              handleClick={handleMainGroupClick(navItem.to)}
+              isGroupActive={(path || $page.path) === navItem.to}
+              hideSortIcon={navItem.hideSortIcon}
+            >
+              {#if navItem.isLecture}
+                {#each $lessons as item, index}
+                  <a
+                    class="item flex items-center {(
+                      path || $page.path
+                    ).includes(item.id) && 'active'} pl-7 py-2 {isStudent &&
+                    !item.is_complete
+                      ? 'cursor-not-allowed'
+                      : ''}"
+                    href={isStudent && !item.is_complete
+                      ? $page.path
+                      : getLessonsRoute($course.id, item.id)}
+                    on:click={() => $isMobile && (show = false)}
+                  >
+                    <span class="course-counter">
+                      {getLectureNo(index + 1)}
                     </span>
-                  {:else}
-                    <span class="text-md ml-2">🔒</span>
-                  {/if}
-                </a>
-              {/each}
-            {/if}
-          </Expandable>
-        {/if}
-      {/each}
+                    <span>{item.title}</span>
+                    {#if item.is_complete}
+                      <span class="ml-2 success">
+                        <CheckmarkFilled20 class="carbon-icon" />
+                      </span>
+                    {:else}
+                      <span class="text-md ml-2">🔒</span>
+                    {/if}
+                  </a>
+                {/each}
+              {/if}
+            </Expandable>
+          {/if}
+        {/each}
+      </div>
 
       <div
         class="w-full footer p-3 absolute bottom-2 flex items-center justify-between"
@@ -187,6 +204,7 @@
           value="toggle"
           onClick={() => goto('/courses')}
           buttonClassName="mx-3"
+          size={$isMobile ? 'large' : 'small'}
         >
           <Home32 class="carbon-icon" />
         </IconButton>
@@ -223,7 +241,6 @@
     flex-direction: column;
     min-width: 360px;
     max-width: 360px;
-    position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
     background-color: rgb(250, 251, 252);
@@ -260,6 +277,11 @@
     }
   }
 
+  .navItems {
+    height: 82%;
+    overflow-y: scroll;
+  }
+
   .toggler {
     right: -15px;
     z-index: 10;
@@ -268,4 +290,12 @@
     height: fit-content;
     background: var(--border-color);
   }
+
+  @media (max-width: 760px) {
+    .root {
+      width: 95%;
+      min-width: unset;
+      max-width: unset;
+    }
+  }
 </style>

src/components/CourseContainer/index.svelte

@@ -7,6 +7,7 @@
   // import { questionnaireMetaData } from '../Course/components/Lesson/store/answers';
   import { course } from '../Course/store';
   import Confetti from '../Confetti/index.svelte';
+  import { isMobile } from '../../utils/store/useMobile';
 
   export let path = '';
   export let isExercisePage = false;
@@ -33,7 +34,7 @@
 
 <div class="root">
   <Navigation {path} />
-  <div class="rightBar">
+  <div class="rightBar" class:isMobile={$isMobile}>
     {#if isExercisePage}
       <Confetti />
     {/if}
@@ -51,4 +52,8 @@
     flex-grow: 1;
     width: calc(100% - 360px);
   }
+
+  .rightBar.isMobile {
+    margin-left: 10px;
+  }
 </style>

src/components/Courses/index.svelte

@@ -4,7 +4,9 @@
   import { courses } from './store';
 </script>
 
-<div class="flex items-center flex-wrap my-4 m-auto">
+<div
+  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
+>
   {#each $courses as courseData}
     <Card
       id={courseData.id}

src/components/Navigation/index.svelte

@@ -171,8 +171,5 @@
     ul {
       align-items: center;
     }
-    li a {
-      display: none;
-    }
   }
 </style>

src/components/PageBody/index.svelte

@@ -1,7 +1,7 @@
 <script>
   // import
   //   border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
-  export let width = 'max-w-3xl w-11/12';
+  export let width = 'max-w-3xl w-full lg:w-11/12';
   export let padding = 'pb-5 px-4';
   export let className = '';
 </script>

src/components/PageNav/index.svelte

@@ -138,4 +138,10 @@
     text-overflow: ellipsis;
     padding: 10px;
   }
+
+  @media (max-width: 760px) {
+    .title {
+      width: fit-content;
+    }
+  }
 </style>

src/components/Question/CheckboxQuestion/index.svelte

@@ -60,7 +60,7 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
+    <h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField

src/components/Question/RadioQuestion/index.svelte

@@ -60,7 +60,7 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
+    <h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField

src/components/Question/TextareaQuestion/index.svelte

@@ -35,7 +35,7 @@
 
 <form on:submit|preventDefault={handleFormSubmit}>
   <div class="flex items-center justify-between">
-    <h2 class={!isNaN(grade) && 'w-3/4'}>{title}</h2>
+    <h3 class={!isNaN(grade) && 'w-3/4'}>{title}</h3>
     {#if !isNaN(grade)}
       <div class="flex items-center">
         <TextField

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}

src/utils/store/useMobile.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isMobile = writable(false);