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

Mobile View rework #897

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Mobile View rework #897

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5994938
Made slider show below for mobile view
bryantran24 Nov 15, 2024
c7a31d3
Move mobile view course selector
bryantran24 Nov 15, 2024
2a89f04
Updated CRN, Credit, Color blind, export data row
bryantran24 Nov 15, 2024
1705f4d
Fixed bug where buttons went into next row
bryantran24 Nov 19, 2024
bee0478
Made it fit all devices
bryantran24 Nov 19, 2024
47b5117
Reorganized css and changed font size
bryantran24 Nov 22, 2024
dcfb801
Made course select bigger and made mobile view for professor
bryantran24 Nov 22, 2024
cebe181
Fixed text allignment and fixed mobile view for professor page
bryantran24 Nov 22, 2024
7c79c6c
Fixed button sizes not being the same
bryantran24 Nov 23, 2024
8542b21
Fixed next button going under and header navbar colorheaderfixed
bryantran24 Nov 26, 2024
0258b8b
Fixed visibility bugs
bryantran24 Nov 29, 2024
4cb4367
Final Commit
bryantran24 Dec 10, 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
225 changes: 132 additions & 93 deletions src/web/src/pages/NewCourseScheduler.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,94 @@
</button>
</slot>
</div>
<b-form-select
v-if="
!loading &&
scheduler.scheduleSubsemesters &&
scheduler.scheduleSubsemesters.length > 1
"
v-model="selectedScheduleSubsemester"
:options="scheduler.scheduleSubsemesters"
text-field="display_string"
value-field="display_string"
></b-form-select>
<div id="allScheduleData" class="justify-content-right">
<div>
<b-row class="justify-content-between align-items-center">
<b-col cols="auto" class="schedule-navigation">
<b-button
@click="
changeSchedule(-1);
updateIndexCookie();
"
size="sm"
>
Prev
</b-button>
</b-col>
<b-col cols="auto">
<span v-if="scheduleDisplayMessage === 2">
Add some sections to generate schedules!
</span>
<span v-else-if="scheduleDisplayMessage === 3">
Can't display because of course conflict!
</span>
<span v-else>
Displaying schedule {{ this.index + 1 }} out of
{{ this.possibilities.length }}
</span>
</b-col>
<b-col cols="auto" class="schedule-navigation">
<b-button
@click="
changeSchedule(1);
updateIndexCookie();
"
size="sm"
>
Next
</b-button>
</b-col>
</b-row>
<Schedule v-if="loading" />
<Schedule v-else :possibility="possibilities[index]"></Schedule>
<b-row class="align-items-center">
<!-- CRNs and Credits -->
<b-col class="m-2">
<h5>CRNs: {{ selectedCrns }}</h5>
<h5>Credits: {{ totalCredits }}</h5>
</b-col>
<!-- Color Blind Assistance -->
<b-col class="m-2 d-flex flex-column align-items-end">
<b-form-checkbox
class="mt-2"
size="sm"
:checked="$store.state.colorBlindAssist"
@change="toggleColors()"
switch
>
Color Blind Assistance
</b-form-checkbox>
<!-- Export Data with dropdown aligned to the right -->
<b-dropdown text="Export Data" class="mt-2" right>
<b-dropdown-item @click="exportScheduleToIcs">
<font-awesome-icon :icon="exportIcon" />
Export To ICS
</b-dropdown-item>
<b-dropdown-item @click="exportScheduleToImage">
<font-awesome-icon :icon="exportIcon" />
Export To Image
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
</div>
</div>
<div class="sidebar">
<!--<div class="sidebar-backdrop" v-if="isNavOpen"></div>-->
<transition name="slide">
<div v-if="isNavOpen" class="sidebar-panel">
<div class="sidebar-panal-nav" style="height: 100%;">
<div class="sidebar-panel-nav" style="height: 100%;">
<b-col
class="d-flex flex-column"
ref="sidebar"
Expand Down Expand Up @@ -92,92 +175,6 @@
</div>
</transition>
</div>
<b-form-select
v-if="
!loading &&
scheduler.scheduleSubsemesters &&
scheduler.scheduleSubsemesters.length > 1
"
v-model="selectedScheduleSubsemester"
:options="scheduler.scheduleSubsemesters"
text-field="display_string"
value-field="display_string"
></b-form-select>
<div id="allScheduleData" class="justify-content-right">
<div>
<b-row>
<b-col class="m-2">
<b-button
@click="
changeSchedule(-1);
updateIndexCookie();
"
size="sm"
>
Prev
</b-button>
</b-col>
<b-col cols="8" class="m-2 text-center">
<span v-if="scheduleDisplayMessage === 2">
Add some sections to generate schedules!
</span>
<span v-else-if="scheduleDisplayMessage === 3">
Can't display because of course conflict!
</span>
<span v-else>
Displaying schedule {{ this.index + 1 }} out of
{{ this.possibilities.length }}
</span>
</b-col>
<b-col class="m-2 text-right">
<b-button
@click="
changeSchedule(1);
updateIndexCookie();
"
size="sm"
>
Next
</b-button>
</b-col>
</b-row>
<Schedule v-if="loading" />
<Schedule v-else :possibility="possibilities[index]"></Schedule>

