From 78c3b03e9f2114e114f5779a54d1ad391c37b43e Mon Sep 17 00:00:00 2001 From: Dyland Xue Date: Wed, 2 Dec 2015 16:04:49 -0500 Subject: [PATCH] update to latest fullcalendar, update css accordingly --- bower.json | 2 +- course_selection/static/less/calendar.css | 61 ++ course_selection/static/less/calendar.less | 2 +- .../static/less/course-evaluation.css | 7 + .../static/less/course-search.css | 339 +++++++++ course_selection/static/less/footer.css | 18 + course_selection/static/less/header.css | 77 ++ course_selection/static/less/main.css | 683 +++++++++++++++++- course_selection/static/less/modal.css | 35 + course_selection/static/less/nice.css | 152 ++++ course_selection/static/less/queue.css | 27 + 11 files changed, 1400 insertions(+), 3 deletions(-) create mode 100644 course_selection/static/less/calendar.css create mode 100644 course_selection/static/less/course-evaluation.css create mode 100644 course_selection/static/less/course-search.css create mode 100644 course_selection/static/less/footer.css create mode 100644 course_selection/static/less/header.css create mode 100644 course_selection/static/less/modal.css create mode 100644 course_selection/static/less/nice.css create mode 100644 course_selection/static/less/queue.css diff --git a/bower.json b/bower.json index b87eebd23..215cc44bf 100644 --- a/bower.json +++ b/bower.json @@ -31,7 +31,7 @@ "chai": "~1.10.0", "flatstrap": "~3.3.1", "fontawesome": "~4.0.3", - "fullcalendar": "2.2.4", + "fullcalendar": "2.5.0", "imagesloaded": "3.0.0", "jquery-ui": "~1.11.0", "jquery.cookie": "~1.4.1", diff --git a/course_selection/static/less/calendar.css b/course_selection/static/less/calendar.css new file mode 100644 index 000000000..a1c1b5f39 --- /dev/null +++ b/course_selection/static/less/calendar.css @@ -0,0 +1,61 @@ +.fc-unthemed .fc-today { + background-color: white; +} +.calendar { + background-color: white; +} +.fc-event { + border-right-style: none; + border-top-style: none; + border-left-width: 4px; + border-bottom-style: none; + border-radius: 0; +} +.fc-event:hover { + cursor: pointer; + overflow: visible; +} +.fc-event:hover .fc-location { + visibility: visible; +} +.fc-event .fc-location { + visibility: hidden; +} +.cal-unconfirmed { + background: url('../images/stripe.png') repeat #c0c0c0; + opacity: 0.8; + border-left-color: transparent !important; +} +.fc-toolbar { + margin-bottom: 0; + height: 0; +} +.fc-time-grid-event .fc-time, +.fc-time-grid-event .fc-title { + padding: 0 3px; +} +.fc-time-grid-event .fc-title { + font-weight: bold; +} +.fc-slats td { + height: 2.6vh; +} +.fc-time-grid .fc-slats .fc-minor td { + border-top-style: none; +} +.fc-axis { + display: none; +} +.qtip-recal { + border-radius: 4px; + box-shadow: none; +} +/* +.fc-ltr .fc-axis { + color: @calendar-dark-font-color; +} + +.fc-day-header { + color: @calendar-dark-font-color; +} +*/ diff --git a/course_selection/static/less/calendar.less b/course_selection/static/less/calendar.less index 953b46dad..f983914a4 100644 --- a/course_selection/static/less/calendar.less +++ b/course_selection/static/less/calendar.less @@ -63,7 +63,7 @@ height: 2.6vh; } -.fc-slats .fc-minor td { +.fc-time-grid .fc-slats .fc-minor td { border-top-style: none; } diff --git a/course_selection/static/less/course-evaluation.css b/course_selection/static/less/course-evaluation.css new file mode 100644 index 000000000..c117eec05 --- /dev/null +++ b/course_selection/static/less/course-evaluation.css @@ -0,0 +1,7 @@ +/* + * make course evaluation fill up the entire viewport + */ +#courseEvaluation { + height: 100vh; + width: 100vw; +} diff --git a/course_selection/static/less/course-search.css b/course_selection/static/less/course-search.css new file mode 100644 index 000000000..932c939af --- /dev/null +++ b/course_selection/static/less/course-search.css @@ -0,0 +1,339 @@ +/* all course panels, including enrolled and search results */ +.course-panel { + min-height: 5vh; + width: 100%; + margin-top: 0px !important; + position: relative; + overflow: visible; + border-radius: 0 !important; + border-bottom: none; +} +/* enrolled panels are marked with a left bar */ +.enrolled-course-panel { + border-left-width: 4px; + border-right-width: 0; + border-top-width: 0; + border-bottom-width: 0; +} +.course-panel-title { + text-align: left; + padding-left: 2px; + width: 70%; +} +.course-panels-container { + position: relative; + min-height: 0; + overflow-y: auto; +} +.enrolled-courses-container { + position: relative; + min-height: 5vh; + overflow-y: auto; +} +#searchBarContainer { + background-color: #f1f2f2; + height: 4vh; + margin-bottom: 1vh; + position: relative; +} +.search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; +} +.search-button .fa { + font-size: 18px; +} +.course-search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; + right: 0; +} +.course-search-button .fa { + font-size: 18px; +} +.friend-search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; + right: 10%; +} +.friend-search-button .fa { + font-size: 18px; +} +.searchBar { + padding: 0px 0px 0px 10px; + color: #bbbbbb; + height: 4vh; + font-size: 13px; + border-radius: 4px; + border-width: 0px; + width: 100%; +} +.searchBar:focus { + outline: none; + color: #404040; +} +.searchBar:focus::-webkit-input-placeholder { + color: transparent; +} +#unenrolledCourses { + min-height: 0; + height: 100%; +} +#loading-message-container { + position: relative; +} +.loading-courses-message { + display: inline; + margin-left: 15px; +} +#enrolledCourses { + height: 100%; +} +.course-listings { + font-size: 13px; + margin-bottom: 0; +} +.course-panel-heading { + height: 6vh; +} +.course-title { + font-size: 13px; + margin-bottom: 0px; +} +.highlighted { + font-weight: bold; +} +.course-tag { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: calc(39px); +} +.unconfirmed { + background: url('../images/stripe.png') repeat #c0c0c0; + opacity: 0.8; + border-left-color: transparent !important; +} +.course-info { + position: absolute; + top: 25%; + right: 0; + height: 50%; + max-height: 30px; + overflow: visible; + z-index: 10; +} +.absolute-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; +} +.absolute-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; +} +.rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.second-rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 10%; +} +.second-rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.third-rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 20%; +} +.third-rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.add-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; + background-color: green; +} +.add-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.minus-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; + background-color: red; + z-index: 10; +} +.minus-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.eval-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 20%; + background-color: orange; + z-index: 10; +} +.eval-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.more-info-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 10%; + background-color: gray; + z-index: 10; +} +.more-info-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.tags-visible { + z-index: 100; +} +.export-icon { + cursor: pointer; +} +.course-panel.ng-move, +.course-panel.ng-enter, +.course-panel.ng-leave { + -webkit-transition: 200ms linear all; + transition: 200ms linear all; +} +.course-panel.ng-leave.ng-leave-active, +.course-panel.ng-move, +.course-panel.ng-enter { + opacity: 0.5; + left: -20vh; +} +.course-panel.ng-leave, +.course-panel.ng-move.ng-move-active, +.course-panel.ng-enter.ng-enter-active { + opacity: 1; + left: 0; +} +md-pagination-wrapper { + height: 38px; +} +.md-tab { + padding: 6px 24px 6px 24px; +} +md-tabs-canvas { + height: 38px; +} +/* +.ng-hide-add { + -webkit-transition:0.1s linear all; + -moz-transition:0.1s linear all; + -o-transition:0.1s linear all; + transition:0.1s linear all; + opacity: 1; +} +.ng-hide-add.ng-hide-add-active { + opacity: 0; +} + +.ng-hide-remove { + -webkit-transition:0.1s linear all; + -moz-transition:0.1s linear all; + -o-transition:0.1s linear all; + transition:0.1s linear all; + opacity: 0; +} +.ng-hide-remove.ng-hide-remove-active { + opacity: 1; +} +*/ diff --git a/course_selection/static/less/footer.css b/course_selection/static/less/footer.css new file mode 100644 index 000000000..f4bd4dad7 --- /dev/null +++ b/course_selection/static/less/footer.css @@ -0,0 +1,18 @@ +#footer { + border-top: 1px solid #e5e5e5; + background-color: rgba(42, 52, 65, 0.95); +} +#footer-inner { + color: #dddddd; + margin: 0 auto; + max-width: 1440px; + padding: 0 12px; +} +#footer-inner a { + font-weight: bold; +} +#footer-inner p { + clear: left; + line-height: 3; + margin: 0; +} diff --git a/course_selection/static/less/header.css b/course_selection/static/less/header.css new file mode 100644 index 000000000..39eef6923 --- /dev/null +++ b/course_selection/static/less/header.css @@ -0,0 +1,77 @@ +#header { + background-color: rgba(42, 52, 65, 0.95); + width: 100%; + height: 5vh; +} +#header-inner { + height: 100%; + max-width: 100%; + margin: 0 auto; + padding: 0 12px; +} +@media screen and (min-width: 1440px) { + #header-inner { + max-width: 1440px; + } +} +#logo { + height: 100%; + float: left; +} +#logo > a { + text-decoration: none; + position: absolute; + top: 10%; + display: block; + height: 100%; + text-align: center; + font-size: 1.5em; + color: #dddddd; +} +#username { + height: 100%; + width: 10vh; + line-height: 100%; + font-size: 1.25em; +} +#username > a { + display: block; + text-decoration: none; + line-height: 5vh; + color: #999; +} +#updates { + height: 100%; + width: 25vw; + display: block; + text-decoration: none; + line-height: 5vh; + font-size: 1.25em; + color: #dddddd; + margin-left: 30vw; +} +#updates > a { + color: inherit; +} +#updates::before { + content: "*"; +} +#updates::after { + content: "*"; +} +.header-item { + color: #dddddd; + display: block; + text-decoration: none; + line-height: 5vh; + font-size: 1.25em; + margin-right: 10px; +} +.header-item > a { + color: inherit; + border-right: 1px #c8c8c8 solid; + padding-right: 10px; +} +.group { + position: relative; +} diff --git a/course_selection/static/less/main.css b/course_selection/static/less/main.css index 42046be72..e7b231723 100644 --- a/course_selection/static/less/main.css +++ b/course_selection/static/less/main.css @@ -1 +1,682 @@ -body{height:100%;width:100%;overflow-x:hidden;overflow-y:scroll;font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:300;border-radius:0;color:#404040}#wrap{background-color:#f1f2f2}#semesterContainer{height:95vh;max-width:100%;padding:0 20px;margin:0 auto}@media screen and (min-width:1440px){#semesterContainer{max-width:1440px}}#container{height:100%;width:100%}#main{height:80vh;margin-left:0}#searchColumn{height:85vh;width:25%;margin:5px 15px 0 0;padding:0 15px;background:transparent;overflow-x:hidden}#calendarColumn{height:85vh;width:75%;margin-top:5px;background-color:transparent}.edit-icon{font-size:1em;color:#555}.edit-icon:hover{cursor:pointer}.remove-icon{font-size:1em;color:#555}.remove-icon:hover{cursor:pointer;background-color:rgba(184,184,184,0.5);border-radius:2px}[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{display:none !important}.semester-tab-heading{cursor:pointer}.schedule-tab-heading{cursor:pointer}#loading-bar-spinner{display:inline;position:absolute;top:0;left:-10px}.md-tab:last-child{background-color:#00f}.md-tab:last-child:hover{color:#404040;text-decoration:none;background-color:#e7e8e9;cursor:pointer}.button-add-tab{background:none;padding:5px 10vh;border-radius:0;margin-right:0;color:#000;padding:5px 25px;outline:none !important}.button-add-tab:hover{color:#404040;text-decoration:none;background-color:#e7e8e9;cursor:pointer}.nav-tabs{border-bottom:none}.nav-tabs>li>a{padding:5px 10vh;margin-right:0;font-weight:bold;color:#000;border-style:none;border-radius:0}.nav-tabs>li>a:hover{background-color:#e7e8e9}.nav-tabs>li.active>a{color:#404040}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{border-bottom-color:transparent;border-style:none;cursor:default}.tooltip.right .tooltip-arrow{border-left-color:rgba(47,47,47,0.98)}.tooltip-inner{background-color:rgba(47,47,47,0.98)}::-webkit-scrollbar{width:.3em;height:.3em}::-webkit-scrollbar-button{background:#ccc}::-webkit-scrollbar-track-piece{background:#eee}::-webkit-scrollbar-thumb{background:#888}#header{background-color:rgba(42,52,65,0.95);width:100%;height:5vh}#header-inner{height:100%;max-width:100%;margin:0 auto;padding:0 12px}@media screen and (min-width:1440px){#header-inner{max-width:1440px}}#logo{height:100%;float:left}#logo>a{text-decoration:none;position:absolute;top:10%;display:block;height:100%;text-align:center;font-size:1.5em;color:#ddd}#username{height:100%;width:10vh;line-height:100%;font-size:1.25em}#username>a{display:block;text-decoration:none;line-height:5vh;color:#999}#updates{height:100%;width:25vw;display:block;text-decoration:none;line-height:5vh;font-size:1.25em;color:#ddd;margin-left:30vw}#updates>a{color:inherit}#updates::before{content:"*"}#updates::after{content:"*"}.header-item{color:#ddd;display:block;text-decoration:none;line-height:5vh;font-size:1.25em;margin-right:10px}.header-item>a{color:inherit;border-right:1px #c8c8c8 solid;padding-right:10px}.group{position:relative}.course-panel{min-height:5vh;width:100%;margin-top:0 !important;position:relative;overflow:visible;border-radius:0 !important;border-bottom:none}.enrolled-course-panel{border-left-width:4px;border-right-width:0;border-top-width:0;border-bottom-width:0}.course-panel-title{text-align:left;padding-left:2px;width:70%}.course-panels-container{position:relative;min-height:0;overflow-y:auto}.enrolled-courses-container{position:relative;min-height:5vh;overflow-y:auto}#searchBarContainer{background-color:#f1f2f2;height:4vh;margin-bottom:1vh;position:relative}.search-button{position:absolute;min-height:0;height:100%;min-width:0;width:10%;margin:0;border-radius:0}.search-button .fa{font-size:18px}.course-search-button{position:absolute;min-height:0;height:100%;min-width:0;width:10%;margin:0;border-radius:0;right:0}.course-search-button .fa{font-size:18px}.friend-search-button{position:absolute;min-height:0;height:100%;min-width:0;width:10%;margin:0;border-radius:0;right:10%}.friend-search-button .fa{font-size:18px}.searchBar{padding:0 0 0 10px;color:#bbb;height:4vh;font-size:13px;border-radius:4px;border-width:0;width:100%}.searchBar:focus{outline:none;color:#404040}.searchBar:focus::-webkit-input-placeholder{color:transparent}#unenrolledCourses{min-height:0;height:100%}#loading-message-container{position:relative}.loading-courses-message{display:inline;margin-left:15px}#enrolledCourses{height:100%}.course-listings{font-size:13px;margin-bottom:0}.course-panel-heading{height:6vh}.course-title{font-size:13px;margin-bottom:0}.highlighted{font-weight:bold}.course-tag{position:absolute;top:0;right:0;height:100%;width:calc(39px)}.unconfirmed{background:url('../images/stripe.png') repeat #c0c0c0;opacity:.8;border-left-color:transparent !important}.course-info{position:absolute;top:25%;right:0;height:50%;max-height:30px;overflow:visible;z-index:10}.absolute-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%}.absolute-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.rightmost-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:0}.rightmost-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.second-rightmost-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:10%}.second-rightmost-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.third-rightmost-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:20%}.third-rightmost-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.add-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:0;background-color:#008000}.add-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.minus-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:0;background-color:#f00;z-index:10}.minus-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.eval-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:20%;background-color:#ffa500;z-index:10}.eval-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.more-info-tag{cursor:pointer;position:absolute;top:0;height:100%;width:10%;right:10%;background-color:#808080;z-index:10}.more-info-tag i{top:25%;width:100%;position:absolute;text-align:center;font-size:15px;color:#fff;cursor:pointer}.tags-visible{z-index:100}.export-icon{cursor:pointer}.course-panel.ng-move,.course-panel.ng-enter,.course-panel.ng-leave{-webkit-transition:200ms linear all;transition:200ms linear all}.course-panel.ng-leave.ng-leave-active,.course-panel.ng-move,.course-panel.ng-enter{opacity:.5;left:-20vh}.course-panel.ng-leave,.course-panel.ng-move.ng-move-active,.course-panel.ng-enter.ng-enter-active{opacity:1;left:0}md-pagination-wrapper{height:38px}.md-tab{padding:6px 24px 6px 24px}md-tabs-canvas{height:38px}.fc-unthemed .fc-today{background-color:#fff}.calendar{background-color:#fff}.fc-event{border-right-style:none;border-top-style:none;border-left-width:4px;border-bottom-style:none;border-radius:0}.fc-event:hover{cursor:pointer;overflow:visible}.fc-event:hover .fc-location{visibility:visible}.fc-event .fc-location{visibility:hidden}.cal-unconfirmed{background:url('../images/stripe.png') repeat #c0c0c0;opacity:.8;border-left-color:transparent !important}.fc-toolbar{margin-bottom:0;height:0}.fc-time-grid-event .fc-time,.fc-time-grid-event .fc-title{padding:0 3px}.fc-time-grid-event .fc-title{font-weight:bold}.fc-slats td{height:2.6vh}.fc-slats .fc-minor td{border-top-style:none}.fc-axis{display:none}.qtip-recal{border-radius:4px;box-shadow:none}.modal-dialog{width:40vw}.modal-content{width:45vw}.center-modal{position:fixed;top:40%;z-index:1050;width:auto}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1030;background-color:#333;opacity:.8}.confirm-message{display:inline}.confirm-message>span{font-weight:bold}.new-schedule-name-input{border-width:1px;outline:none}.btn{border-radius:0}.inner-friends-container{position:relative;min-height:5vh;max-height:75vh;overflow-y:auto}.friend-list{height:100%}.friend-panel{min-height:5vh;width:100%;margin-top:0 !important;position:relative;overflow:visible;border-radius:0 !important;border-bottom:none} \ No newline at end of file +body { + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: scroll; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + border-radius: 0; + color: #404040; +} +#wrap { + background-color: #f1f2f2; +} +#semesterContainer { + height: 95vh; + max-width: 100%; + padding: 0 20px; + margin: 0 auto; +} +@media screen and (min-width: 1440px) { + #semesterContainer { + max-width: 1440px; + } +} +#container { + height: 100%; + width: 100%; +} +#main { + height: 80vh; + margin-left: 0px; +} +#searchColumn { + height: 85vh; + width: 25%; + margin: 5px 15px 0 0; + padding: 0 15px; + background: transparent; + overflow-x: hidden; +} +#calendarColumn { + height: 85vh; + width: 75%; + margin-top: 5px; + background-color: transparent; +} +.edit-icon { + font-size: 1em; + color: #555; +} +.edit-icon:hover { + cursor: pointer; +} +.remove-icon { + font-size: 1em; + color: #555; +} +.remove-icon:hover { + cursor: pointer; + background-color: rgba(184, 184, 184, 0.5); + border-radius: 2px; +} +[ng\:cloak], +[ng-cloak], +[data-ng-cloak], +[x-ng-cloak], +.ng-cloak, +.x-ng-cloak { + display: none !important; +} +.semester-tab-heading { + cursor: pointer; +} +.schedule-tab-heading { + cursor: pointer; +} +#loading-bar-spinner { + display: inline; + position: absolute; + top: 0; + left: -10px; +} +.md-tab:last-child { + background-color: blue; +} +.md-tab:last-child:hover { + color: #404040; + text-decoration: none; + background-color: #e7e8e9; + cursor: pointer; +} +.button-add-tab { + background: none; + padding: 5px 10vh; + border-radius: 0; + margin-right: 0; + color: black; + padding: 5px 25px; + outline: none !important; +} +.button-add-tab:hover { + color: #404040; + text-decoration: none; + background-color: #e7e8e9; + cursor: pointer; +} +.nav-tabs { + border-bottom: none; +} +.nav-tabs > li > a { + padding: 5px 10vh; + margin-right: 0; + font-weight: bold; + color: black; + border-style: none; + border-radius: 0; +} +.nav-tabs > li > a:hover { + background-color: #e7e8e9; +} +.nav-tabs > li.active > a { + color: #404040; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border-bottom-color: transparent; + border-style: none; + cursor: default; +} +/* tooltip */ +.tooltip.right .tooltip-arrow { + border-left-color: rgba(47, 47, 47, 0.98); +} +.tooltip-inner { + background-color: rgba(47, 47, 47, 0.98); +} +/* scrollbar */ +/* make it more visible (for win users) */ +::-webkit-scrollbar { + width: 0.3em; + height: 0.3em; +} +::-webkit-scrollbar-button { + background: #cccccc; +} +::-webkit-scrollbar-track-piece { + background: #eeeeee; +} +::-webkit-scrollbar-thumb { + background: #888888; +} +#header { + background-color: rgba(42, 52, 65, 0.95); + width: 100%; + height: 5vh; +} +#header-inner { + height: 100%; + max-width: 100%; + margin: 0 auto; + padding: 0 12px; +} +@media screen and (min-width: 1440px) { + #header-inner { + max-width: 1440px; + } +} +#logo { + height: 100%; + float: left; +} +#logo > a { + text-decoration: none; + position: absolute; + top: 10%; + display: block; + height: 100%; + text-align: center; + font-size: 1.5em; + color: #dddddd; +} +#username { + height: 100%; + width: 10vh; + line-height: 100%; + font-size: 1.25em; +} +#username > a { + display: block; + text-decoration: none; + line-height: 5vh; + color: #999; +} +#updates { + height: 100%; + width: 25vw; + display: block; + text-decoration: none; + line-height: 5vh; + font-size: 1.25em; + color: #dddddd; + margin-left: 30vw; +} +#updates > a { + color: inherit; +} +#updates::before { + content: "*"; +} +#updates::after { + content: "*"; +} +.header-item { + color: #dddddd; + display: block; + text-decoration: none; + line-height: 5vh; + font-size: 1.25em; + margin-right: 10px; +} +.header-item > a { + color: inherit; + border-right: 1px #c8c8c8 solid; + padding-right: 10px; +} +.group { + position: relative; +} +/* all course panels, including enrolled and search results */ +.course-panel { + min-height: 5vh; + width: 100%; + margin-top: 0px !important; + position: relative; + overflow: visible; + border-radius: 0 !important; + border-bottom: none; +} +/* enrolled panels are marked with a left bar */ +.enrolled-course-panel { + border-left-width: 4px; + border-right-width: 0; + border-top-width: 0; + border-bottom-width: 0; +} +.course-panel-title { + text-align: left; + padding-left: 2px; + width: 70%; +} +.course-panels-container { + position: relative; + min-height: 0; + overflow-y: auto; +} +.enrolled-courses-container { + position: relative; + min-height: 5vh; + overflow-y: auto; +} +#searchBarContainer { + background-color: #f1f2f2; + height: 4vh; + margin-bottom: 1vh; + position: relative; +} +.search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; +} +.search-button .fa { + font-size: 18px; +} +.course-search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; + right: 0; +} +.course-search-button .fa { + font-size: 18px; +} +.friend-search-button { + position: absolute; + min-height: 0; + height: 100%; + min-width: 0; + width: 10%; + margin: 0; + border-radius: 0; + right: 10%; +} +.friend-search-button .fa { + font-size: 18px; +} +.searchBar { + padding: 0px 0px 0px 10px; + color: #bbbbbb; + height: 4vh; + font-size: 13px; + border-radius: 4px; + border-width: 0px; + width: 100%; +} +.searchBar:focus { + outline: none; + color: #404040; +} +.searchBar:focus::-webkit-input-placeholder { + color: transparent; +} +#unenrolledCourses { + min-height: 0; + height: 100%; +} +#loading-message-container { + position: relative; +} +.loading-courses-message { + display: inline; + margin-left: 15px; +} +#enrolledCourses { + height: 100%; +} +.course-listings { + font-size: 13px; + margin-bottom: 0; +} +.course-panel-heading { + height: 6vh; +} +.course-title { + font-size: 13px; + margin-bottom: 0px; +} +.highlighted { + font-weight: bold; +} +.course-tag { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: calc(39px); +} +.unconfirmed { + background: url('../images/stripe.png') repeat #c0c0c0; + opacity: 0.8; + border-left-color: transparent !important; +} +.course-info { + position: absolute; + top: 25%; + right: 0; + height: 50%; + max-height: 30px; + overflow: visible; + z-index: 10; +} +.absolute-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; +} +.absolute-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; +} +.rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.second-rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 10%; +} +.second-rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.third-rightmost-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 20%; +} +.third-rightmost-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.add-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; + background-color: green; +} +.add-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.minus-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 0; + background-color: red; + z-index: 10; +} +.minus-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.eval-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 20%; + background-color: orange; + z-index: 10; +} +.eval-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.more-info-tag { + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + width: 10%; + right: 10%; + background-color: gray; + z-index: 10; +} +.more-info-tag i { + top: 25%; + width: 100%; + position: absolute; + text-align: center; + font-size: 15px; + color: white; + cursor: pointer; +} +.tags-visible { + z-index: 100; +} +.export-icon { + cursor: pointer; +} +.course-panel.ng-move, +.course-panel.ng-enter, +.course-panel.ng-leave { + -webkit-transition: 200ms linear all; + transition: 200ms linear all; +} +.course-panel.ng-leave.ng-leave-active, +.course-panel.ng-move, +.course-panel.ng-enter { + opacity: 0.5; + left: -20vh; +} +.course-panel.ng-leave, +.course-panel.ng-move.ng-move-active, +.course-panel.ng-enter.ng-enter-active { + opacity: 1; + left: 0; +} +md-pagination-wrapper { + height: 38px; +} +.md-tab { + padding: 6px 24px 6px 24px; +} +md-tabs-canvas { + height: 38px; +} +/* +.ng-hide-add { + -webkit-transition:0.1s linear all; + -moz-transition:0.1s linear all; + -o-transition:0.1s linear all; + transition:0.1s linear all; + opacity: 1; +} +.ng-hide-add.ng-hide-add-active { + opacity: 0; +} + +.ng-hide-remove { + -webkit-transition:0.1s linear all; + -moz-transition:0.1s linear all; + -o-transition:0.1s linear all; + transition:0.1s linear all; + opacity: 0; +} +.ng-hide-remove.ng-hide-remove-active { + opacity: 1; +} +*/ +.fc-unthemed .fc-today { + background-color: white; +} +.calendar { + background-color: white; +} +.fc-event { + border-right-style: none; + border-top-style: none; + border-left-width: 4px; + border-bottom-style: none; + border-radius: 0; +} +.fc-event:hover { + cursor: pointer; + overflow: visible; +} +.fc-event:hover .fc-location { + visibility: visible; +} +.fc-event .fc-location { + visibility: hidden; +} +.cal-unconfirmed { + background: url('../images/stripe.png') repeat #c0c0c0; + opacity: 0.8; + border-left-color: transparent !important; +} +.fc-toolbar { + margin-bottom: 0; + height: 0; +} +.fc-time-grid-event .fc-time, +.fc-time-grid-event .fc-title { + padding: 0 3px; +} +.fc-time-grid-event .fc-title { + font-weight: bold; +} +.fc-slats td { + height: 2.6vh; +} +.fc-time-grid .fc-slats .fc-minor td { + border-top-style: none; +} +.fc-axis { + display: none; +} +.qtip-recal { + border-radius: 4px; + box-shadow: none; +} +/* +.fc-ltr .fc-axis { + color: @calendar-dark-font-color; +} + +.fc-day-header { + color: @calendar-dark-font-color; +} +*/ +.modal-dialog { + width: 40vw; +} +.modal-content { + width: 45vw; +} +.center-modal { + position: fixed; + top: 40%; + z-index: 1050; + width: auto; +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; + background-color: #333333; + opacity: 0.8; +} +.confirm-message { + display: inline; +} +.confirm-message > span { + font-weight: bold; +} +.new-schedule-name-input { + border-width: 1px; + outline: none; +} +.btn { + border-radius: 0; +} +.inner-friends-container { + position: relative; + min-height: 5vh; + max-height: 75vh; + overflow-y: auto; +} +.friend-list { + height: 100%; +} +.friend-panel { + min-height: 5vh; + width: 100%; + margin-top: 0px !important; + position: relative; + overflow: visible; + border-radius: 0 !important; + border-bottom: none; +} diff --git a/course_selection/static/less/modal.css b/course_selection/static/less/modal.css new file mode 100644 index 000000000..60862b8f3 --- /dev/null +++ b/course_selection/static/less/modal.css @@ -0,0 +1,35 @@ +.modal-dialog { + width: 40vw; +} +.modal-content { + width: 45vw; +} +.center-modal { + position: fixed; + top: 40%; + z-index: 1050; + width: auto; +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; + background-color: #333333; + opacity: 0.8; +} +.confirm-message { + display: inline; +} +.confirm-message > span { + font-weight: bold; +} +.new-schedule-name-input { + border-width: 1px; + outline: none; +} +.btn { + border-radius: 0; +} diff --git a/course_selection/static/less/nice.css b/course_selection/static/less/nice.css new file mode 100644 index 000000000..d99ce4e5d --- /dev/null +++ b/course_selection/static/less/nice.css @@ -0,0 +1,152 @@ +body { + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: scroll; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + border-radius: 0; + color: #404040; +} +#wrap { + background-color: #f0f0f0; +} +#semesterContainer { + height: 95vh; + max-width: 100%; + padding: 0 20px; + margin: 0 auto; +} +@media screen and (min-width: 1440px) { + #semesterContainer { + max-width: 1440px; + } +} +#container { + height: 100%; + width: 100%; +} +#main { + height: 80vh; + margin-left: 0px; +} +#searchColumn { + height: 85vh; + width: 25%; + margin: 5px 15px 0 0; + padding: 0 15px; + background: transparent; + overflow-x: hidden; +} +#calendarColumn { + height: 85vh; + width: 75%; + margin-top: 5px; + background-color: transparent; +} +.edit-icon { + font-size: 1em; + color: #555; +} +.edit-icon:hover { + cursor: pointer; +} +.remove-icon { + font-size: 1em; + color: #555; +} +.remove-icon:hover { + cursor: pointer; + background-color: rgba(184, 184, 184, 0.5); + border-radius: 2px; +} +[ng\:cloak], +[ng-cloak], +[data-ng-cloak], +[x-ng-cloak], +.ng-cloak, +.x-ng-cloak { + display: none !important; +} +.semester-tab-heading { + cursor: pointer; +} +.schedule-tab-heading { + cursor: pointer; +} +#loading-bar-spinner { + display: inline; + position: absolute; + top: 0; + left: -10px; +} +.md-tab:last-child { + background-color: blue; +} +.md-tab:last-child:hover { + color: #404040; + text-decoration: none; + background-color: rgba(0, 0, 0, 0.08); + cursor: pointer; +} +.button-add-tab { + background: none; + padding: 5px 10vh; + border-radius: 0; + margin-right: 0; + color: black; + padding: 5px 25px; + outline: none !important; +} +.button-add-tab:hover { + color: #404040; + text-decoration: none; + background-color: rgba(0, 0, 0, 0.08); + cursor: pointer; +} +.nav-tabs { + border-bottom: none; +} +.nav-tabs > li > a { + padding: 5px 10vh; + margin-right: 0; + font-weight: bold; + color: black; + border-style: none; + border-radius: 0; +} +.nav-tabs > li > a:hover { + background-color: rgba(0, 0, 0, 0.08); +} +.nav-tabs > li.active > a { + color: #404040; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + border-bottom-color: transparent; + border-style: none; + cursor: default; +} +/* tooltip */ +.tooltip.right .tooltip-arrow { + border-left-color: rgba(47, 47, 47, 0.98); +} +.tooltip-inner { + background-color: rgba(47, 47, 47, 0.98); +} +/* scrollbar */ +/* make it more visible (for win users) */ +::-webkit-scrollbar { + width: 0.3em; + height: 0.3em; +} +::-webkit-scrollbar-button { + background: #cccccc; +} +::-webkit-scrollbar-track-piece { + background: #eeeeee; +} +::-webkit-scrollbar-thumb { + background: #888888; +} diff --git a/course_selection/static/less/queue.css b/course_selection/static/less/queue.css new file mode 100644 index 000000000..9dcdbfa82 --- /dev/null +++ b/course_selection/static/less/queue.css @@ -0,0 +1,27 @@ +.q-section-container { + display: flex; + flex-wrap: wrap; +} +.q-section { + min-width: 80px; + flex-grow: 1; + height: 25px; + font-size: 16px; + color: white; +} +.panel-body { + padding: 0; + min-height: 20px; +} +.q-course-title { + font-size: 25px; +} +.q-panel-title { + font-size: 35px; +} +#courseQueueContainer { + font-size: 13px; + text-align: center; + overflow: auto; + height: 90vh; +}