From 7d0d0938c5cace92347d21ec568575e8ddca0ab6 Mon Sep 17 00:00:00 2001
From: Charlon Palacay <charlon@gmail.com>
Date: Mon, 14 Oct 2024 16:32:33 -0700
Subject: [PATCH 1/2] Updates disclosure chevron. Fixes sidebar nav.

---
 .stylelintignore                              |  2 -
 .stylelintrc                                  |  1 +
 .../components/_common/quarter-week.vue       |  8 +-
 .../components/checkin-table-loading.vue      |  2 +-
 compass_vue/components/nav-menu.vue           | 92 ++++++-------------
 .../components/student/profile-loading.vue    | 60 ++++++------
 .../components/student/profile-mini.vue       |  2 +
 compass_vue/components/student/schedule.vue   | 22 ++---
 compass_vue/layout.vue                        | 51 ++++++++--
 compass_vue/pages/affiliations.vue            |  6 +-
 10 files changed, 123 insertions(+), 123 deletions(-)
 delete mode 100644 .stylelintignore

diff --git a/.stylelintignore b/.stylelintignore
deleted file mode 100644
index eeec074f..00000000
--- a/.stylelintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-# Ignore bundles for stylelinting
-bundles/
\ No newline at end of file
diff --git a/.stylelintrc b/.stylelintrc
index ffaf3ed8..58bbd493 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -5,6 +5,7 @@
     "stylelint-config-prettier"
   ],
   "rules": {
+    "custom-property-empty-line-before": "never",
     "scss/no-global-function-names": null,
     "no-invalid-position-at-import-rule": null,
     "scss/at-import-partial-extension": [
diff --git a/compass_vue/components/_common/quarter-week.vue b/compass_vue/components/_common/quarter-week.vue
index 51198fb9..c8675f81 100644
--- a/compass_vue/components/_common/quarter-week.vue
+++ b/compass_vue/components/_common/quarter-week.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="termData.currYear" class="bg-dark-purple rounded-3 text-light mb-1 p-3">
-    <div class="small">
+  <div v-if="termData.currYear" class="bg-white bg-opacity-10 rounded-3 mb-5 p-3">
+    <div class="small text-white mb-1"  style="--bs-text-opacity: 0.5">
       <i class="bi bi-calendar-week me-2"></i>
       <span v-if="termData.isBreak">
         <span v-if="termData.breakYear !== termData.currYear">
@@ -14,7 +14,7 @@
       </span>
     </div>
 
-    <div class="fw-bold">
+    <div class="fw-bold text-white">
       <span v-if="termData.isFinals">Finals Week</span>
       <span v-else-if="termData.isBreak" class="text-capitalize">
         {{ termData.breakQuarter }}
@@ -25,7 +25,7 @@
         {{ getWeeksApart(termData.firstDay, termData.lastDay) }}
       </span>
     </div>
-    <div class="small mt-3">
+    <div class="small mt-3 text-white"  style="--bs-text-opacity: 0.5">
       {{ formatDate(termData.todayDate, "dddd, LL") }}
     </div>
   </div>
diff --git a/compass_vue/components/checkin-table-loading.vue b/compass_vue/components/checkin-table-loading.vue
index 17926a87..47d56657 100644
--- a/compass_vue/components/checkin-table-loading.vue
+++ b/compass_vue/components/checkin-table-loading.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="table-responsive m-n3">
     <table class="table mb-0">
-      <thead class="text-muted small">
+      <thead class="small">
         <tr>
           <th class="ps-3 bg-body-tertiary" style="width: 33%" scope="col">Student</th>
           <th class="bg-body-tertiary" scope="col" style="width: 15%">Check-in Date</th>
diff --git a/compass_vue/components/nav-menu.vue b/compass_vue/components/nav-menu.vue
index 7a78bd52..cb201e72 100644
--- a/compass_vue/components/nav-menu.vue
+++ b/compass_vue/components/nav-menu.vue
@@ -1,81 +1,47 @@
 <template>
   <div class="text-light">
-    <ul class="nav flex-column mb-5">
-      <li class="nav-item mb-1">
-        <router-link
-          :to="'/'"
-          class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
-          :class="
-            $route.path.includes('/checkins') ? 'bg-dark-purple rounded-3' : ''
-          "
-          ><i class="bi bi-calendar-check me-2"></i>Check-Ins</router-link
+    <ul class="nav flex-column mb-4">
+      <li class="nav-item mb-1 position-relative">
+        <BLink
+          :to="'/checkins'"
+          class="d-flex justify-content-between nav-link rounded-3 text-light bg-white-hover bg-opacity-10-hover"
+          exact-active-class="bg-white bg-opacity-10"
         >
+          <span
+            ><i
+              class="bi bi-calendar-check me-3 text-white"
+              style="--bs-text-opacity: 0.5"
+            ></i
+            >Check-Ins</span
+          >
+        </BLink>
       </li>
       <li class="nav-item mb-1">
-        <router-link
+        <BLink
           :to="'/caseload'"
-          class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
-          :class="
-            $route.path.includes('/caseload') ? 'bg-dark-purple rounded-3' : ''
-          "
-          ><i class="bi bi-people-fill me-2"></i>Caseload</router-link
+          class="d-flex justify-content-between nav-link rounded-3 text-light bg-white-hover bg-opacity-10-hover"
+          exact-active-class="bg-white bg-opacity-10"
+        >
+          <span><i class="bi bi-people-fill me-3 text-white" style="--bs-text-opacity: 0.5"></i>Caseload</span></BLink
         >
       </li>
 
-      <li v-show="userRoles.includes(Role.Manager)" aria-hidden="true" class="nav-item mt-1 mb-2">
-        <a
-          href="#"
-          class="nav-link disabled text-gray d-block p-0 internal-link"
-          >
-          <span class="fs-8 text-secondary text-uppercase">Enrollment Services</span>
-          <hr class="m-0 bg-gray" /></a
+      <li v-show="userRoles.includes(Role.Manager)" class="nav-item mb-1">
+        <BLink
+          :to="'/affiliations'"
+          class="d-flex justify-content-between nav-link rounded-3 text-light bg-white-hover bg-opacity-10-hover"
+          exact-active-class="bg-white bg-opacity-10"
+          ><span><i class="bi bi-cart4 me-3 text-white" style="--bs-text-opacity: 0.5"></i>Batch Affiliations</span></BLink
         >
       </li>
-
-      <li v-show="false" class="nav-item mb-1">
-        <router-link
+      <li v-if="false" aria-hidden="true" class="nav-item mt-1 mb-2">
+        <BLink
           :to="'/reports'"
           class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
           :class="
             $route.path.includes('/reports') ? 'bg-dark-purple rounded-3' : ''
           "
-          ><i class="bi bi-bar-chart-line-fill me-2"></i>Reports</router-link
-        >
-      </li>
-      <li v-show="userRoles.includes(Role.Manager)" class="nav-item mb-1">
-        <router-link
-          :to="'/affiliations'"
-          class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
-          :class="
-            $route.path.includes('/affiliations') ? 'bg-dark-purple rounded-3' : ''
-          "
-          ><i class="bi bi-cart4 me-2"></i>Batch Affiliations</router-link
-        >
-      </li>
-
-
-      <li aria-hidden="true" class="nav-item mt-1 mb-2">
-        <a
-          href="#"
-          class="nav-link disabled text-gray d-block p-0 internal-link"
-          >
-          <span class="fs-8 text-secondary text-uppercase">Advising Resources</span>
-          <hr class="m-0 bg-gray" /></a
-        >
-      </li>
-
-      <li class="nav-item mb-1">
-        <a
-          href="https://sdb.admin.uw.edu/sisAdvising/securid/overview.aspx"
-          class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
-          ><i class="bi bi-ear me-2"></i>Academic Records (EARS)</a
-        >
-      </li>
-      <li class="nav-item mb-2">
-        <a
-          href="https://retention.uw.edu"
-          class="nav-link text-gray d-block px-3 py-2 bg-dark-purple-hover rounded-3"
-          ><i class="bi bi-bar-chart-fill me-2"></i>Retention Analytics (RAD)</a
+          ><i class="bi bi-bar-chart-line-fill me-2"></i>Reports</BLink
         >
       </li>
     </ul>
@@ -84,6 +50,7 @@
 
 <script>
 import { Role } from "@/utils/roles";
+import { BLink } from "bootstrap-vue-next";
 
 export default {
   props: {
@@ -92,6 +59,7 @@ export default {
       required: true,
     },
   },
+  components: { BLink },
   data() {
     return {
       Role: Role,
diff --git a/compass_vue/components/student/profile-loading.vue b/compass_vue/components/student/profile-loading.vue
index 1d2daef5..99c02ecd 100644
--- a/compass_vue/components/student/profile-loading.vue
+++ b/compass_vue/components/student/profile-loading.vue
@@ -1,59 +1,59 @@
 <template>
-  <div class="bg-light rounded-3 border-0 px-0 py-4 m-0">
+  <div class="bg-body-tertiary rounded-3 border-0 px-0 py-4 m-0">
     <div class="row">
       <div class="col-xl-3 my-auto">
         <div class="text-center px-3">
           <div>
             <div
-              class="placeholder-glow d-inline-block rounded-circle bg-gray"
+              class="placeholder-glow d-inline-block rounded-circle bg-body-secondary"
               style="width: 128px; height: 128px"
             >
               &nbsp;
             </div>
-            <div class="placeholder bg-gray col-10"></div>
-            <div class="placeholder bg-gray col-6"></div>
-            <div class="placeholder bg-gray col-8 mt-4"></div>
-            <div class="placeholder bg-gray col-6"></div>
+            <div class="placeholder bg-body-secondary col-10"></div>
+            <div class="placeholder bg-body-secondary col-6"></div>
+            <div class="placeholder bg-body-secondary col-8 mt-4"></div>
+            <div class="placeholder bg-body-secondary col-6"></div>
           </div>
         </div>
       </div>
 
       <div class="col-xl-3">
         <div class="px-3">
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
         </div>
       </div>
 
       <div class="col-12 col-xl-3">
         <div class="px-3">
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
         </div>
       </div>
 
       <div class="col-12 col-xl-3">
         <div class="px-3">
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
-          <div class="placeholder bg-gray col-10"></div>
-          <div class="placeholder bg-gray col-6"></div>
-          <div class="placeholder bg-gray col-8"></div>
-          <div class="placeholder bg-gray col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
+          <div class="placeholder bg-body-secondary col-10"></div>
+          <div class="placeholder bg-body-secondary col-6"></div>
+          <div class="placeholder bg-body-secondary col-8"></div>
+          <div class="placeholder bg-body-secondary col-6 mt-4"></div>
         </div>
       </div>
     </div>
diff --git a/compass_vue/components/student/profile-mini.vue b/compass_vue/components/student/profile-mini.vue
index 1448336f..ace3d3a9 100644
--- a/compass_vue/components/student/profile-mini.vue
+++ b/compass_vue/components/student/profile-mini.vue
@@ -28,6 +28,8 @@
         <router-link :to="{ path: '/student/' + person.uwnetid }"
           >{{ person.uwnetid }}
         </router-link>
+
+        {{  person.analytics_alert }}
       </div>
     </div>
   </div>
diff --git a/compass_vue/components/student/schedule.vue b/compass_vue/components/student/schedule.vue
index d46983f6..003990da 100644
--- a/compass_vue/components/student/schedule.vue
+++ b/compass_vue/components/student/schedule.vue
@@ -62,7 +62,7 @@
                   :key="sectionIndex"
                 >
                   <tr>
-                    <td class="ps-3 border-0">
+                    <td class="ps-3" :class="isLecture(section.credits) ? 'border-0' : ''">
                       <!-- MARK: only show course analytics for top-level (i.e. NOT quiz sections) v-show="isQuizSection(section.credits)"-->
                       <!-- Expend and collapse RAD data. Auto expand all classes with a warning icon -->
                       <div class="d-flex">
@@ -76,7 +76,7 @@
                             :aria-controls="'collapseExample' + sectionIndex"
                           >
                             <i
-                              class="bi bi-chevron-right"
+                              class="bi bi-chevron-down"
                               aria-hidden="true"
                             ></i>
                           </button>
@@ -97,10 +97,10 @@
                         ></i>
                       </div>
                     </td>
-                    <td class="border-0">
+                    <td :class="isLecture(section.credits) ? 'border-0' : ''">
                       {{ section.sln }}
                     </td>
-                    <td class="border-0">
+                    <td :class="isLecture(section.credits) ? 'border-0' : ''">
                       <div
                         v-for="(meeting, index) in section.meetings"
                         :key="index"
@@ -119,7 +119,7 @@
                         </span>
                       </div>
                     </td>
-                    <td class="border-0">
+                    <td :class="isLecture(section.credits) ? 'border-0' : ''">
                       <div
                         v-for="(meeting, index) in section.meetings"
                         :key="index"
@@ -130,12 +130,12 @@
                         </span>
                       </div>
                     </td>
-                    <td class="border-0">
+                    <td :class="isLecture(section.credits) ? 'border-0' : ''">
                       {{ section.credits }}
                     </td>
                   </tr>
                   <!-- MARK: show course analytics only for lecture courses -->
-                  <tr v-show="isLecture(section.credits)">
+                  <tr v-if="isLecture(section.credits)">
                     <td colspan="5" class="p-0">
                       <div
                         class="collapse"
@@ -253,18 +253,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.chevron .bi-chevron-right {
+.chevron .bi-chevron-down {
   display: inline-block;
   transition: transform 0.35s ease;
   transform-origin: 0.5em 50%;
   font-weight: bolder;
 }
 
-.chevron[aria-expanded="true"] .bi-chevron-right {
-  transform: rotate(90deg);
+.chevron[aria-expanded="true"] .bi-chevron-down {
+  transform: scaleY(-1);
 }
 
-.bi-chevron-right::after {
+.bi-chevron-down::after {
   font-weight: bolder !important;
 }
 </style>
diff --git a/compass_vue/layout.vue b/compass_vue/layout.vue
index 20f1d56e..8d0dc1e1 100644
--- a/compass_vue/layout.vue
+++ b/compass_vue/layout.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- layout.vue: this is where you override the layout -->
   <SSidebar
     :app-name="appName"
     :app-root-url="appRootUrl"
@@ -7,7 +6,42 @@
     :user-name="userName"
     :sign-out-url="signOutUrl"
   >
-    <template #profile>
+    <template #navigation>
+
+      <NavMenu :user-roles="userRoles" />
+
+      <QuarterWeek :term-data="termData" />
+
+      <h3
+        id="aat_navlink_header"
+        class="fs-8 text-white text-opacity-50 text-uppercase"
+        style="--bs-text-opacity: 0.5"
+      >
+        Advising Resources
+      </h3>
+      <ul aria-labelledby="aat_navlink_header" class="list-unstyled mb-5 small">
+        <li class="mb-2">
+          <BLink
+            href="https://sdb.admin.uw.edu/sisAdvising/securid/overview.aspx"
+            class="link-light link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
+            title="View all cohorts"
+          >
+            Academic Records (EARS)
+          </BLink>
+        </li>
+        <li class="mb-2">
+          <BLink
+            href="https://retention.uw.edu"
+            class="link-light link-underline link-underline-opacity-0 link-underline-opacity-100-hover"
+            title="View all majors"
+          >
+            Retention Analytics (RAD)
+          </BLink>
+        </li>
+      </ul>
+    </template>
+    <template #aside>
+      <NavMessage v-if="persMsg && persMsg.length > 0" :messages="persMsg" />
       <SProfile
         v-if="userName != userOverride"
         :user-netid="userName"
@@ -24,14 +58,9 @@
       <SProfile v-else :user-netid="userName">
         <a :href="signOutUrl" class="text-white">Sign out</a>
       </SProfile>
-    </template>
-    <template #navigation>
-      <NavMenu :user-roles="userRoles" />
-      <QuarterWeek :term-data="termData" />
-    </template>
-    <template #aside>
-      <NavMessage v-if="persMsg && persMsg.length > 0" :messages="persMsg" />
-      <SColorMode />
+      <div class="text-end text-white">
+        <SColorMode></SColorMode>
+      </div>
     </template>
     <template #main>
       <slot name="title">
@@ -44,6 +73,7 @@
 </template>
 
 <script>
+import { BLink } from "bootstrap-vue-next";
 import { SColorMode, SSidebar, SProfile } from "solstice-vue";
 import QuarterWeek from "@/components/_common/quarter-week.vue";
 import NavMenu from "@/components/nav-menu.vue";
@@ -53,6 +83,7 @@ import { clearOverride } from "@/utils/data";
 export default {
   name: "CompassApp",
   components: {
+    BLink,
     NavMenu,
     NavMessage,
     QuarterWeek,
diff --git a/compass_vue/pages/affiliations.vue b/compass_vue/pages/affiliations.vue
index 3b1e6f53..12e95330 100644
--- a/compass_vue/pages/affiliations.vue
+++ b/compass_vue/pages/affiliations.vue
@@ -1,7 +1,7 @@
 // reports.vue
 
 <template>
-  <layout :page-title="pageTitle">
+  <Layout :page-title="pageTitle">
     <!-- page content -->
     <template #content>
       <div class="row my-4 small">
@@ -178,7 +178,7 @@
         </div>
       </div>
     </template>
-  </layout>
+  </Layout>
 </template>
 
 <script>
@@ -189,7 +189,7 @@ import { BCard } from "bootstrap-vue-next";
 
 export default {
   components: {
-    layout: Layout,
+    Layout,
     BCard,
   },
   props: {

From 5daa157bbca4ae47bb39390e5275407e782577be Mon Sep 17 00:00:00 2001
From: Charlon Palacay <charlon@gmail.com>
Date: Mon, 14 Oct 2024 16:39:15 -0700
Subject: [PATCH 2/2] Styles system message panel.

---
 compass_vue/components/nav-message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compass_vue/components/nav-message.vue b/compass_vue/components/nav-message.vue
index bb52e843..854f5384 100644
--- a/compass_vue/components/nav-message.vue
+++ b/compass_vue/components/nav-message.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-light my-3">
-    <div class="text-light-gray bg-dark-purple rounded-3 p-3 small">
+    <div class="bg-white bg-opacity-10 text-white rounded-3 p-3 small">
       <div class="mb-2">
         <i class="bi bi-exclamation-triangle-fill me-2"></i>System Messages
       </div>