From 2a3109577c99182bc476c8868c366ec95b5338bf Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Sun, 12 Apr 2020 15:17:40 -0400
Subject: [PATCH] [S] Dynamically update height

---
 .../course-selection/course-selection.vue     | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/pages/course-selection/course-selection.vue b/src/pages/course-selection/course-selection.vue
index 9728d85..1400cb9 100644
--- a/src/pages/course-selection/course-selection.vue
+++ b/src/pages/course-selection/course-selection.vue
@@ -21,7 +21,7 @@
 
             <!-- Course list card -->
             <el-col :span="8" class="overall-span">
-                <el-card id="course-list" class="right" style="height: 70vh" body-style="padding: 0">
+                <el-card id="course-list" class="right" ref="cl" body-style="padding: 0">
                     <div class="header padding-fix">
                         <div class="text">Course List</div>
 
@@ -30,7 +30,7 @@
                     </div>
 
                     <!-- Actual course list -->
-                    <div class="list padding-fix">
+                    <div class="list padding-fix" :style="{height: courseListHeight + 'px'}">
                         <!-- Every course -->
                         <div v-for="(course, index) in uniqueCourses" class="item vertical-center">
                             <span class="name">{{course.name}}</span>
@@ -58,11 +58,16 @@
         directory: any[] = []
         loading = true
 
+        courseListHeight: number = 0;
+
         /**
          * Called before rendering
          */
         created()
         {
+            // Update width dynamically
+            window.addEventListener("resize", this.updateHeight);
+
             // Get courses
             App.http.post('/course-info', {}).then(result =>
             {
@@ -80,6 +85,34 @@
             })
         }
 
+        /**
+         * Called on destroy
+         */
+        destroyed()
+        {
+            // Remove width updater
+            window.removeEventListener("resize", this.updateHeight);
+        }
+
+        /**
+         * Called on vue update
+         */
+        updated()
+        {
+            this.updateHeight()
+        }
+
+        /**
+         * Update header width. (CSS doesn't work)
+         * https://stackoverflow.com/questions/17011195/positionfixed-and-widthinherit-with-percentage-parent
+         */
+        updateHeight()
+        {
+            if ((<any> this.$refs.cl) == null) return;
+            this.courseListHeight = (<Vue> this.$refs.cl).$el.clientHeight - 15 - 102;
+        }
+
+
         get filteredCourses()
         {
             let year = GPAUtils.getSchoolYear();
@@ -141,7 +174,7 @@
     #course-list
     {
         margin-right: 20px;
-
+        height: 70vh;
 
         .padding-fix
         {