Manage class menu start layout
This commit is contained in:
parent
31e8ded42e
commit
313f79044b
@ -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;
|
||||
}
|
||||
|
||||
@ -53,6 +53,9 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if currSettingMode 'manageClass'}}
|
||||
{{> manageClass}}
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
175
hourglass/client/menus/menus.css
Normal file
175
hourglass/client/menus/menus.css
Normal file
@ -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;
|
||||
}
|
||||
@ -1,44 +1,42 @@
|
||||
<template name="sidebarMenuPlate">
|
||||
<div id="modes">
|
||||
<h3 class="sectionTitle">Main</h3>
|
||||
<div class="mode classes">
|
||||
<div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
|
||||
<i class="fa fa-university" aria-hidden="true"></i>
|
||||
<h4>Classes</h4>
|
||||
</div>
|
||||
<div class="mode calendar">
|
||||
<div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i>
|
||||
<h4>Calendar</h4>
|
||||
</div>
|
||||
<div class="sectionTitle downOffset">
|
||||
<h3>Main</h3>
|
||||
</div>
|
||||
<div id="filters">
|
||||
<div id="filterHead" class="sectionTitle openable">
|
||||
<h3>Filters</h3>
|
||||
{{#if filterOn}}
|
||||
<h3 id="disableFilter">Disable All</h3>
|
||||
{{/if}}
|
||||
<div class="mode classes">
|
||||
<div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
|
||||
<i class="fa fa-university" aria-hidden="true"></i>
|
||||
<h4>Classes</h4>
|
||||
</div>
|
||||
<div class="mode calendar">
|
||||
<div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
|
||||
<i class="fa fa-calendar" aria-hidden="true"></i>
|
||||
<h4>Calendar</h4>
|
||||
</div>
|
||||
<div id="filterHead" class="sectionTitle openable">
|
||||
<h3>Filters</h3>
|
||||
{{#if filterOn}}
|
||||
<h3 id="disableFilter">Disable All</h3>
|
||||
{{/if}}
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="filterWrapper">
|
||||
<div id="typeFilterWrapper" class="sectionTitle openable">
|
||||
<h3>By Type</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="filterWrapper">
|
||||
<div id="typeFilterWrapper" class="sectionTitle openable">
|
||||
<h3>By Type</h3>
|
||||
<div id="classFilterHolder">
|
||||
{{#each types}}
|
||||
{{> sideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="classFilterWrapper" class="sectionTitle openable">
|
||||
<h3>By Class</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="classFilterHolder">
|
||||
{{#each types}}
|
||||
{{> sideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="classFilterWrapper" class="sectionTitle openable">
|
||||
<h3>By Class</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="classListHolder">
|
||||
{{#each myClasses}}
|
||||
{{> sidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="classListHolder">
|
||||
{{#each myClasses}}
|
||||
{{> sidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="exportDiv" class="mode">
|
||||
@ -75,7 +73,9 @@
|
||||
</div>
|
||||
<div id="prefCont">
|
||||
<div class="prefWrapper">
|
||||
<h3 class="sectionTitle prefText">Theme:</h3>
|
||||
<div class="sectionTitle prefText">
|
||||
<h3>Theme</h3>
|
||||
</div>
|
||||
<div id="theme" class="clickModify dropdown" tabindex="1">
|
||||
<span>{{pref 'theme'}}</span>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
@ -83,7 +83,9 @@
|
||||
{{> selectOptionMenu optionName="theme"}}
|
||||
</div>
|
||||
<div class="prefWrapper">
|
||||
<h3 class="sectionTitle prefText">Default Mode:</h3>
|
||||
<div class="sectionTitle prefText">
|
||||
<h3>Default Mode</h3>
|
||||
</div>
|
||||
<div id="mode" class="clickModify dropdown" tabindex="2">
|
||||
<span>{{pref 'mode'}}</span>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
@ -91,7 +93,9 @@
|
||||
{{> selectOptionMenu optionName="mode"}}
|
||||
</div>
|
||||
<div class="prefWrapper">
|
||||
<h3 class="sectionTitle prefText">Hide Homework:</h3>
|
||||
<div class="sectionTitle prefText">
|
||||
<h3>Hide Homework</h3>
|
||||
</div>
|
||||
<div id="timeHide" class="clickModify dropdown" tabindex="3">
|
||||
<span>{{pref 'timeHide'}}</span>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
@ -99,7 +103,9 @@
|
||||
{{> selectOptionMenu optionName="timeHide"}}
|
||||
</div>
|
||||
<div class="prefWrapper">
|
||||
<h3 class="sectionTitle prefText">Hide Done:</h3>
|
||||
<div class="sectionTitle prefText">
|
||||
<h3>Hide Done</h3>
|
||||
</div>
|
||||
<div id="done" class="clickModify dropdown" tabindex="4">
|
||||
<span>{{pref 'done'}}</span>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
@ -107,7 +113,9 @@
|
||||
{{> selectOptionMenu optionName="done"}}
|
||||
</div>
|
||||
<div class="prefWrapper">
|
||||
<h3 class="sectionTitle prefText">Hide Reported:</h3>
|
||||
<div class="sectionTitle prefText">
|
||||
<h3>Hide Reported</h3>
|
||||
</div>
|
||||
<div id="hideReport" class="clickModify dropdown" tabindex="5">
|
||||
<span>{{pref 'hideReport'}}</span>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
@ -118,7 +126,9 @@
|
||||
</template>
|
||||
|
||||
<template name="sidebarRequestPlate">
|
||||
<h3 class="sectionTitle downOffset">Requests</h3>
|
||||
<div class="sectionTitle downOffset">
|
||||
<h3>Requests</h3>
|
||||
</div>
|
||||
<p class="sidebarDesc">Ask for help, submit a bug, or request a feature! We won't bite.</p>
|
||||
<textarea id="requestArea" class="restrict" rows="4" cols="50" maxlength="500" placeholder="Enter request here..."></textarea><br>
|
||||
<span id="requestRes" class="resText">{{restrict 'requestArea'}}</span>
|
||||
@ -136,4 +146,40 @@
|
||||
{{#each myClasses}}
|
||||
{{> sidebarClasses}}
|
||||
{{/each}}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template name="manageClass">
|
||||
<div id="backgroundOverlay" style="background-color:{{divColor 'secondaryColor'}}">
|
||||
<div id="colLeft">
|
||||
<h2>My Classes</h2>
|
||||
<div id="settingClassWrapper">
|
||||
<div id="label" class="classBox">
|
||||
<span class="name classText">Class Name</span>
|
||||
<span class="teacher classText">Teacher</span>
|
||||
<span class="hour classText">Hour</span>
|
||||
<span class="subscriptions classText">Members</span>
|
||||
</div>
|
||||
{{#each myClasses}}
|
||||
{{> classDisplay}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="colRight" style="background-color:{{divColor 'sidebarColor'}}">
|
||||
<h2>Information</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="classDisplay">
|
||||
<div class="classBox{{box}}" classid="{{_id}}" style="border:1px solid {{divColor 'textColor'}}">
|
||||
<span class="name classText">{{name}}</span>
|
||||
<span class="teacher classText">{{teacher}}</span>
|
||||
<span class="hour classText">{{hour}}</span>
|
||||
<span class="subscribers classText">{{subscribers}}</span>
|
||||
{{#if mine}}
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -292,20 +292,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="classDisplay">
|
||||
<div class="classBox{{box}}" classid="{{_id}}">
|
||||
<span class="name classText">{{name}}</span>
|
||||
<span class="teacher classText">{{teacher}}</span>
|
||||
<span class="hour classText">{{hour}}</span>
|
||||
<span class="subscribers classText">{{subscribers}}</span>
|
||||
{{#if mine}}
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-times" aria-hidden="true" style="visibility:hidden"></i>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="userDisplay">
|
||||
<div class="userBox" userid="{{_id}}">
|
||||
<span class="email" onclick="window.location='/user/{{email}}'">{{email}}</span>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
themeColors = {
|
||||
"lux": {
|
||||
"background": "White.jpg",
|
||||
"mainColor": "#D9D9D9",
|
||||
"secondaryColor": "#E8E8E8",
|
||||
"mainColor": "#EEE",
|
||||
"secondaryColor": "#D5D5D5",
|
||||
"sidebarColor": "#65839A",
|
||||
"userDropdownColor": "#E6E6E6",
|
||||
"iconHighlight": "#8695CF",
|
||||
@ -57,9 +57,9 @@ themeColors = {
|
||||
"atlaneon": {
|
||||
"background": "NeonBlue.jpg",
|
||||
"mainColor": "#1D1C23",
|
||||
"secondaryColor": "#1F212f",
|
||||
"secondaryColor": "#1F212F",
|
||||
"sidebarColor": "#312E32",
|
||||
"userDropdownColor": "#2e312b",
|
||||
"userDropdownColor": "#2E312B",
|
||||
"iconHighlight": "#70E6E6",
|
||||
"modeHighlight": "#70E6E6",
|
||||
"classCardColor":"#1FAAB1",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user