<b-row>
<b-col class="m-2">
<h5>CRNs: {{ selectedCrns }}</h5>
<h5>Credits: {{ totalCredits }}</h5>
</b-col>

<b-col md="3" justify="end">
<b-row>
<b-form-checkbox
class="mt-2"
size="sm"
:checked="$store.state.colorBlindAssist"
@change="toggleColors()"
switch
>
Color Blind Assistance
</b-form-checkbox>
</b-row>
<b-row>
<b-dropdown text="Export Data" class="mt-2">
<b-dropdown-item @click="exportScheduleToIcs">
<font-awesome-icon :icon="exportIcon" />
Export To ICS
</b-dropdown-item>
<b-dropdown-item @click="exportScheduleToImage">
<font-awesome-icon :icon="exportIcon" />
Export To Image
</b-dropdown-item>
</b-dropdown>
</b-row>
</b-col>
</b-row>
</div>
</div>
</div>
</b-row>

Expand Down Expand Up @@ -715,12 +712,6 @@ export default {
// This means that all v-tabs in this app will have flexbox content
// Hopefully this doesn't screw up someone's debugging later lol

@media (min-width: 1025px) {
.main-body {
min-height: 100vh;
}
}

.d-flex flex-column {
transition: 0.5s;
background-color: #111;
Expand All @@ -744,6 +735,11 @@ export default {
display: flex;
}

// This is for the button for navigating each schedule option
.schedule-navigation {
margin: 8px;
}

.card {
border: none !important;
font-size: 17px;
Expand Down Expand Up @@ -773,6 +769,11 @@ sidebar-panel-nav {
background: #3d4959 !important;
}

.b-dropdown .dropdown-menu {
// shifts export data menu left
transform: translateX(-10px);
}

.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
Expand Down Expand Up @@ -911,4 +912,42 @@ button:focus {
#burger.active .burger-bar {
background-color: #32aad8;
}

@media (min-width: 1025px) {
.main-body {
min-height: 100vh;
}
}

@media (max-width: 768px) {
// basically mobile view showing sidebar at bottom instead
.main-body {
display: flex;
flex-direction: column;
}

h5 {
font-size: .9em;
}

// the arrow that makes the sidebar appear or not
#burger {
display: none;
}

.sidebar-panel {
position: static;
width: 100%;
margin: 0;
}

.sidebar {
padding: 0;
}

.schedule-navigation {
padding: 0;
}
}

</style>
60 changes: 36 additions & 24 deletions src/web/src/pages/Pathway.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,12 @@
<b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>

<!-- button to switch between alphabet order and category order -->
<div style="float: left;" class="w-10">
<b-button
@click="listAlphabet()"
style="
margin-top: 10px;
color: #007bff;
border: solid #007bff;
background-color: transparent;
"
>
List by Alphabet
<div class="filter-buttons w-10" style="float: left;">
<b-button @click="listAlphabet()">
List by Alphabet
</b-button>
<br />
<b-button
@click="listCate()"
style="
margin-top: 10px;
color: #007bff;
border: solid #007bff;
background-color: transparent;
"
>
List by Category
<b-button @click="listCate()">
List by Category
</b-button>
</div>
<div v-if="categories.length > 0" class="mx-auto w-75">
Expand Down Expand Up @@ -317,6 +300,22 @@ export default {
</script>

<style>

.filter-buttons {
margin-top: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.filter-buttons button {
color: #007bff;
border: solid #007bff;
background-color: transparent;
width: 100%;
}

.gridContainer {
display: inline-grid;
grid-template-columns: auto auto;
Expand All @@ -325,7 +324,7 @@ export default {
}

.categoryBox {
text-align: center;
text-align: left;
}

.category-title {
Expand All @@ -338,7 +337,7 @@ export default {
display: inline-block;
background: white;
border-style: none;
text-align: justify;
text-align: left;
width: 95%;
}

Expand All @@ -353,4 +352,17 @@ export default {
.courseInPath:hover {
background-color: rgba(39, 130, 230, 0.5);
}

@media (max-width: 768px) {
.filter-buttons {
float: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 20px;
gap: 5px;
}
}
</style>
Loading