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

Implemented simple dropdown feature to title to clean up explore page #852

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+100 −32
Open

Implemented simple dropdown feature to title to clean up explore page #852

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dec3b32
Implemented simple dropdown feature to title
ethan2917 Nov 28, 2023
41b7cdb
Refactor department title dropdown button styling
ethan2917 Nov 29, 2023
8958ee3
Update CourseExplorer.vue with chevron animation
ethan2917 Nov 29, 2023
4b890af
[CodeFactor] Apply fixes to commit 8958ee3
code-factor Nov 29, 2023
21d3b72
Fix collapse button and clean department ID
ethan2917 Nov 30, 2023
c02dbac
Refactor dropdowns into two columns
ethan2917 Nov 30, 2023
ebd94e6
Add collapse all button to CourseExplorer.vue
ethan2917 Dec 9, 2023
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
132 changes: 100 additions & 32 deletions src/web/src/pages/CourseExplorer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,40 @@
<template>
<b-container fluid>
<b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
<div style="float: left;" class="w-10">
<b-button @click="toggleCollapse" variant="primary" class="open-close-button">
{{ collapseAll ? 'Close All' : 'Open All' }}
</b-button>
</div>
<div v-if="!isLoadingCourses && courses.length > 0" class="mx-auto w-75">
<b-row>
<!-- 2 arrays in schoolDepartmentObjects, so 2 columns -->
<b-col
v-for="(deptCol, index) in schoolDepartmentObjects"
:key="`deptCol-${index}`"
md="6"
>
<b-row
v-for="deptObj in deptCol"
:key="deptObj.school"
class="departmentBox border m-2 mb-4"
>
<b-col>
<!-- Department Title -->
<b-row class="school-name">
<h3 class="m-1 ml-2">
<b-col v-for="(deptCol, index) in schoolDepartmentObjects" :key="`deptCol-${index}`" cols="12" class="col-md-6">
<b-row v-for="deptObj in deptCol" :key="deptObj.school" class="departmentBox m-2 mb-4">
<b-col cols="12">
<!-- Department Title as a ~button that controls the collapse -->
<b-button v-b-toggle="'collapse-' + cleanId(deptObj.school)" class="button" variant="outline-secondary">
<h4>
{{ deptObj.school }}
</h3>
</b-row>
<!-- Subject Title -->
<b-row>
<DepartmentList
:majors="deptObj.departments"
:deptClassDict="deptClassDict"
v-on:showCourseInfo="showCourseInfo($event)"
></DepartmentList>
</b-row>
<span class="chevron"></span>
</h4>
</b-button>
<hr />
<!-- Subject Title inside a b-collapse -->
<b-collapse :visible="departmentCollapseStates['collapse-' + cleanId(deptObj.school)]" :id="'collapse-' + cleanId(deptObj.school)">
<b-row>
<DepartmentList
:majors="deptObj.departments"
:deptClassDict="deptClassDict"
v-on:showCourseInfo="showCourseInfo($event)"
></DepartmentList>
</b-row>
</b-collapse>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
<CenterSpinner
v-else
:height="80"
:fontSize="1.3"
loadingMessage="Departments"
:topSpacing="30"
/>
<CenterSpinner v-else :height="80" :fontSize="1.3" loadingMessage="Departments" :topSpacing="30" />
</b-container>
</template>

Expand All @@ -59,6 +53,7 @@ export default {
},
data() {
return {
collapseAll: false,
breadcrumbNav: [
{
text: "YACS",
Expand All @@ -72,6 +67,12 @@ export default {
},
methods: {
generateRequirementsText,
cleanId(str) {
return str.replace(/\s+/g, '-');
},
toggleCollapse() {
this.collapseAll = !this.collapseAll;
},
},
computed: {
...mapState(["isLoadingCourses"]),
Expand Down Expand Up @@ -115,6 +116,16 @@ export default {
}
return deptClassDict;
},
departmentCollapseStates() {
const collapseStates = {};
this.schoolDepartmentObjects.forEach((deptCol) => {
deptCol.forEach((deptObj) => {
const collapseId = 'collapse-' + this.cleanId(deptObj.school);
collapseStates[collapseId] = this.collapseAll;
});
});
return collapseStates;
},
},
metaInfo() {
return {
Expand Down Expand Up @@ -157,4 +168,61 @@ export default {
background: rgba(108, 90, 90, 0.15);
border-bottom: rgba(108, 90, 90, 0.1), solid, 1px;
}

.button {
width: 100%;
text-align: left;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 0;
margin: 0;
font-size: 2rem;
font-weight: 500;
color: #3395ff !important;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}

.button:hover {
background-color: rgba(108, 90, 90, 0.15);
}

.button:focus {
background-color: transparent;
box-shadow: none !important;
outline: none !important;

}

.button:active {
background-color: transparent !important;
color: #3395ff;
box-shadow: none !important;
outline: none !important;
}

.chevron {
display: inline-block;
width: 0;
height: 0;
margin-left: auto;
border-style: solid;
border-width: 0 5px 10px;
border-color: transparent transparent #3395ff;
transition: transform 0.3s;
}

/* Rotate the chevron when the button is active */
.button[aria-expanded="true"] .chevron {
transform: rotate(180deg);
margin-left: auto;
}

.open-close-button {
margin-top: 10px;
margin-left: 10px;
}

</style>
Loading