CLASSROOMIO-T-3: Mobile improvments

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

@@ -204,7 +204,6 @@
           value="toggle"
           onClick={() => goto('/courses')}
           buttonClassName="mx-3"
-          size={$isMobile ? 'large' : 'small'}
         >
           <Home32 class="carbon-icon" />
         </IconButton>
@@ -218,12 +217,14 @@
     <IconButton
       value="toggle"
       onClick={() => (show = !show)}
-      size="small"
+      size={$isMobile ? 'large' : 'small'}
-      toolTipProps={{
+      toolTipProps={$isMobile
-        title: 'Toggle sidebar',
+        ? {}
-        hotkeys: ['B'],
+        : {
-        direction: 'right',
+            title: 'Toggle sidebar',
-      }}
+            hotkeys: ['B'],
+            direction: 'right',
+          }}
     >
       {#if show}
         <ChevronLeft16 class="carbon-icon" />
@@ -279,7 +280,7 @@
 
   .navItems {
     height: 82%;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 
   .toggler {
@@ -293,7 +294,7 @@
 
   @media (max-width: 760px) {
     .root {
-      width: 95%;
+      width: 98%;
       min-width: unset;
       max-width: unset;
     }

src/components/Snackbar/index.svelte

@@ -36,32 +36,34 @@
 </script>
 
 {#if $snackbarStore.open}
-  <div
+  {#key $snackbarStore.message}
-    transition:fly={{ y: 200, duration: 500 }}
+    <div
-    class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
+      transition:fly={{ x: 200, duration: 500 }}
-  >
+      class="root text-white rounded-md flex justify-between items-center absolute {severityColor}"
-    <div class="flex items-center">
+    >
-      {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
+      <div class="flex items-center">
-        <CheckmarkOutline24 class="carbon-icon" />
+        {#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
-      {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
+          <CheckmarkOutline24 class="carbon-icon" />
-        <Warning24 class="carbon-icon" />
+        {:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
-      {:else}
+          <Warning24 class="carbon-icon" />
-        <Information24 class="carbon-icon" />
+        {:else}
-      {/if}
+          <Information24 class="carbon-icon" />
-      <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+        {/if}
-    </div>
+        <p class="ml-2 text-lg">{$snackbarStore.message}</p>
+      </div>
 
-    <CloseButton onClick={handleClose} contained={true} color="text-white" />
+      <CloseButton onClick={handleClose} contained={true} color="text-white" />
-  </div>
+    </div>
+  {/key}
 {/if}
 
 <style>
   .root {
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    left: 50%;
+    right: 5%;
-    right: auto;
+    left: auto;
-    bottom: 24px;
+    top: 24px;
-    transform: translateX(-50%);
+    transform: translateX(-5%);
     min-width: 288px;
     padding: 6px 16px;
     flex-wrap: wrap;

src/routes/courses/[id]/people.svelte

@@ -141,7 +141,7 @@
         <p class="text-lg w-2/4">Name</p>
         <p class="text-lg w-1/4 ">Role</p>
         <RoleBasedSecurity allowedRoles={[1, 2]}>
-          <p class="text-lg w-20" />
+          <p class="hidden lg:block text-lg w-20" />
         </RoleBasedSecurity>
       </div>
 
@@ -149,7 +149,7 @@
         <div class="flex relative items-center p-3 {borderBottomGrey}">
           {#if !shouldEditMemberId}
             <p
-              class="mr-2 w-20 text-center {!isStudent &&
+              class="mr-2 w-10 text-center {!isStudent &&
                 'hover:bg-gray-100 cursor-pointer'} p-3"
               on:click={() => !isStudent && handleEditStudentIdMode()}
             >
@@ -160,7 +160,7 @@
               bind:value={person.assigned_student_id}
               type="string"
               placeholder="Unique ID"
-              className="w-24"
+              className="w-20"
               onChange={() => editMemberId(person)}
             />
           {/if}
@@ -199,7 +199,7 @@
           <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
 
           <RoleBasedSecurity allowedRoles={[1, 2]}>
-            <div class="w-20">
+            <div class="hidden lg:block w-20">
               {#if person.profile_id !== $profile.id}
                 <IconButton
                   onClick={() => {

src/routes/courses/[id]/submissions.svelte

@@ -24,6 +24,7 @@
   } from '../../../utils/services/submissions';
   import { formatAnswers } from '../../../components/Course/function';
   import { snackbarStore } from '../../../components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '../../../components/Snackbar/constants';
 
   const flipDurationMs = 300;
 
@@ -168,9 +169,11 @@
       { returning: 'minimal' }
     ).then((res) => console.log('Updated submission', res));
 
-    await Promise.all(updates);
     $snackbarStore.open = true;
     $snackbarStore.message = `Saved successfully`;
+    $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+    await Promise.all(updates);
   }
 
   onMount(async () => {

src/routes/login.svelte

@@ -78,7 +78,7 @@
           <div class="h-40 text-md flex items-center justify-center flex-col">
             <p class="">
               A link has been sent to your email. Please check both your
-              <strong>spam </strong>and your<strong> inbox</strong>.
+              <strong>spam </strong>and your<strong>&nbsp; inbox</strong>.
             </p>
             <p class="mt-2 underline">
               If our email is in your spam, do make sure you mark our email