Course profile, course fluid layout, fluid iframe

2021-05-08 22:03:44 +03:00
parent 026be1911f
commit 618644b663
17 changed files with 317 additions and 212 deletions
@@ -0,0 +1,2 @@
+{
+}
@@ -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",
@@ -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"
@@ -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>
@@ -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" />
@@ -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" />
@@ -44,8 +44,6 @@

 <style>
  .course {
-    max-width: 600px;
-    margin: 0 auto;
    padding: 0 40px;
  }
 </style>
@@ -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:[email protected]",
+    },
+    {
+      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:[email protected]",
+    },
+    {
+      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:[email protected]",
+    },
+    {
+      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:[email protected]",
+    },
+  ];
+  const students = [...teachers, ...teachers, ...teachers];
 </script>

-<div class="root">
-  <PageNav title="People" />
+<PageNav title="People" disableSticky={true} />
+<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>
-  .root {
-    width: 100%;
-  }
-</style>
+<div class="m-3">
+  <h3>
+    <a id="students" name="students" href="{$page.path}#students">Students</a>
+  </h3>
+  <div class="flex flex-wrap">
+    {#each students as student}
+      <UserCard
+        name={student.name}
+        avatarUrl={student.avatar}
+        title={student.title} />
+    {/each}
+  </div>
+</div>
@@ -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" />
@@ -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" />
@@ -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>
@@ -0,0 +1,6 @@
+<style>
+</style>
+
+<button class="hover:grey-500">
+  <slot />
+</button>
@@ -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>
@@ -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 {
@@ -13,4 +13,8 @@
    font-weight: revert;
    margin: 0.8em 0;
  }
+
+  code {
+    white-space: pre-wrap;
+  }
 </style>
@@ -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"
-    src="https://tailwindcss.com/sarah-dayan.jpg"
+    class="w-32 h-32 rounded-full mx-auto"
+    src={avatarUrl}
    alt=""
    width="384"
-    height="512"
-  />
-  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
-    <blockquote>
-      <p class="text-lg font-semibold">
-        “Tailwind CSS is the only framework that I've seen scale on large teams.
-        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>
+    height="512" />
+  <div class="pt-6 text-center space-y-4">
+    <div class="description font-medium flex flex-col justify-around">
+      <div class="text-cyan-600">{name}</div>
+      <div class="text-gray-500">{title}</div>
+    </div>
  </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>
@@ -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}
-    <Overview />
-  {:else if courseNavItem === "score"}
-    <Scoreboard />
-  {:else if courseNavItem === "timetable"}
-    <TimeTable />
-  {:else if courseNavItem === "hometasks"}
-    <HomeTask />
-  {:else if courseNavItem === "lecture"}
-    <Lecture path={$page.path} {tab} />
-  {:else if courseNavItem === "people"}
-    <People />
-  {/if}
+  <div class="rightBar">
+    {#if !courseNavItem}
+      <Overview />
+    {:else if courseNavItem === 'score'}
+      <Scoreboard />
+    {:else if courseNavItem === 'timetable'}
+      <TimeTable />
+    {:else if courseNavItem === 'hometasks'}
+      <HomeTask />
+    {:else if courseNavItem === 'lecture'}
+      <Lecture path={$page.path} {tab} />
+    {:else if courseNavItem === 'people'}
+      <People />
+    {/if}
+  </div>
 </div>
-
-<style>
-  .root {
-    flex-grow: 1;
-    display: flex;
-    border-right: 1px solid var(--border-color);
-  }
-</style>