Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updates disclosure chevron. Fixes sidebar nav. #448

Merged
merged 2 commits into from
Oct 14, 2024
Merged

Updates disclosure chevron. Fixes sidebar nav. #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7d0d093
Updates disclosure chevron. Fixes sidebar nav.
charlon Oct 14, 2024
5daa157
Styles system message panel.
charlon Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .stylelintignore
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
8 changes: 4 additions & 4 deletions compass_vue/components/_common/quarter-week.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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 }}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion compass_vue/components/checkin-table-loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
92 changes: 30 additions & 62 deletions compass_vue/components/nav-menu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -84,6 +50,7 @@

<script>
import { Role } from "@/utils/roles";
import { BLink } from "bootstrap-vue-next";

export default {
props: {
Expand All @@ -92,6 +59,7 @@ export default {
required: true,
},
},
components: { BLink },
data() {
return {
Role: Role,
Expand Down
2 changes: 1 addition & 1 deletion compass_vue/components/nav-message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
60 changes: 30 additions & 30 deletions compass_vue/components/student/profile-loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 2 additions & 0 deletions compass_vue/components/student/profile-mini.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
<router-link :to="{ path: '/student/' + person.uwnetid }"
>{{ person.uwnetid }}
</router-link>

{{ person.analytics_alert }}
</div>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions compass_vue/components/student/schedule.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -76,7 +76,7 @@
:aria-controls="'collapseExample' + sectionIndex"
>
<i
class="bi bi-chevron-right"
class="bi bi-chevron-down"
aria-hidden="true"
></i>
</button>
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Loading