Reusable page style for lectures

2021-07-01 09:31:26 +03:00
parent e14c84a1bf
commit b76d1c9647
12 changed files with 290 additions and 203 deletions
@@ -1,68 +1,66 @@
 <script context="module">
-    export async function preload({ params }) {
-      let [slug, courseNavItem, lectureId] = params.id;
-  
-      return { slug, courseNavItem, lectureId };
-    }
-  </script>
-  
-  <script>
-    import { stores } from "@sapper/app";
-    import Lecture from "../../../components/Course/components/Lecture/index.svelte";
-    import HomeTask from "../../../components/Course/components/HomeTask.svelte";
-    import Overview from "../../../components/Course/index.svelte";
-    import People from "../../../components/Course/components/People.svelte";
-    import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
-    import TimeTable from "../../../components/Course/components/TimeTable.svelte";
-    import CourseNav from "../../../components/Course/components/CourseNav.svelte";
-    import Apps from "../../../components/Apps/index.svelte";
-  
-    // export let slug;
-    export let courseNavItem;
-    // export let lectureId;
-  
-    const { page } = stores();
-    let tab = "";
-    let mode = "";
-  
-    $: tab = $page.query.tab || "lectures";
-    $: mode = $page.query.mode;
-  </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 />
-    <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} {mode} />
-      {:else if courseNavItem === 'people'}
-        <People />
-      {/if}
-    </div>
-  
-    <Apps />
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lectureId] = params.id;
+
+    return { courseId, courseNavItem, lectureId };
+  }
+</script>
+
+<script>
+  import { stores } from "@sapper/app";
+  import Lecture from "../../../components/Course/components/Lecture/index.svelte";
+  import HomeTask from "../../../components/Course/components/HomeTask.svelte";
+  import Overview from "../../../components/Course/index.svelte";
+  import People from "../../../components/Course/components/People.svelte";
+  import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
+  import TimeTable from "../../../components/Course/components/TimeTable.svelte";
+  import CourseNav from "../../../components/Course/components/CourseNav.svelte";
+  import Apps from "../../../components/Apps/index.svelte";
+
+  export let courseId;
+  export let courseNavItem;
+  export let lectureId;
+
+  const { page } = stores();
+  let tab = "";
+  let mode = "";
+
+  $: tab = $page.query.tab || "lectures";
+</script>
+
+<svelte:head>
+  <title>ReactJS</title>
+</svelte:head>
+
+<div class="root">
+  <CourseNav {courseId} />
+  <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} showLectureHome={!lectureId} />
+    {:else if courseNavItem === "people"}
+      <People />
+    {/if}
  </div>
-  
+
+  <Apps />
+</div>
+
+<style>
+  .root {
+    display: flex;
+    border-right: 1px solid var(--border-color);
+    width: 100%;
+  }
+
+  .rightBar {
+    width: 80%;
+  }
+</style>