[+] Make course-page almost the same with overall-course

src/pages/course/course-page.scss

@@ -1,15 +1,28 @@
-
+// Card
-#course-page
+.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;
+    padding-right: 0 !important;
-
+    padding-left: 0 !important;
-    .name
+}
-    {
+
-        font-size: 36px;
+.el-card__body
-    }
+{
+    margin: auto 0;
 }

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;
+    }
 }

src/pages/course/course-page.vue

@@ -1,15 +1,10 @@
 <template>
-    <el-card id="course-page" class="">
+    <el-card id="course-card" class="course-card">
-        <el-row>
+        <course-head :course="course" :unread="countUnread()"></course-head>
-            <el-col :span="8" id="course-description">
+
-                <div class="name">{{course.name}}</div>
+        <div class="course-card-content expand notification">
-                <div class="teacher">{{course.teacherName}}</div>
+
-                <div class="level">{{course.level}}</div>
+        </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>
 </template>