Skip to content

Commit

Permalink
Animated collapse (#672)
Browse files Browse the repository at this point in the history 
* Update NewCourseScheduler.vue

Made the hide and open button for the side menu

* Update NewCourseScheduler.vue

* Update NewCourseScheduler.vue

Added the close sidebar function and after the sidebar is closed the schedule image expended to the full screen. Also after the sidebar is closed new button called "Open" appears and if we click it the sidebar opens again.

* Update NewCourseScheduler.vue

* Update NewCourseScheduler.vue

* Update NewCourseScheduler.vue

* Update NewCourseScheduler.vue

* Sidebar creation

* Update Sidebar.vue

* Update NewCourseScheduler.vue

* Update NewCourseScheduler.vue

* Button Activate

* Fix

* Update NewCourseScheduler.vue

* Syntax error fixed

* Animation prototype

* Finally functional animation

* Update NewCourseScheduler.vue

* Size and padding fix

* Column dynamics

* Update NewCourseScheduler.vue

* Merge

* Merge complete

Please work

* Update NewCourseScheduler.vue

* Finalize

* Collapse button design

* Animation finalize

* [CodeFactor] Apply fixes

* Unclickable problem solved

* Color-fix for darkmode

* Bug fix

font-size and color was re-defined, so I fixed it.

* Update NewCourseScheduler.vue

Defalt status of sidebar is now 'open'

* Finalize fixation & animations

Animatino is now rotating for only Y-axis

* Merge from master to my branch (#680)

* Creating Contribution Guide (#644)

This merge is a test to see if Lighthouse CI is being honest to us or not

Co-authored-by: dorian451 <112524240+dorian451@users.noreply.github.com>

* Fix docker (#655)

* Update requirements.txt

* Update requirements.txt

* Color Mode Button/Notification

-Changed the notification button to a switch
-Added brief text in front so user knows function
- Moved toast notification to top-center of screen

* Delete workspace.xml

* Dropdown

added drop down to condense all 3 functions of button/moon

* Drop Down Funcitonal

Drop down logic is now functional, still need to add more styling

* Updated Notifications and functions

Changed the text and color of notifications. added some logic for functions. currently have one bug where sometimes the first mode clicked is the opposite.

* Navbar highlight current page (#632)

* add highlight to currently selected page in navbar
(this took a lot longer than it should have)

* make border thicker

* fix navbar only being highlighted on top-level pages

* beep boop Github Action Master Branch CI Prettier hard at work

* Font and color branch (#625)

* Update CourseExplorer.vue

Changed the color of the title same ad other pages.

* Font_and_color_changed

* beep boop Github Action Master Branch CI Prettier hard at work

* See if  I can't specify sqlAlchemy

This is a bad news. Since the localhost Docker appears to require us to specify the version.

* remove 2020 data

* Updated Toggle Style Logic

Believe to have resolved bug, now working as intended. Need to change text color on dark mode so that its more readable

* More updates

comments to understand logic and other updates

* Cleaning up

just cleaning up code and testings

* New logic update

updated function logic to hopefully fix errors

* Fixed Dropdown Colors

Dark mode hover color changed so that the text is more visible to the user

* update to running fall 2023 instead pf spring 2023

* change to get summer class info

* fixed a summer address link

* Adding Current Item Highlight

trying to change background color based on currently selected item

* changes explore icon (#661)

changes explore icon

* beep boop Github Action Master Branch CI Prettier hard at work

* Update CourseListing.vue (#667)

* beep boop Github Action Master Branch CI Prettier hard at work

* Current Mode Selected Feature Update

Updated some logic and testing, not fully complete

* More updates

Still working out logic, changed color to what will most likely be close to final color

* Clean up

removing unnecessary code

* Bump json5 from 2.1.3 to 2.2.3 in /tests/integration (#638)

Bumps [json5](https://github.com/json5/json5) from 2.1.3 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v2.1.3...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Working on fixing cookies

reworking logic to fix cookie issue not following device theme

* Revert "Working on fixing cookies"

This reverts commit a27eab5.

* Update cookie

trying to fix logic to update cookies correctly

* Fixed Cookie

believed to have fixed cookie issue, atleast it works on my local device

* Updating Default Logic

changed default logic to toggle follow theme if user gets rid of cookie or its first time loading site

* beep boop Github Action Master Branch CI Prettier hard at work

* Update ci.yaml

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Harry Tan <32246618+DarknessUnder@users.noreply.github.com>
Co-authored-by: dorian451 <112524240+dorian451@users.noreply.github.com>
Co-authored-by: Troy-bailan-King <97757033+Troy-bailan-King@users.noreply.github.com>
Co-authored-by: Matt Lammon <mlammon11@gmail.com>
Co-authored-by: Matt Lammon <91478985+mlammon11@users.noreply.github.com>
Co-authored-by: I'm a Github Action <beepboop@github.com>
Co-authored-by: charleschae12 <112535899+charleschae12@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Update NewCourseScheduler.vue

* Revert "Merge from master to my branch (#680)"

This reverts commit 3f49f69.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Charles Chae <charleschae12@gmail.com>
Co-authored-by: codefactor-io <support@codefactor.io>
Co-authored-by: Harry Tan <32246618+DarknessUnder@users.noreply.github.com>
Co-authored-by: dorian451 <112524240+dorian451@users.noreply.github.com>
Co-authored-by: Troy-bailan-King <97757033+Troy-bailan-King@users.noreply.github.com>
Co-authored-by: Matt Lammon <mlammon11@gmail.com>
Co-authored-by: Matt Lammon <91478985+mlammon11@users.noreply.github.com>
Co-authored-by: I'm a Github Action <beepboop@github.com>
Co-authored-by: charleschae12 <112535899+charleschae12@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
@skyjune0824 @charleschae12
@code-factor @DarknessUnder @dorian451 @Troy-bailan-King @mlammon11 @dependabot
11 people authored Apr 21, 2023
1 parent 6ce87f1 commit f7f6cf7
Showing 1 changed file with 246 additions and 51 deletions.
297 changes: 246 additions & 51 deletions src/web/src/pages/NewCourseScheduler.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,83 @@
<template>
<b-container fluid class="py-3 h-100 main-body">
<b-row class="h-100">
<b-col md="4" class="d-flex flex-column">
<b-card no-body class="h-100">
<b-tabs card class="h-100 d-flex flex-column flex-grow-1">
<b-tab
title="Course Search"
active
class="flex-grow-1 w-100"
data-cy="course-search-tab"
>
<b-card-text class="d-flex flex-grow-1 w-100">
<CenterSpinner
v-if="loading"
class="d-flex flex-grow-1 flex-column w-100 justify-content-center align-items-center"
:height="60"
:fontSize="1"
loadingMessage="Courses"
:topSpacing="0"
/>

<CourseList
v-if="!loading"
@addCourse="addCourse"
@removeCourse="removeCourse"
@showCourseInfo="showCourseInfo"
class="w-100"
/>
</b-card-text>
</b-tab>
<b-tab class="flex-grow-1" data-cy="selected-courses-tab">
<template v-slot:title>
<div class="text-center" data-cy="selected-courses-tab-header">
Selected Courses
<b-badge variant="light" data-cy="num-selected-courses">
{{ numSelectedCourses }}
</b-badge>
<b-row class="h-100">
<div v-if = "isNavOpen" class="col-md-3">
</div>
<div :class= "[main]">
<!--This is a button, an animated one-->
<div id="burger"
:class="{ 'active' : isNavOpen }"
@click.prevent="toggleNav">
<slot>
<button type="button" class="burger-button"><!--v-if="!isNavOpen"-->
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
<span class="burger-bar burger-bar--4"></span>
<span class="burger-bar burger-bar--5"></span>
<span class="burger-bar burger-bar--6"></span>
</button>
</slot>
</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%">
<b-col class="d-flex flex-column" ref="sidebar" style="height: 100%; padding: 1px">
<b-card no-body class="h-100">
<b-tabs card class="h-100 d-flex flex-column flex-grow-1">
<b-tab
title="Course Search"
active
class="flex-grow-1 w-100"
data-cy="course-search-tab"
>
<b-card-text class="d-flex flex-grow-1 w-100">
<CenterSpinner
v-if="loading"
class="d-flex flex-grow-1 flex-column w-100 justify-content-center align-items-center"
:height="60"
:fontSize="1"
loadingMessage="Courses"
:topSpacing="0"
/>

<CourseList
v-if="!loading"
@addCourse="addCourse"
@removeCourse="removeCourse"
@showCourseInfo="showCourseInfo"
class="w-100"
/>
</b-card-text>
</b-tab>
<b-tab class="flex-grow-1" data-cy="selected-courses-tab">
<template v-slot:title>
<div class="text-center" data-cy="selected-courses-tab-header">
Selected Courses
<b-badge variant="light" data-cy="num-selected-courses">
{{ numSelectedCourses }}
</b-badge>
</div>
</template>
<b-card-text class="w-100 d-flex flex-grow-1 flex-column">
<SelectedCourses
:courses="selectedCourses"
@removeCourse="removeCourse"
@removeCourseSection="removeCourseSection"
@addCourseSection="addCourseSection"
/>
</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</b-col>
</div>
</template>
<b-card-text class="w-100 d-flex flex-grow-1 flex-column">
<SelectedCourses
:courses="selectedCourses"
@removeCourse="removeCourse"
@removeCourseSection="removeCourseSection"
@addCourseSection="addCourseSection"
/>
</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</b-col>
<div class="col-md-8">
<slot></slot>
</div>
</transition>
</div>
<b-form-select
v-if="
!loading &&
Expand All @@ -62,7 +89,7 @@
text-field="display_string"
value-field="display_string"
></b-form-select>
<div id="allScheduleData">
<div id="allScheduleData" class="justify-content-right">
<div>
<b-row>
<b-col class="m-2">
Expand Down Expand Up @@ -267,6 +294,9 @@ export default {
selectedScheduleSubsemester: null,
scheduler: null,
exportIcon: faPaperPlane,
main: "col-md-9",
isNavOpen: true, //for sidebar open check
courseInfoModalCourse: null,
showCourseInfoModal: false,
Expand All @@ -281,6 +311,14 @@ export default {
};
},
methods: {
toggleNav(){
this.isNavOpen = !this.isNavOpen;
if(this.isNavOpen){
this.main = "col-md-9";
}else{
this.main = "col-md-12";
}
},
toggleColors() {
this.$store.commit(TOGGLE_COLOR_BLIND_ASSIST);
},
Expand Down Expand Up @@ -669,6 +707,18 @@ export default {
}
}
.d-flex flex-column {
transition: 0.5s;
background-color: #111;
}
.sidebar {
padding: 8px 8px 8px 32px;
text-decoration: none;
display: block;
transition: 0.3s;
}
.tab-content {
display: flex;
flex-grow: 1;
Expand Down Expand Up @@ -697,7 +747,152 @@ footer {
margin: 0px !important;
}
sidebar-panel-nav {
color: #fff;
text-decoration: none;
font-size: 1.5rem;
display: block;
padding-bottom: 0.5em;
}
#export-ics-button {
background: #3d4959 !important;
}
.slide-enter-active,
.slide-leave-active
{
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s
}
.sidebar-backdrop { //it is a background feature when the sidebar opens, left here for easier modification that possibly happen on future.
background-color: rgba(255, 255, 255, 0);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
.sidebar-panel { // The actual view of sidebar back
overflow-y: auto;
background-color: #1eddff00;
position: fixed;
left: 0;
top: 0;
height: 100vh;
z-index: 999;
margin: 60px 0px 0px;
width: 25%;
}
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform .6s cubic-bezier(.165,.84,.44,1);
}
.burger-bar {
background-color: #239bca;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1),background-color .6s cubic-bezier(.165,.84,.44,1);
}
.burger-bar--1{
transform: scale(0.5) rotate(-45deg) translate(0px, 10px);
}
.burger-bar--2{
transform: scale(0.5) rotate(45deg) translate(0px, -10px);
}
.burger-bar--3{
transform: scale(0.5) rotate(-45deg) translate(10px, 20px);
}
.burger-bar--4{
transform: scale(0.5) rotate(45deg) translate(10px, -20px);
}
.burger-bar--5{
transform: scale(0) rotate(-45deg) translate(0px, 10px);
}
.burger-bar--6{
transform: scale(0) rotate(45deg) translate(0px, -10px);
}
.burger-button:hover .burger-bar--1 {
transform: scale(0.5) rotate(-45deg) translate(20px, 30px);
}
.no-touchevents .burger-bar--1:hover {
transform: scale(0.5) rotate(-45deg) translate(20px, 30px);
}
.burger-button:hover .burger-bar--2 {
transform: scale(0.5) rotate(45deg) translate(20px, -30px);
}
.no-touchevents .burger-bar--2:hover {
transform: scale(0.5) rotate(45deg) translate(20px, -30px);
}
.burger-button:hover .burger-bar--5 {
transform: scale(0.5) rotate(-45deg) translate(0px, 10px);
}
.no-touchevents .burger-bar--5:hover {
transform: scale(0.5) rotate(-45deg) translate(0px, 10px);
}
.burger-button:hover .burger-bar--6 {
transform: scale(0.5) rotate(45deg) translate(0px, -10px);
}
.no-touchevents .burger-bar--6:hover {
transform: scale(0.5) rotate(45deg) translate(0px, -10px);
}
#burger.active .burger-button {
transform: rotateY(-540deg);
}
#burger.active .burger-bar {
background-color: #32aad8;
}
</style>

0 comments on commit f7f6cf7

Please sign in to comment.