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>

src/components/IconButton/index.svelte

@@ -6,6 +6,7 @@
   export let buttonClassName = '';
   export let contained = false;
   export let value = '';
+  export let size = 'large';
   export let toolTipProps = {
     title: '',
     hotkeys: [],
@@ -23,7 +24,7 @@
   direction={toolTipProps.direction}
 >
   <button
-    class="root {selected && 'active'} {contained &&
+    class="root {selected && 'active'} {size} {contained &&
       'contained'} {buttonClassName}"
     {disabled}
     on:click={handleClick}
@@ -58,6 +59,10 @@
     }
   }
 
+  .root.small {
+    padding: 5px;
+  }
+
   .contained {
     background-color: rgba(0, 0, 0, 0.04);
   }

src/components/Modal/index.svelte

@@ -6,6 +6,7 @@
   export let onClose = () => {};
   export let modalHeading = '';
   export let width = '';
+  export let maxWidth = '';
   export let containerClass = '';
 
   afterUpdate(() => {
@@ -23,7 +24,8 @@
   >
     <div aria-hidden="true" class="backdrop" />
     <div
-      class="container bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
+      class="{maxWidth ||
+        'container'} bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
     >
       <div class="flex items-center justify-between mb-4">
         <h3 class="text-xl m-0">

src/components/PageBody/index.svelte

@@ -19,7 +19,7 @@
 
 <style>
   .root {
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 85vh;
   }
   .head {

src/components/PageNav/index.svelte

@@ -46,7 +46,10 @@
         />
       {/if}
     {:else}
-      <h4 class="title">{title}</h4>
+      <div class="flex items-center" {title}>
+        <slot name="image" />
+        <h4 class="title">{title}</h4>
+      </div>
     {/if}
   {/if}
   {#if Array.isArray(navItems) && navItems.length}
@@ -78,7 +81,12 @@
   }
 
   .title {
-    font-size: 20px;
+    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 250px;
+    margin-left: 5px;
   }
 
   h4 {
@@ -121,11 +129,4 @@
     text-overflow: ellipsis;
     padding: 10px;
   }
-
-  @media only screen and (max-width: 1002px) {
-    .header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
 </style>

src/components/UploadImage/index.svelte

@@ -0,0 +1,79 @@
+<script>
+  export let avatar;
+  export let src;
+  export let widthHeight;
+
+  let fileinput;
+
+  const onFileSelected = (e) => {
+    const image = e.target.files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(image);
+    reader.onload = (e) => {
+      avatar = image;
+      src = e.target.result;
+    };
+  };
+</script>
+
+<section class="flex justify-center">
+  <div
+    class="avatar-container {widthHeight ||
+      'setwidthheight'} pointer border-2 border-gray-200 relative hover:bg-gray-400 hover:bg-opacity-75 cursor-pointer rounded-full"
+    on:click={() => {
+      fileinput.click();
+    }}
+  >
+    {#if src}
+      <img class="w-full h-full rounded-full" {src} alt="d" />
+    {:else if avatar}
+      <img class="w-full h-full rounded-full" src={avatar} alt="d" />
+    {:else}
+      <img
+        class="w-full h-full rounded-full"
+        src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png"
+        alt=""
+      />
+    {/if}
+    <div
+      class="upload-icon w-full h-full flex items-center justify-center top-0"
+    >
+      <svg
+        class="text-white"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        role="presentation"
+        ><g fill="currentColor" fill-rule="evenodd"
+          ><path
+            d="M2 6.994C2 5.893 2.898 5 3.99 5h16.02C21.108 5 22 5.895 22 6.994v12.012A1.997 1.997 0 0120.01 21H3.99A1.994 1.994 0 012 19.006V6.994zM12 17a4 4 0 100-8 4 4 0 000 8zm5-8c0 .556.448 1 1 1 .556 0 1-.448 1-1 0-.556-.448-1-1-1-.556 0-1 .448-1 1zM8 4c0-.552.453-1 .997-1h6.006c.55 0 .997.444.997 1v1H8V4z"
+          /><circle cx="12" cy="13" r="2" /></g
+        ></svg
+      >
+    </div>
+  </div>
+
+  <input
+    style="display:none"
+    type="file"
+    accept=".jpg, .jpeg, .png"
+    on:change={(e) => onFileSelected(e)}
+    bind:this={fileinput}
+  />
+</section>
+
+<style>
+  .avatar-container.setwidthheight {
+    height: 128px;
+    width: 128px;
+  }
+
+  .upload-icon {
+    display: none;
+  }
+
+  .avatar-container:hover .upload-icon {
+    display: flex;
+    position: absolute;
+  }
+</style>