Upload avatar

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

@@ -1,14 +1,17 @@
 <script>
   import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
   import { stores, goto } from '@sapper/app';
   import hotkeys from 'hotkeys-js';
+  import Home32 from 'carbon-icons-svelte/lib/Home32';
   import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
   import Settings20 from 'carbon-icons-svelte/lib/Settings20';
-  import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
-  import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
+  import ChevronLeft16 from 'carbon-icons-svelte/lib/ChevronLeft16';
+  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import Expandable from '../../../Expandable/index.svelte';
   import PageNav from '../../../PageNav/index.svelte';
   import IconButton from '../../../IconButton/index.svelte';
+  import Avatar from '../../../Avatar/index.svelte';
   import {
     getNavItemRoute,
     getLessonsRoute,
@@ -20,10 +23,11 @@
   import { lessons } from '../Lesson/store/lessons';
   import { course } from '../../store';
   import { updateCourse } from '../../../../utils/services/courses';
+  import { profile } from '../../../../utils/store/user';
 
   // export let lessonId;
   export let path;
-  let show = null;
+  let show = true;
 
   const { page } = stores();
 
@@ -45,7 +49,11 @@
   }
 
   onMount(() => {
-    show = localStorage.getItem('hideCourseNav') === 'false';
+    if (localStorage.getItem('hideCourseNav')) {
+      show = localStorage.getItem('hideCourseNav') === 'false';
+    } else {
+      show = true;
+    }
 
     hotkeys('b', function (event, handler) {
       event.preventDefault();
@@ -101,23 +109,22 @@
 </script>
 
 <Settings />
+
 <div class="root z-10 {!show && 'hide'}">
   {#if show}
-    <PageNav
-      bind:title={$course.title}
-      onEditComplete={handleSaveTitle}
-      isTitleEditable={true}
-      paddingClass="pl-2"
-    >
-      <slot:fragment slot="widget">
-        <IconButton
-          onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
-        >
-          <Settings20 class="carbon-icon" />
-        </IconButton>
-      </slot:fragment>
-    </PageNav>
-    <div>
+    <div class="relative h-full">
+      <PageNav bind:title={$course.title} paddingClass="pl-2">
+        <slot:fragment slot="image">
+          <Avatar src={$course.logo} />
+        </slot:fragment>
+        <slot:fragment slot="widget">
+          <IconButton
+            onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
+          >
+            <Settings20 class="carbon-icon" />
+          </IconButton>
+        </slot:fragment>
+      </PageNav>
       {#each navItems as navItem}
         <Expandable
           label={navItem.label}
@@ -134,7 +141,9 @@
                   'cursor-not-allowed'}"
                 href={getLessonsRoute($course.id, item.id)}
               >
-                <span class="course-counter"> {getLectureNo(index + 1)} </span>
+                <span class="course-counter">
+                  {getLectureNo(index + 1)}
+                </span>
                 <span>{item.title}</span>
                 {#if item.is_complete}
                   <span class="ml-2 success">
@@ -148,12 +157,28 @@
           {/if}
         </Expandable>
       {/each}
+
+      <div
+        class="w-full footer p-3 absolute bottom-2 flex items-center justify-between"
+      >
+        <IconButton
+          value="toggle"
+          onClick={() => goto('/courses')}
+          buttonClassName="mx-3"
+        >
+          <Home32 class="carbon-icon" />
+        </IconButton>
+        <a class="block mx-3" href={`/profile/${$profile.id}`}>
+          <Avatar src={$profile.avatar_url} name={$profile.username} />
+        </a>
+      </div>
     </div>
   {/if}
-  <div class="toggler absolute bottom-0 -right-0.5">
+  <div class="toggler rounded-full shadow-lg absolute bottom-0">
     <IconButton
       value="toggle"
       onClick={() => (show = !show)}
+      size="small"
       toolTipProps={{
         title: 'Toggle sidebar',
         hotkeys: ['B'],
@@ -161,9 +186,9 @@
       }}
     >
       {#if show}
-        <ChevronLeft32 class="carbon-icon" />
+        <ChevronLeft16 class="carbon-icon" />
       {:else}
-        <ChevronRight32 class="carbon-icon" />
+        <ChevronRight16 class="carbon-icon" />
       {/if}
     </IconButton>
   </div>
@@ -171,7 +196,7 @@
 
 <style lang="scss">
   .root {
-    height: 93vh;
+    height: 100vh;
     display: flex;
     flex-direction: column;
     min-width: 360px;
@@ -182,11 +207,16 @@
     background-color: rgb(250, 251, 252);
 
     &.hide {
-      min-width: 0px;
-      max-width: 0px;
+      min-width: 15px;
+      max-width: 15px;
     }
   }
 
+  .footer {
+    border-top: 1px solid var(--border-color);
+    height: 50px;
+  }
+
   .active {
     background-color: #cae2f9;
     border-left: 3px solid var(--main-primary-color);
@@ -209,10 +239,11 @@
   }
 
   .toggler {
-    right: -58px;
+    right: -15px;
     z-index: 10;
     border: 1px solid var(--border-color);
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
+    top: 50px;
+    height: fit-content;
+    background: var(--border-color);
   }
 </style>

src/components/Course/components/People/InviationModal.svelte

@@ -65,6 +65,7 @@
   onClose={resetForm}
   bind:open={$invitationModal.open}
   width="w-2/5"
+  maxWidth="max-w-lg"
   modalHeading="Invite people"
 >
   <form on:submit|preventDefault={addPerson}>

src/components/Course/components/Settings/index.svelte

@@ -1,7 +1,9 @@
 <script>
   import Modal from '../../../Modal/index.svelte';
+  import TextField from '../../../Form/TextField.svelte';
   import TextArea from '../../../Form/TextArea.svelte';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import UploadImage from '../../../UploadImage/index.svelte';
 
   import { VARIANTS } from '../../../PrimaryButton/constants';
   import { settingsDialog } from './store';
@@ -12,22 +14,43 @@
   } from '../../../../utils/services/courses';
 
   let shouldDelete = false;
+  let avatar;
+  let errors = {};
 
   async function updateDescription() {
-    console.log('update');
+    if (!$course.title) {
+      errors.title = 'Title cannot be empty';
+      return;
+    }
+    if (!$course.description) {
+      errors.description = 'Description cannot be empty';
+      return;
+    }
 
     $settingsDialog.open = false;
-    await updateCourse($course.id, {
+    const logo = await updateCourse($course.id, {
+      avatar,
+      title: $course.title,
       description: $course.description,
     });
+
+    if (logo) {
+      $course.logo = logo;
+    }
+
+    avatar = undefined;
   }
 
   async function handleDelete() {
-    console.log('delete');
-
     $settingsDialog.open = false;
     await deleteCourse($course.id);
   }
+
+  function setAvatar(logo) {
+    avatar = logo;
+  }
+
+  $: setAvatar($course.logo);
 </script>
 
 <Modal
@@ -57,6 +80,14 @@
     </form>
   {:else}
     <form on:submit|preventDefault={updateDescription}>
+      <UploadImage bind:avatar />
+      <TextField
+        bind:value={$course.title}
+        placeholder="Course title"
+        className="mb-4"
+        isRequired={true}
+        errorMessage={errors.title}
+      />
       <TextArea
         label="Short description"
         bind:value={$course.description}
@@ -65,6 +96,7 @@
         placeholder="A little description about this course"
         className="mb-4"
         isRequired={true}
+        errorMessage={errors.description}
       />
 
       <div class="mt-5 flex items-center justify-between">

src/components/Course/index.svelte

@@ -38,7 +38,7 @@
   </svelte:fragment>
 </PageNav>
 
-<PageBody>
+<PageBody width="max-w-3xl px-3">
   {#if mode === MODES.edit}
     <EditContent
       writeLabel="Note"
@@ -50,6 +50,8 @@
       }}
     />
   {:else}
-    {@html marked($course.overview || '', { breaks: true, gfm: true })}
+    <article class="preview prose prose-sm sm:prose p-2">
+      {@html marked($course.overview || '')}
+    </article>
   {/if}
 </PageBody>