Course profile, course fluid layout, fluid iframe

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package-lock.json

@@ -1042,6 +1042,30 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+      "dev": true
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -2844,6 +2868,15 @@
       "integrity": "sha512-r+n8UJkDqoQm1b+3tA3Lh6mHXKpcfOSOuEuIo5gE2W9wQYi64RYX/qE6CZBDDsP/H4M+N426JwY7XGH4xASvGQ==",
       "dev": true
     },
+    "svelte-awesome": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/svelte-awesome/-/svelte-awesome-2.3.1.tgz",
+      "integrity": "sha512-n+6u0hMTUHvDR+pBbVghEr7TxA1lLoTE3ZuySteDChNGxpW1GMjN2cm6sZ1yr+868HOzoSS529YG02YuwFpxbw==",
+      "dev": true,
+      "requires": {
+        "svelte": "^3.15.0"
+      }
+    },
     "svelte-preprocess": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.6.1.tgz",

package.json

@@ -21,6 +21,8 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/runtime": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
@@ -34,6 +36,7 @@
     "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
+    "svelte-awesome": "^2.3.1",
     "svelte-preprocess": "^4.3.0",
     "tailwindcss": "^2.1.2",
     "typescript": "^4.1.3"

src/components/Course/components/CourseNav.svelte

@@ -7,7 +7,6 @@
 
   function handleMainGroupClick(href) {
     return () => {
-      console.log("goto", href);
       goto(href);
     };
   }
@@ -36,60 +35,13 @@
   ];
 </script>
 
