From 313f79044b1c95e0b3fe72104c274fee5bbf07bb Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Thu, 3 Nov 2016 23:12:57 -0400 Subject: [PATCH] Manage class menu start layout --- hourglass/client/main/main.css | 104 +++------------ hourglass/client/main/main.html | 3 + hourglass/client/main/main.js | 104 +++------------ hourglass/client/menus/menus.css | 175 ++++++++++++++++++++++++++ hourglass/client/menus/menus.html | 132 ++++++++++++------- hourglass/client/menus/menus.js | 79 +++++++++++- hourglass/client/profile/profile.css | 87 ------------- hourglass/client/profile/profile.html | 14 --- hourglass/lib/constants.js | 8 +- 9 files changed, 380 insertions(+), 326 deletions(-) create mode 100644 hourglass/client/menus/menus.css diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index afb6c47..4245163 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -55,7 +55,7 @@ html { .formInvalid::-webkit-input-placeholder { color: red; -}s +} .formInvalid:-moz-placeholder { color: red; @@ -135,7 +135,7 @@ body { width: 36vh; z-index: 5; } -a + .noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5, .gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 { margin: 0; @@ -148,7 +148,6 @@ a .noScroll h4, .gu-mirror h4 { font-size: 1.9vh; font-weight: 200; - padding: 5%; display: inline-block; @@ -261,20 +260,9 @@ a margin-top: 6vh; } -.sectionTitle { - font-weight: 200; - font-size: 2vh; - width: 100%; - padding: 6%; - background-color: rgba(255,255,255,0.1); -} - -.sectionTitle h3 { - font-size: 2vh; -} - .mode { width: 100%; + height: 6vh; display: table; background-color: rgba(0,0,0,0.1); @@ -308,16 +296,19 @@ a .mode .fa { width: 10%; - padding: 6%; + padding: 0 6% 0 6%; + line-height: 6vh; display: table-cell; } .mode h4 { width: 74%; + line-height: 6vh; display: table-cell; } -#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks { +#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks, +#divLeftBar .fa-graduation-cap, #divLeftBar .fa-book { font-size: 2vh; } @@ -364,7 +355,7 @@ a } .sideClass span { - font-weight: 400; + font-weight: 200; margin: 0; font-size: 1.7vh; padding: 5%; @@ -407,73 +398,6 @@ a white-space: nowrap; } -#filterWrapper { - width: 100%; -} - -.openable { - font-weight: 200; - padding: 0; - - cursor: pointer; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; -} - -.openable:hover { - background-color: rgba(255,255,255,0.2); -} - -.openable h3:first-child { - font-weight: 200; - padding: 5%; - display: inline-block; - pointer-events: none; -} - -.openable .fa { - padding: 5%; - float: right; - display: inline-block; - pointer-events: none; -} - -#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child { - font-weight: 200; - padding: 5%; - display: inline-block; - pointer-events: none; -} - -#disableFilter { - font-weight: 200; - font-size: 90%; - margin-left: 10%; - padding: 4%; - background-color: rgba(255,255,255,0.2); - - display: inline-block; - cursor: pointer; - pointer-events: all; - z-index: 2; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; -} - -#disableFilter:hover { - background-color: rgba(0,0,0,0.1); -} - -#filterWrapper { - display: none; -} - .mainClass { width: 100%; padding-bottom: 1%; @@ -504,10 +428,6 @@ a cursor: pointer; } -.sectionTitle.downOffset { - margin-top: 6vh; -} - .mainClassName { font-size: 160%; white-space: normal; @@ -704,10 +624,14 @@ textarea.clickModify { } .prefText { - padding: 4%; + height: 5vh; background-color: rgba(255,255,255,0.15); } +.prefText h3 { + line-height: 5vh; +} + .noneLeft { color: red; } diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index 244f5d2..b77dbb4 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -53,6 +53,9 @@ {{/if}} + {{#if currSettingMode 'manageClass'}} + {{> manageClass}} + {{/if}} diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 3f46264..43826df 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -302,8 +302,11 @@ Template.main.helpers({ if (Session.get("requests")) return "0px"; return openValues.requests; }, - currMode(name) { // Status of display mode. - return (Session.equals("sidebarMode", "option")) ? Session.equals("settingMode", mode) : Session.equals("mode", name); + currMode(mode) { // Status of display mode. + return Session.equals("mode", mode); + }, + currSettingMode(mode) { + return Session.equals("settingMode", mode) && Session.equals("sidebarMode", "option"); }, calendarOptions() { // Settings for the calendar, including work displaying. return { @@ -386,9 +389,6 @@ Template.main.helpers({ var width = window.innerWidth * 0.85; return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;"; }, - filterOn() { - return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0; - }, highlight() { // Calendar highlight/scale option. var hoverHighlight = Session.get("classDispHover"); var typeHighlight = Session.get("typeFilterHover"); @@ -456,14 +456,14 @@ Template.main.events({ } if (!e.includes("fa-cog") && // Sidebar closing. - !e.includes("fa-bars") && - !e.includes("fa-question") && - !document.getElementById("menuContainer").contains(event.target) && - !document.getElementById("menuBar").contains(event.target)) { - if(!(e.includes("fc-day") && !e.includes("fc-past"))) { - toggleToSidebar(false); - } - + !e.includes("fa-bars") && + !e.includes("fa-question") && + !document.getElementById("menuContainer").contains(event.target) && + !document.getElementById("menuBar").contains(event.target)) { + if(!(e.includes("fc-day") && !e.includes("fc-past")) && + !Session.equals("sidebarMode", "option")) { + toggleToSidebar(false); + } } if (e === "overlay") { // Overlay closing. @@ -731,80 +731,6 @@ Template.main.events({ 'click #markReport' () { // Click report button. serverData = [Session.get("currentWork")._id, "reports"]; sendData("toggleWork"); - }, - // CLASS FILTERS - 'click .sideClass' (event) { // Click class list in sidebar. - var div = event.target; - while (div.getAttribute("classid") === null) div = div.parentNode; - var classid = div.getAttribute("classid"); - - if (Session.equals("sidebarMode","create")) { // If creating work from calendar. - var newSetting = Session.get("currentWork"); - newSetting.class = classid; - Session.set("currentWork", newSetting); - openDivFade(document.getElementsByClassName("overlay")[0]); - } else { // Normal clicking turns on filter. - var array = Session.get("classDisp"); - if (array.indexOf(classid) !== -1) { - array.splice(array.indexOf(classid), 1); - } else { - array.push(classid); - } - Session.set("classDisp", array); - } - }, - 'click .sideFilter' (event) { - var div = event.target; - while (div.getAttribute("type") === null) div = div.parentNode; - var type = div.getAttribute("type"); - - var array = Session.get("typeFilter"); - if (array.indexOf(type) !== -1) { - array.splice(array.indexOf(type), 1); - } else { - array.push(type); - } - Session.set("typeFilter", array); - }, - 'click #disableFilter' () { - Session.set("classDisp", []); - Session.set("typeFilter", []); - }, - 'mouseover .sideClass' (event) { // Highlight/scale filter on-hover. - var div; - if (event.target.className !== "sideClass") { - div = event.target.parentNode; - } else { - div = event.target; - } - while (div.getAttribute("classid") === null) div = div.parentNode; - var classid = div.getAttribute("classid"); - Session.set("classDispHover", classid); - }, - 'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave. - if (event.target.className !== "sideClass") { - var div = event.target.parentNode; - if (div.contains(event.target)) return; - } - Session.set("classDispHover", null); - }, - 'mouseover .sideFilter' (event) { - var div; - if (event.target.className !== "sideFilter") { - div = event.target.parentNode; - } else { - div = event.target; - } - while (div.getAttribute("type") === null) div = div.parentNode; - var type = div.getAttribute("type"); - Session.set("typeFilterHover", type); - }, - 'mouseleave .sideFilter' (event) { - if (event.target.className !== "sideFilter") { - var div = event.target.parentNode; - if (div.contains(event.target)) return; - } - Session.set("typeFilterHover", null); } }); @@ -830,6 +756,9 @@ function toggleOptionMenu(toggle, menu) { } function toggleToSidebar(sidebar) { + try { + $("#backgroundOverlay").fadeOut(250); + } catch(err) {} if(Session.equals("sidebarMode", sidebar) || !sidebar) { $("#menuContainer").hide("slide", {direction: "left"}, 250); $("#divCenter").stop().animate({left: '6vh'}, 250, function() { @@ -895,6 +824,7 @@ function sendData(funcName) { // Call Meteor function, and do actions after func timeout: 2500 }); } + document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; }); } diff --git a/hourglass/client/menus/menus.css b/hourglass/client/menus/menus.css new file mode 100644 index 0000000..3c3dc4e --- /dev/null +++ b/hourglass/client/menus/menus.css @@ -0,0 +1,175 @@ +#filterWrapper { + width: 100%; +} + +.sectionTitle { + font-weight: 200; + font-size: 2vh; + width: 100%; + height: 6vh; + background-color: rgba(255,255,255,0.1); +} + +.sectionTitle h3 { + font-weight: 200; + font-size: 2vh; + padding-left: 6%; + line-height: 6vh; +} + +.sectionTitle.downOffset { + margin-top: 6vh; +} + +.openable { + cursor: pointer; + + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +.openable:hover { + background-color: rgba(255,255,255,0.2); +} + +.openable h3:first-child { + font-weight: 200; + display: inline-block; + pointer-events: none; +} + +.openable .fa { + padding: 6%; + float: right; + display: inline-block; + pointer-events: none; +} + +#disableFilter { + font-weight: 200; + font-size: 90%; + margin-left: 10%; + padding: 4%; + + background-color: rgba(255,255,255,0.2); + + display: inline-block; + cursor: pointer; + line-height: normal; + pointer-events: all; + z-index: 2; + + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +#disableFilter:hover { + background-color: rgba(0,0,0,0.1); +} + +#filterWrapper { + display: none; +} + +#backgroundOverlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +#colLeft, #colRight { + height: 100%; + display: inline-block; +} + +#colLeft h2, #colRight h2 { + padding: 2% 2% 0 3%; + font-size: 4vh; + font-weight: 300; +} + +#colLeft { + width: 52%; +} + +#colRight { + border-left: 1px solid #666; + float: right; + width: 40%; + box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2); +} + +#settingClassWrapper { + width: 100%; + padding: 2% 0 0 5%; +} + +#label { + background-color: rgba(0,0,0,0.2); + box-shadow: none; + border: none; + + display: table; + cursor: default; +} + +.classBox { + font-size: 1.3vw; + width: 100%; + margin-bottom: 3%; + padding: 2%; + + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + + display: table; + table-layout: fixed; + cursor: pointer; + + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +.classBox:hover { + background-color: rgba(0,0,0,0.3); +} + +.owned { + box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.3); + -webkit-transition: background-color 0.4s ease; + -moz-transition: background-color 0.4s ease; + -ms-transition: background-color 0.4s ease; + transition: background-color 0.4s ease; +} + +.owned:hover { + background-color: rgba(0,0,0,0.3); +} + +.classText { + margin-left: .5%; + margin-right: 10%; + display: table-cell; + text-align: left; +} + +.classBox .fa-times { + display: table-cell; + width: 5%; +} + +.name { + width: 40%; +} + +.hour.classText, .subscribers.classText { + text-align: center; +} \ No newline at end of file diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html index 990d5ed..03b0663 100644 --- a/hourglass/client/menus/menus.html +++ b/hourglass/client/menus/menus.html @@ -1,44 +1,42 @@ \ No newline at end of file + + + + + diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js index 5620dff..06b64bd 100644 --- a/hourglass/client/menus/menus.js +++ b/hourglass/client/menus/menus.js @@ -23,7 +23,10 @@ Template.sidebarMenuPlate.helpers({ }); } return array; - } + }, + filterOn() { + return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0; + }, }); Template.sidebarMenuPlate.events({ @@ -62,6 +65,80 @@ Template.sidebarMenuPlate.events({ $("#classListHolder").slideUp(300); } filterOpen[2] = !filterOpen[2]; + }, + // CLASS FILTERS + 'click .sideClass' (event) { // Click class list in sidebar. + var div = event.target; + while (div.getAttribute("classid") === null) div = div.parentNode; + var classid = div.getAttribute("classid"); + + if (Session.equals("sidebarMode","create")) { // If creating work from calendar. + var newSetting = Session.get("currentWork"); + newSetting.class = classid; + Session.set("currentWork", newSetting); + openDivFade(document.getElementsByClassName("overlay")[0]); + } else { // Normal clicking turns on filter. + var array = Session.get("classDisp"); + if (array.indexOf(classid) !== -1) { + array.splice(array.indexOf(classid), 1); + } else { + array.push(classid); + } + Session.set("classDisp", array); + } + }, + 'click .sideFilter' (event) { + var div = event.target; + while (div.getAttribute("type") === null) div = div.parentNode; + var type = div.getAttribute("type"); + + var array = Session.get("typeFilter"); + if (array.indexOf(type) !== -1) { + array.splice(array.indexOf(type), 1); + } else { + array.push(type); + } + Session.set("typeFilter", array); + }, + 'click #disableFilter' () { + Session.set("classDisp", []); + Session.set("typeFilter", []); + }, + 'mouseover .sideClass' (event) { // Highlight/scale filter on-hover. + var div; + if (event.target.className !== "sideClass") { + div = event.target.parentNode; + } else { + div = event.target; + } + while (div.getAttribute("classid") === null) div = div.parentNode; + var classid = div.getAttribute("classid"); + Session.set("classDispHover", classid); + }, + 'mouseleave .sideClass' (event) { // Turn off highlight/scale filter on-leave. + if (event.target.className !== "sideClass") { + var div = event.target.parentNode; + if (div.contains(event.target)) return; + } + Session.set("classDispHover", null); + }, + 'mouseover .sideFilter' (event) { + var div; + if (event.target.className !== "sideFilter") { + div = event.target.parentNode; + } else { + div = event.target; + } + while (div.getAttribute("type") === null) div = div.parentNode; + var type = div.getAttribute("type"); + Session.set("typeFilterHover", type); + }, + 'mouseleave .sideFilter' (event) { + if (event.target.className !== "sideFilter") { + var div = event.target.parentNode; + if (div.contains(event.target)) return; + } + Session.set("typeFilterHover", null); } }); diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 4d1ba54..52a98ca 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -235,62 +235,6 @@ 100% { width: 30%; } } -#label { - margin-top: 2.5%; - margin-bottom: 2%; - - background-color: rgba(0,0,0,0.2); - box-shadow: none; - - display: table; - cursor: default; -} - -.classHolder { - width: 100%; - max-height: 41vh; - padding: 1%; - padding-right: 100%; - - display: inline-block; - - overflow-x: hidden; - overflow-y: scroll; -} - -.classHolder h3 { - font-style: italic; - font-weight: 200; - margin-left: 1%; - - color: #999; - - -webkit-filter :none; - filter: none; -} - -.classBox { - font-size: 1.3vw; - width: 94%; - margin-bottom: 3%; - padding: 2%; - - background-color: #19B3B3; - box-shadow: 2px 2px 5px 3px #666; - display: table; - table-layout: fixed; - cursor: pointer; - - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; -} - -.classBox:hover { - background-color: #138686; -} - #joinTop .fa-search { font-size: 1.3vw; margin-right: 3%; @@ -315,38 +259,7 @@ background-color: rgba(0,0,0,0.1); } -.owned { - background-color: #27646D; - -webkit-transition: background-color 0.4s ease; - -moz-transition: background-color 0.4s ease; - -ms-transition: background-color 0.4s ease; - transition: background-color 0.4s ease; -} - -.owned:hover { - background-color: #52848B; -} - -.classText { - margin-left: .5%; - margin-right: 10%; - display: table-cell; - text-align: left; -} - -.classBox .fa-times { - display: table-cell; - width: 5%; -} - -.name { - width: 40%; -} - -.hour.classText, .subscribers.classText { - text-align: center; -} #creRules { margin: 5%; diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html index d197e5a..7f921a6 100644 --- a/hourglass/client/profile/profile.html +++ b/hourglass/client/profile/profile.html @@ -292,20 +292,6 @@ - -