From ae6172068e4ce6e7231fa1bacad3a4d1db36c867 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Mon, 14 Oct 2019 21:35:55 -0400
Subject: [PATCH] [+] Make course-page almost the same with overall-course

---
 src/pages/course/course-page.scss | 33 +++++++++++++++++++++----------
 src/pages/course/course-page.ts   | 16 +++++++++++++++
 src/pages/course/course-page.vue  | 17 ++++++----------
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/pages/course/course-page.scss b/src/pages/course/course-page.scss
index a4cd3c8..f401b9c 100644
--- a/src/pages/course/course-page.scss
+++ b/src/pages/course/course-page.scss
@@ -1,15 +1,28 @@
-
-#course-page
+// Card
+.el-card.course-card
 {
-    margin: 0 20px;
+    // Margins
+    margin-right: 20px;
+    margin-left: 20px;
+
+    // Height limit
+    max-height: 250px;
+
+    // Limit name length
+    white-space: nowrap;
+
+    // Expansion color
+    background: #f4f6f9;
 }
 
-#course-description
+// Remove card padding for styling issues
+div.el-card.course-card > div.el-card__body
 {
-    text-align: left;
-
-    .name
-    {
-        font-size: 36px;
-    }
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+}
+
+.el-card__body
+{
+    margin: auto 0;
 }
diff --git a/src/pages/course/course-page.ts b/src/pages/course/course-page.ts
index 3a03511..8272679 100644
--- a/src/pages/course/course-page.ts
+++ b/src/pages/course/course-page.ts
@@ -9,4 +9,20 @@ export default class CoursePage extends Vue
 {
     // @ts-ignore
     @Prop({required: true}) course: Course;
+
+    private unread: number = -1;
+    private unreadAssignments: Assignment[] = [];
+
+    /**
+     * Count the number of unread assignments with cache
+     */
+    countUnread(): number
+    {
+        if (this.unread == -1)
+        {
+            this.unreadAssignments = this.course.assignments.filter(a => a.unread);
+            return this.unread = this.unreadAssignments.length;
+        }
+        else return this.unread;
+    }
 }
diff --git a/src/pages/course/course-page.vue b/src/pages/course/course-page.vue
index edcbd9c..d503266 100644
--- a/src/pages/course/course-page.vue
+++ b/src/pages/course/course-page.vue
@@ -1,15 +1,10 @@
 <template>
-    <el-card id="course-page" class="">
-        <el-row>
-            <el-col :span="8" id="course-description">
-                <div class="name">{{course.name}}</div>
-                <div class="teacher">{{course.teacherName}}</div>
-                <div class="level">{{course.level}}</div>
-                <div class="id">{{course.id}}</div>
-            </el-col>
-            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
-            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
-        </el-row>
+    <el-card id="course-card" class="course-card">
+        <course-head :course="course" :unread="countUnread()"></course-head>
+
+        <div class="course-card-content expand notification">
+
+        </div>
     </el-card>
 </template>