From 7445f4caac4deb355dec46aa2d15cac82d5806ff Mon Sep 17 00:00:00 2001
From: Charlon Palacay <charlon@gmail.com>
Date: Thu, 5 Sep 2024 13:29:36 -0700
Subject: [PATCH] Moves system messages to sidebar.

---
 course_grader_vue/layouts/default.vue | 39 ++++++++++++++++-----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/course_grader_vue/layouts/default.vue b/course_grader_vue/layouts/default.vue
index c8604cf..dc2d6a4 100644
--- a/course_grader_vue/layouts/default.vue
+++ b/course_grader_vue/layouts/default.vue
@@ -36,28 +36,35 @@
       </SProfile>
     </template>
     <template #aside>
-      <div class="border border-danger">aside slot area</div>
-    </template>
-    <template #bar>
-      <BAlert
-        v-for="message in messages"
-        :variant="messageLevel"
-        :model-value="true"
-        class="small"
-      >
-        <i class="bi-exclamation-octagon-fill me-1"></i>
-        <span v-html="message"></span>
-      </BAlert>
+      <div class="my-3">
+        <div class="bg-black bg-opacity-10 rounded-3 p-3 small">
+          <div class="mb-2 text-danger">
+            <i class="bi bi-exclamation-triangle-fill me-2"></i>System Messages
+          </div>
+          <ul class="list-unstyled m-0 text-danger">
+            <li
+              v-for="(msg, index) in messages"
+              :key="index"
+              v-html="msg"
+              class="mt-2"
+            ></li>
+          </ul>
+        </div>
+      </div>
     </template>
     <template #main>
-      <div v-if="termUrl">
-        <BLink :href="termUrl" title="Back to current quarter">Back To Current Term </BLink>
-      </div>
-      <div class="row justify-content-center">
+      <div class="row justify-content-center my-3">
         <div class="col">
           <slot name="title">
             <h1 class="visually-hidden">{{ pageTitle }}</h1>
           </slot>
+
+          <div v-if="termUrl">
+            <BLink :href="termUrl" title="Back to current quarter"
+              >Back To Current Term
+            </BLink>
+          </div>
+
           <slot name="content"></slot>
         </div>
       </div>