-<div class="root">
-  <PageNav title="React.JS" />
-  <div>
-    <Expandable
-      label="Overview"
-      handleClick={handleMainGroupClick("/courses/1")}
-      isGroupActive={$page.path === "/courses/1"}
-      hideSortIcon
-    />
-    <Expandable label="Lectures">
-      {#each lectures as lecture}
-        <a
-          class="item {(lecture.link === $page.path ||
-            !$page.path.length > 3) &&
-            'active'} pl-7 py-2"
-          href={lecture.link}
-        >
-          # <span>{lecture.title}</span>
-        </a>
-      {/each}
-    </Expandable>
-    <Expandable
-      label="People"
-      handleClick={handleMainGroupClick("/courses/1/people")}
-      isGroupActive={$page.path === "/courses/1/people"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Timetable"
-      handleClick={handleMainGroupClick("/courses/1/timetable")}
-      isGroupActive={$page.path === "/courses/1/timetable"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Scoreboard"
-      handleClick={handleMainGroupClick("/courses/1/score")}
-      isGroupActive={$page.path === "/courses/1/score"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Home tasks"
-      handleClick={handleMainGroupClick("/courses/1/hometasks")}
-      isGroupActive={$page.path === "/courses/1/hometasks"}
-      hideSortIcon
-    />
-  </div>
-</div>
-
 <style>
   .root {
     height: 90vh;
     display: flex;
     flex-direction: column;
-    width: 250px;
+    width: 20%;
+    max-width: 250px;
     position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
@@ -99,10 +51,51 @@
   .active {
     background-color: #cae2f9;
     border-left: 3px solid var(--main-primary-color);
-    padding-left: 0.85rem;
+    padding-left: 1.5rem;
   }
 
   .item:hover {
     background-color: #cae2f9;
   }
 </style>
+
+<div class="root">
+  <PageNav title="React.JS" />
+  <div>
+    <Expandable
+      label="Overview"
+      handleClick={handleMainGroupClick('/courses/1')}
+      isGroupActive={$page.path === '/courses/1'}
+      hideSortIcon />
+    <Expandable label="Lectures">
+      {#each lectures as lecture}
+        <a
+          class="item {(lecture.link === $page.path || !$page.path.length > 3) && 'active'} pl-7 py-2"
+          href={lecture.link}>
+          #
+          <span>{lecture.title}</span>
+        </a>
+      {/each}
+    </Expandable>
+    <Expandable
+      label="People"
+      handleClick={handleMainGroupClick('/courses/1/people')}
+      isGroupActive={$page.path === '/courses/1/people'}
+      hideSortIcon />
+    <Expandable
+      label="Timetable"
+      handleClick={handleMainGroupClick('/courses/1/timetable')}
+      isGroupActive={$page.path === '/courses/1/timetable'}
+      hideSortIcon />
+    <Expandable
+      label="Scoreboard"
+      handleClick={handleMainGroupClick('/courses/1/score')}
+      isGroupActive={$page.path === '/courses/1/score'}
+      hideSortIcon />
+    <Expandable
+      label="Home tasks"
+      handleClick={handleMainGroupClick('/courses/1/hometasks')}
+      isGroupActive={$page.path === '/courses/1/hometasks'}
+      hideSortIcon />
+  </div>
+</div>

src/components/Course/components/HomeTask.svelte

@@ -2,12 +2,7 @@
   import PageNav from "../../PageNav/index.svelte";
 </script>
 
-<div class="root">
-  <PageNav title="Home tasks" />
-</div>
-
 <style>
-  .root {
-    width: 100%;
-  }
 </style>
+
+<PageNav title="Home tasks" />

src/components/Course/components/Lecture/Readme.svelte

@@ -12,9 +12,8 @@
   title="Lecture"
   src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
   frameborder="0"
-  width="960"
+  width="100%"
   height="569"
   allowfullscreen="true"
   mozallowfullscreen="true"
-  webkitallowfullscreen="true"
+  webkitallowfullscreen="true" />
-/>

src/components/Course/components/Lecture/index.svelte

@@ -44,8 +44,6 @@
 
 <style>
   .course {
-    max-width: 600px;
-    margin: 0 auto;
     padding: 0 40px;
   }
 </style>

src/components/Course/components/People.svelte

@@ -1,13 +1,74 @@
 <script>
+  import { stores } from "@sapper/app";
   import PageNav from "../../PageNav/index.svelte";
+  import UserCard from "../../UserCard/index.svelte";
+
+  const { page } = stores();
+
+  const teachers = [
+    {
+      name: "Alexander Pokidin",
+      title: "Senior Software Engineer",
+      avatar:
+        "https://media-exp1.licdn.com/dms/image/C5603AQFWia2m2J0syA/profile-displayphoto-shrink_100_100/0/1517423655318?e=1625702400&v=beta&t=SVGGkisvjOVcbz6Ejtb8pEDzRnqqFxMAMXGZgW-WE70",
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Andrey Filatov",
+      title: "Fullstack Software Engineer",
+      avatar:
+        "https://media-exp1.licdn.com/dms/image/C5103AQHuKuAX7RdoRw/profile-displayphoto-shrink_100_100/0/1517226025504?e=1625702400&v=beta&t=dReL72K1hYLVXBw_-v5LTDfjHLeDqfRC6IzBYOdqjqc",
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Sergey Semko",
+      title: "Senior Software Engineer",
+      avatar:
+        "https://media-exp1.licdn.com/dms/image/C5603AQFUEHk5pxnIyA/profile-displayphoto-shrink_100_100/0/1558013476527?e=1625702400&v=beta&t=Y3uBohyYlRvVf_U-1o4elfRGdcTFkKQMH9NqbD5lHlc",
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+    {
+      name: "Natalia Fedii",
+      title: "Project Manager",
+      avatar:
+        "https://media-exp1.licdn.com/dms/image/C5603AQEi-IuSUG6kTQ/profile-displayphoto-shrink_100_100/0/1517884922407?e=1625702400&v=beta&t=rbj0wEM20msiDSQnTdwr68E4uv9N6xJTvObl3hLuRLc",
+      telegramLink: "https://t.me/seed_of_abraham",
+      mailLink: "mailto:irb.ossystem@gmail.com",
+    },
+  ];
+  const students = [...teachers, ...teachers, ...teachers];
 </script>
 
-<div class="root">
+<PageNav title="People" disableSticky={true} />
-  <PageNav title="People" />
+<div class="m-3">
+  <h3>
+    <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
+  </h3>
+  <div class="flex flex-wrap">
+    {#each teachers as teacher}
+      <UserCard
+        name={teacher.name}
+        avatarUrl={teacher.avatar}
+        title={teacher.title}
+        telegramLink={teacher.telegramLink}
+        mailLink={teacher.mailLink} />
+    {/each}
+  </div>
 </div>
 
-<style>
+<div class="m-3">
-  .root {
+  <h3>
-    width: 100%;
+    <a id="students" name="students" href="{$page.path}#students">Students</a>
-  }
+  </h3>
-</style>
+  <div class="flex flex-wrap">
+    {#each students as student}
+      <UserCard
+        name={student.name}
+        avatarUrl={student.avatar}
+        title={student.title} />
+    {/each}
+  </div>
+</div>

src/components/Course/components/Scoreboard.svelte

@@ -2,12 +2,7 @@
   import PageNav from "../../PageNav/index.svelte";
 </script>
 
-<div class="root">
-  <PageNav title="Scoreboard" />
-</div>
-
 <style>
-  .root {
-    width: 100%;
-  }
 </style>
+
+<PageNav title="Scoreboard" />

src/components/Course/components/TimeTable.svelte

@@ -2,12 +2,7 @@
   import PageNav from "../../PageNav/index.svelte";
 </script>
 
-<div class="root">
-  <PageNav title="Time table" />
-</div>
-
 <style>
-  .root {
-    width: 100%;
-  }
 </style>
+
+<PageNav title="Time table" />

src/components/Course/index.svelte

@@ -15,24 +15,15 @@
 `;
 </script>
 
-<div class="root">
-  <PageNav title="Overview" />
-
-  <div class="body">
-    {@html marked(readme, {
-      breaks: true,
-      gfm: true,
-    })}
-  </div>
-</div>
-
 <style>
-  .root {
-    width: 100%;
-  }
-
   .body {
-    max-width: 600px;
+    max-width: 1000px;
     margin: 10px;
   }
 </style>
+
+<PageNav title="Overview" disableSticky={true} />
+
+<div class="body">
+  {@html marked(readme, { breaks: true, gfm: true })}
+</div>

src/components/IconButton/index.svelte

@@ -0,0 +1,6 @@
+<style>
+</style>
+
+<button class="hover:grey-500">
+  <slot />
+</button>

src/components/LeftNav/index.svelte

@@ -10,81 +10,16 @@
   $: navClass = ["discussion"].includes(segment) ? "hide" : "";
 </script>
 
-<nav class={navClass}>
-  <ul class="flex items-center flex-col justify-evenly">
-    <div class="logo">
-      <a href="/" title="Go to univapros Home" id="logo" data-hveid="8"
-        ><img
-          src="/logo-192.png"
-          alt="Univapros logo"
-          height="48"
-          width="48"
-          data-atf="1"
-        /></a
-      >
-    </div>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === "courses" ? "page" : undefined}
-        href="courses"><Catalog32 class="carbon-icon" /> <span>Courses</span></a
-      >
-    </li>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === undefined || segment === "discussion"
-          ? "page"
-          : undefined}
-        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
-      >
-    </li>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === "profile" ? "page" : undefined}
-        href="profile"
-        ><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
-      >
-    </li>
-    <li>
-      <a
-        class="flex items-center"
-        href="https://t.me/unidiscuss"
-        target="_blank"
-      >
-        <!-- <img
-          alt="File:Telegram logo.svg"
-          class="mr-1"
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
-          decoding="async"
-          width="25"
-          height="25"
-          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
-          data-file-width="25"
-          data-file-height="25"
-        /> -->
-        <!-- <span><SendAlt32 class="carbon-icon" /> Канал</span> -->
-        <SendAlt32 class="carbon-icon" /> <span>Канал</span>
-      </a>
-    </li>
-    <!-- <li class="new-question">
-      <NewQuestion />
-    </li> -->
-  </ul>
-</nav>
-
 <style>
   nav {
     height: 95vh;
     display: flex;
     flex-direction: column;
-    width: fit-content;
+    width: 100px;
     padding-top: 10px;
     position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
-    overflow: auto;
   }
 
   ul {
@@ -136,3 +71,60 @@
     }
   }
 </style>
+
+<nav class={navClass}>
+  <ul class="flex items-center flex-col justify-evenly">
+    <div class="logo">
+      <a href="/" title="Go to univapros Home" id="logo" data-hveid="8"><img
+          src="/logo-192.png"
+          alt="Univapros logo"
+          height="48"
+          width="48"
+          data-atf="1" /></a>
+    </div>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === undefined || segment === 'discussion' ? 'page' : undefined}
+        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a>
+    </li>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === 'courses' ? 'page' : undefined}
+        href="courses"><Catalog32 class="carbon-icon" />
+        <span>Courses</span></a>
+    </li>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === 'profile' ? 'page' : undefined}
+        href="profile"><UserAvatar32 class="carbon-icon" />
+        <span>Профиль</span></a>
+    </li>
+    <li>
+      <a
+        class="flex items-center"
+        href="https://t.me/unidiscuss"
+        target="_blank">
+        <!-- <img
+          alt="File:Telegram logo.svg"
+          class="mr-1"
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
+          decoding="async"
+          width="25"
+          height="25"
+          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
+          data-file-width="25"
+          data-file-height="25"
+        /> -->
+        <!-- <span><SendAlt32 class="carbon-icon" /> Канал</span> -->
+        <SendAlt32 class="carbon-icon" />
+        <span>Канал</span>
+      </a>
+    </li>
+    <!-- <li class="new-question">
+      <NewQuestion />
+    </li> -->
+  </ul>
+</nav>

src/components/PageNav/index.svelte

@@ -4,13 +4,14 @@
   export let navItems = [];
   export let addButtonHref;
   export let addButtonLabel;
+  export let disableSticky = false;
   let dynamicRootClass = "";
 
   $: dynamicRootClass =
     Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
-<div class="header flex items-center justify-between mb-2 {dynamicRootClass}">
+<div class="header flex items-center justify-between mb-2 {!disableSticky && 'sticky'} {dynamicRootClass}">
   {#if !!title}
     <h4 class="title">{title}</h4>
   {/if}
@@ -33,9 +34,12 @@
     border-bottom: 1px solid var(--border-color);
     padding: 15px;
     min-height: 61px;
+    background-color: #fff;
+  }
+
+  .header.sticky {
     position: sticky;
     top: 0;
-    background-color: #fff;
   }
 
   .title {

src/components/Tailwindcss.svelte

@@ -13,4 +13,8 @@
     font-weight: revert;
     margin: 0.8em 0;
   }
+
+  code {
+    white-space: pre-wrap;
+  }
 </style>

src/components/UserCard/index.svelte

@@ -1,28 +1,59 @@
 <script>
+  import Icon from "svelte-awesome/components/Icon.svelte";
+  import { faTelegram } from "@fortawesome/free-brands-svg-icons";
+  import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+
+  export let avatarUrl =
+    "https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg";
+  export let name = "Sarah Dayan";
+  export let title = "Staff Engineer, Algolia";
+  export let mailLink;
+  export let telegramLink;
 </script>
 
-<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
+<style>
+  .profile {
+    width: 200px;
+  }
+
+  .profile img {
+    width: 104px;
+    height: 104px;
+  }
+  .description {
+    min-height: 70px;
+  }
+</style>
+
+<figure class="profile bg-gray-100 rounded-xl px-4 py-7 mr-4 mb-4">
   <img
-    class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
+    class="w-32 h-32 rounded-full mx-auto"
-    src="https://tailwindcss.com/sarah-dayan.jpg"
+    src={avatarUrl}
     alt=""
     width="384"
-    height="512"
+    height="512" />
-  />
+  <div class="pt-6 text-center space-y-4">
-  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
+    <div class="description font-medium flex flex-col justify-around">
-    <blockquote>
+      <div class="text-cyan-600">{name}</div>
-      <p class="text-lg font-semibold">
+      <div class="text-gray-500">{title}</div>
-        “Tailwind CSS is the only framework that I've seen scale on large teams.
+    </div>
-        It’s easy to customize, adapts to any design, and the build size is
-        tiny.”
-      </p>
-    </blockquote>
-    <figcaption class="font-medium">
-      <div class="text-cyan-600">Sarah Dayan</div>
-      <div class="text-gray-500">Staff Engineer, Algolia</div>
-    </figcaption>
   </div>
+  {#if telegramLink && mailLink}
+    <div class="flex justify-center">
+      <a href={telegramLink} target="_blank">
+        <Icon
+          data={faTelegram}
+          scale="1"
+          class="social-icon"
+          style="color:#4dabf7;margin:0 5px;" />
+      </a>
+      <a href={mailLink} target="_blank">
+        <Icon
+          data={faEnvelope}
+          scale="1"
+          class="social-icon"
+          style="color:#d44c3d;margin:0 5px;" />
+      </a>
+    </div>
+  {/if}
 </figure>
-
-<style>
-</style>

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

@@ -19,9 +19,6 @@
   export let slug;
   export let courseNavItem;
   export let lectureId;
-  console.log("slug", slug);
-  console.log("courseNavItem", courseNavItem);
-  console.log("lectureId", lectureId);
 
   const { page } = stores();
   let tab = "";
@@ -29,31 +26,37 @@
   $: tab = $page.query.tab || "lectures";
 </script>
 
+<style>
+  .root {
+    display: flex;
+    border-right: 1px solid var(--border-color);
+    width: 100%;
+  }
+
+  .rightBar {
+    width: 80%;
+  }
+</style>
+
 <svelte:head>
   <title>ReactJS</title>
 </svelte:head>
 
 <div class="root">
   <CourseNav />
-  {#if !courseNavItem}
+  <div class="rightBar">
-    <Overview />
+    {#if !courseNavItem}
-  {:else if courseNavItem === "score"}
+      <Overview />
-    <Scoreboard />
+    {:else if courseNavItem === 'score'}
-  {:else if courseNavItem === "timetable"}
+      <Scoreboard />
-    <TimeTable />
+    {:else if courseNavItem === 'timetable'}
-  {:else if courseNavItem === "hometasks"}
+      <TimeTable />
-    <HomeTask />
+    {:else if courseNavItem === 'hometasks'}
-  {:else if courseNavItem === "lecture"}
+      <HomeTask />
-    <Lecture path={$page.path} {tab} />
+    {:else if courseNavItem === 'lecture'}
-  {:else if courseNavItem === "people"}
+      <Lecture path={$page.path} {tab} />
-    <People />
+    {:else if courseNavItem === 'people'}
-  {/if}
+      <People />
+    {/if}
+  </div>
 </div>
-
-<style>
-  .root {
-    flex-grow: 1;
-    display: flex;
-    border-right: 1px solid var(--border-color);
-  }
-</style>