From a46e011c907c2ca10d9013efd9d2f16b6162867f Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Fri, 27 Sep 2019 16:47:22 -0400
Subject: [PATCH] [O] Use css to produce new-line effect instead of <br>

---
 src/pages/overall/overall.scss | 11 ++++++++---
 src/pages/overall/overall.vue  | 14 ++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/pages/overall/overall.scss b/src/pages/overall/overall.scss
index 05df0af..2465bb6 100644
--- a/src/pages/overall/overall.scss
+++ b/src/pages/overall/overall.scss
@@ -12,18 +12,23 @@
     flex-direction: column;
 }
 
-.span-gpa-header
+.gpa
+{
+    display: block;
+}
+
+.gpa.header
 {
     font-size: 14px;
 }
 
-.span-gpa
+.gpa.text
 {
     font-size: 35px;
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
 
-.gpa-time
+.gpa.time
 {
     font-size: 14px;
 }
diff --git a/src/pages/overall/overall.vue b/src/pages/overall/overall.vue
index 93c5de4..125845b 100644
--- a/src/pages/overall/overall.vue
+++ b/src/pages/overall/overall.vue
@@ -4,14 +4,12 @@
             <el-col :span="4">
                 <el-card style="margin-left: 20px">
                     <div style="padding: 14px;">
-                        <span class="span-gpa-header">GPA:</span>
-                        <br>
-                        <span class="span-gpa">{{getGPA().gpa}}</span>
-                        <span class="span-gpa">(Out of {{getGPA().max}})</span>
-                        <div class="bottom clearfix gpa-time">
-                            <time class="time">{{ new Date().toDateString() }}</time>
-                            <br>
-                            <el-button type="text" class="button">Button</el-button>
+                        <span class="gpa header">GPA:</span>
+                        <span class="gpa text">{{getGPA().gpa}}</span>
+                        <span class="gpa max">(Out of {{getGPA().max}})</span>
+                        <div class="bottom clearfix gpa time">
+                            <time>{{ new Date().toDateString() }}</time>
+                            <el-button type="text" class="gpa button">Button</el-button>
                         </div>
                     </div>
                 </el-card>