diff --git a/hourglass/client/admin/admin.css b/hourglass/client/admin/admin.css index 5c837ff..7fa59da 100644 --- a/hourglass/client/admin/admin.css +++ b/hourglass/client/admin/admin.css @@ -1,5 +1,5 @@ .content-wrapper { - background-color: #0c0c0c !important; + background-color: #232427 !important; } .content-wrapper h4 { diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 4245163..e1075b1 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -170,7 +170,7 @@ body { width: 6vh; height: calc(6vh - 1px); - border-bottom: 2px solid #333; + border-bottom: 2px solid rgba(255,255,255,0.1); position: relative; line-height: 6vh; @@ -639,7 +639,6 @@ textarea.clickModify { .clickModify.dropdown { font-size: 2.1vh; width: calc(100% - 2px); - border: 1px solid #999797; background-color: rgba(0,0,0,0.07); cursor: pointer; @@ -664,10 +663,9 @@ textarea.clickModify { } .optionHolder { - width: calc(100% - 2px); + width: 100%; margin-top: -1px; - border: 1px solid #666; border-top: none; position: absolute; @@ -687,6 +685,7 @@ textarea.clickModify { min-width: 10%; padding: 4% 7% 4% 7%; margin: 0; + box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.05); cursor: pointer; @@ -880,24 +879,20 @@ textarea.clickModify { min-height: 100%; width: 100%; height: auto; + margin-top: -6vh; position: fixed; - top: 50%; + bottom: 0; left: 50%; z-index: -1; - transform:translate(-50%, -50%); + transform:translateX(-50%); } #mainBody { width: 100%; height: 100%; position: relative; - - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; } #calendar { diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index b77dbb4..20961ee 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -56,7 +56,10 @@ {{#if currSettingMode 'manageClass'}} {{> manageClass}} {{/if}} - + + {{#if currSettingMode 'addClass'}} + {{> joinClass}} + {{/if}} diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 43826df..b8e88a5 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -40,7 +40,8 @@ Template.login.rendered = function() { }; Template.main.created = function() { - Session.set("mode", Session.get("user").preferences.mode); + Session.set("mode", Session.get("user").preferences.mode); + Session.set("classInfo", Session.get("user").classes[0]); } Template.main.rendered = function() { @@ -289,7 +290,7 @@ Template.main.helpers({ return Session.get("user").name; }, bgSrc() { // Returns background. - return "Backgrounds/" + Session.get("user").preferences.theme.background; + return "MDBackgrounds/" + "MD"+Session.get("user").preferences.theme.background; }, iconStatus(icon) { var sidebar = Session.get("sidebarMode"); @@ -755,32 +756,6 @@ 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() { - Session.set("sidebarMode", ""); - }); - } else { - $("#menuContainer").show("slide", {direction: "left"}, 250); - $("#divCenter").stop().animate({left: '36vh'}, 250); - $(".menuWrapper").fadeOut(200, function() { - Session.set("sidebarMode", sidebar); - }); - } -} - -function toggleToMode(mode) { - $("#mainBody").fadeOut(250, function() { - (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode); - $("#mainBody").fadeIn(250); - }); -} - - function openDivFade(div) { div.style.display = "block"; div.style.opacity = "0"; @@ -796,7 +771,7 @@ function closeDivFade(div) { }, 100); } -function sendData(funcName) { // Call Meteor function, and do actions after function is completed depending on function. +sendData = function(funcName) { // Call Meteor function, and do actions after function is completed depending on function. if(funcName === "editWork" || funcName === "createWork") { for(var key in serverData) { if(serverData[key] === true) serverData[key] = ""; @@ -990,7 +965,7 @@ function formReadable(input, val) { // Makes work information readable by users. } } -function startDragula() { +startDragula = function() { dragula([document.querySelector('#classesMode'), document.querySelector('#nonexistant')], { moves: function(el, container, handle) { // return handle.classList.contains("classInfo") || handle.classList.contains("mainClassName"); diff --git a/hourglass/client/menus/menus.css b/hourglass/client/menus/menus.css index 75f8d9d..af1faab 100644 --- a/hourglass/client/menus/menus.css +++ b/hourglass/client/menus/menus.css @@ -78,6 +78,7 @@ #backgroundOverlay { width: 100%; height: 100%; + z-index: 5; position: absolute; top: 0; } @@ -124,6 +125,12 @@ cursor: default; } +#settingClassWrapper h3 { + font-weight: 300; + font-style: italic; + margin-left: 5%; +} + .classBox { font-size: 1.3vw; width: 100%; @@ -165,6 +172,7 @@ margin-right: 10%; display: table-cell; text-align: left; + pointer-events: none; } .classBox .fa-times { @@ -212,10 +220,182 @@ .circleIcon .fa { font-size: 2.5vh; - margin-top: 0.25vh; + margin-top: 0.2vh; width: 6vh; height: 6vh; line-height: 6vh; text-align: center; } +#classInfoModeWrapper { + width: 100%; + display: table; +} + +#classInfoModeWrapper span { + font-size: 150%; + width: 50%; + padding: 1.5%; + background-color: rgba(0,0,0,0.05); + + text-align: center; + display: table-cell; + cursor: pointer; + + -webkit-transition: background-color 0.5s ease, border-bottom 0.25s ease; + -moz-transition: background-color 0.5s ease, border-bottom 0.25s ease; + -ms-transition: background-color 0.5s ease, border-bottom 0.25s ease; + transition: background-color 0.5s ease, border-bottom 0.25s ease; +} + +#classInfoModeWrapper span:hover { + background-color: rgba(0,0,0,0.1); +} + +#infoClassCont { + padding: 5%; +} + +#infoClassCont .infoCard { + margin: 2.5%; + padding: 2.5%; + width: 39%; + text-align: center; + display: inline-block; + position: relative; + vertical-align: top; +} + +#infoClassCont h4 { + font-size: 150%; + text-align: center; +} + +#infoClassCont span { + font-size: 170%; + margin-top: 5%; + display: block; + word-wrap: break-word; +} + +#infoClassCont img { + height: 4vh; + margin-right: 1%; + display: inline-block; + vertical-align: middle; + + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; +} + +#privacy { + text-align: center; +} + +#privacy span, #privacy .circleIcon { + margin: 1%; + display: inline-block; +} + +#infoClassCont div .fa-files-o{ + font-size: 120%; + + position: absolute; + top: 10%; + right: 5%; + + cursor: pointer; + + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease; +} + +#code { + margin: 0; + width: auto; + + background-color: rgba(255,255,255,0.3); + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + display: none; + position: absolute; + top: 37.5%; + right: 1%; +} + +#copyHolder { + visibility: hidden; + pointer-events: none; + position: absolute; +} + +.userAdder { + width: 100%; + margin-bottom: 3%; + text-align: left; + display: table; +} + +.userAdder h4 { + width: 30%; + text-align: left !important; + display: table-cell; +} + +.userAdder input { + font-size: 120%; + width: 58%; + padding: 1%; + outline: none; +} + +.userAdder .fa { + width: auto; + padding: 0 !important; + margin: 3% !important; + cursor: pointer; + + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease; +} + +.userHolder { + margin-bottom: 1%; +} + +.userDisp { + width: 31%; + padding: 1%; + background-color: rgba(0,0,0,0.3); + display: inline-block; + text-align: center; +} + +.userDisp span { + font-size: 100% !important; + margin: 0 0 0 5%!important; + text-align: left; +} + +.userDisp .fa { + font-size: 120%; + cursor: pointer; + margin-left: 4.5%; + + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease; +} + +.userDisp .fa:hover { + color: #FF1A1A; +} diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html index 16369c1..c2f34ee 100644 --- a/hourglass/client/menus/menus.html +++ b/hourglass/client/menus/menus.html @@ -175,13 +175,91 @@
-

Information

+

Class Information

+
+ General + Users +
+
+ {{#if classInfoMode 'general' 'a'}} + {{> classInfoGeneral}} + {{else}} + {{> classInfoUsers}} + {{/if}} +
+
+
+ + + + + + + + + + + + + diff --git a/hourglass/client/menus/menus.js b/hourglass/client/menus/menus.js index 06b64bd..b415580 100644 --- a/hourglass/client/menus/menus.js +++ b/hourglass/client/menus/menus.js @@ -1,4 +1,5 @@ Session.set("settingMode", "manageClass"); +Session.set("classInfoMode", "general"); var filterOpen = [false, true, true, true, true]; var sidebarMode = [null,null]; @@ -179,9 +180,281 @@ Template.sidebarOptionPlate.events({ } }); -function toggleToMode(mode) { +Template.registerHelper("classInfo", (info) => { + var thisClass = classes.findOne({_id:Session.get("classInfo")}); + var isYou = Session.equals("classInfo", Meteor.userId()); + switch (info) { + case "name": + return (isYou) ? "Personal" : thisClass.name; + case "teacher": + return (isYou) ? "None": thisClass.teacher; + case "hour": + return (isYou) ? "None" : thisClass.hour; + case "category": + return (isYou) ? "Personal" : thisClass.category[0].toUpperCase() + thisClass.category.slice(1); + case "privacy": + return (isYou) ? true : thisClass.privacy; + case "admin": + return Meteor.users.findOne({_id: (isYou) ? Meteor.userId() : thisClass.admin}); + case "code": + return (isYou || !thisClass.code) ? {exists: false} : {exists: true, code: thisClass.code}; + case "mine": + return (isYou) ? true : Meteor.userId() === thisClass.admin; + case "moderators": + if (isYou || thisClass.moderators.length === 0) return []; + var moderators = []; + thisClass.moderators.forEach(function(ele) { + var array = Meteor.users.findOne({_id: ele}); + array.delete = true; + moderators.push(array); + }); + return moderators; + case "banned": + if (isYou || thisClass.banned.length === 0) return []; + var banned = []; + thisClass.banned.forEach(function(ele) { + var array = Meteor.users.findOne({_id: ele}); + array.delete = true; + banned.push(array); + }); + return banned; + case "subscribers": + if (isYou || thisClass.subscribers.length === 0) return []; + var subscribers = []; + thisClass.subscribers.forEach(function(ele) { + subscribers.push(Meteor.users.findOne({_id: ele})); + }); + return subscribers; + case "personal": + return isYou; + } +}); + +Template.registerHelper("classInfoMode", (mode, check) => { + if(typeof check === "string") return Session.equals("classInfoMode",mode); + return (Session.equals("classInfoMode", mode)) ? Session.get("user").preferences.theme.modeHighlight + ";background-color:rgba(0,0,0,0.1);" : "rgba(0,0,0,0)"; +}) + +Template.manageClass.events({ + 'click .classBox' (event) { + var classId = event.target.getAttribute("classid"); + if(Session.equals("classInfo",classId)) return; + toggleToClassInfo(classId); + }, + 'click #classInfoModeWrapper span:first-child' () { + if(Session.equals("classInfoMode","general")) return; + toggleToClassInfoMode("general"); + }, + 'click #classInfoModeWrapper span:last-child' () { + if(Session.equals("classInfoMode","users")) return; + toggleToClassInfoMode("users"); + } +}); + +Template.joinClass.helpers({ + classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size ) ( Only your school) + var array = classes.find({ + status: {$eq: true}, + privacy: {$eq: false}, + _id: {$nin: Session.get("user").classes}, + school: {$eq: Session.get("user").school} + }, + {sort: {subscribers: -1}}, + {limit: 20} + ).fetch(); + + for (var i = 0; i < array.length; i++) { + array[i].subscribers = array[i].subscribers.length; + } + if (array.length === 0) { + Session.set("noclass", true); + } else { + Session.set("noclass", false); + } + return array; + }, + classSettings() { // Returns autocomplete array for classes. + return { + position: "bottom", + limit: 10, + rules: [{ + token: '', + collection: classes, + template: Template.classDisplay, + filter: { + privacy: false, + status: true + }, + selector: (match) => { + regex = new RegExp(match, 'i'); + return { + $or: [{ + 'name': regex + }, { + 'teacher': regex + }, { + 'hour': regex + }] + }; + } + }] + }; + }, + notsearching() { // Tells whether user is using the searchbox + return Session.get("notsearching"); + }, + autocompleteClasses() { // Returns current auto-completes for classes + return Session.get("autocompleteDivs"); + }, + notfound() { // Returns if autocomplete has no results. + return Session.get("notfound"); + }, +}); + +Template.joinClass.events({ + 'click .classBox' (event) { + var classId = event.target.getAttribute("classid"); + if(Session.equals("classInfo",classId)) return; + toggleToClassInfo(classId); + }, + 'click #classInfoModeWrapper span:first-child' () { + if(Session.equals("classInfoMode","general")) return; + toggleToClassInfoMode("general"); + }, + 'click #classInfoModeWrapper span:last-child' () { + if(Session.equals("classInfoMode","users")) return; + toggleToClassInfoMode("users"); + }, + 'input #classSearch' (event) { // Auto-complete updater + if (event.target.value.length === 0) { + Session.set("notsearching", true); + } else { + Session.set("notsearching", false); + } + Session.set("autocompleteDivs", null); + var divs = []; + try { + var items = document.getElementsByClassName("-autocomplete-container")[0].childNodes[3].childNodes; + if (items.length === 0) { // If no results. + Session.set("notfound", true); + } else { + Session.set("notfound", false); + } + for (var i = 2; i < items.length; i += 3) { // Iterate through autocomplete div. + var item = items[i].childNodes[3]; + if (Meteor.user().profile.classes.indexOf(item.getAttribute("classid")) !== -1) continue; + divs.push({ + name: item.childNodes[1].childNodes[0].nodeValue, + teacher: item.childNodes[3].childNodes[0].nodeValue, + hour: item.childNodes[5].childNodes[0].nodeValue, + subscribers: Math.floor(item.childNodes[7].childNodes[0].nodeValue.replace(",", "").length / 17), + _id: item.getAttribute("classid") + }); + } + Session.set("autocompleteDivs", divs.sort(function(a, b) { + return b.subscribers - a.subscribers + })); + } catch (err) {} + } +}); + +Template.classInfoUsers.events({ + 'click .userAdder .fa' (event) { + var type = event.target.getAttribute("user"); + var input = event.target.parentNode.childNodes[4]; + var value = input.value; + var classid = Session.get("classInfo"); + var user = Meteor.users.findOne({ + "services.google.email": value + }); + if(!user) { + sAlert.error("Invalid email!", { + effect: 'stackslide', + position: 'top', + timeout: 3000 + }); + return; + } + serverData = [ + user._id, + classid, + type, + true + ]; + sendData("trackUserInClass"); + input.value = ""; + }, + 'click .userDisp .fa' (event) { + var outerInput = event.target.parentNode.parentNode.parentNode.parentNode.childNodes[1] + var type = outerInput.childNodes[6].getAttribute("user"); + var userid = event.target.parentNode.parentNode.getAttribute("userid"); + if(!Meteor.users.findOne({_id: userid})) { + sAlert.error("Stop hacking, reload the page.", { + effect: 'stackslide', + position: 'top', + timeout: 3000 + }); + return; + } + var classid = Session.get("classInfo"); + serverData = [ + userid, + classid, + type, + false + ]; + sendData("trackUserInClass"); + } +}); + +Template.classInfoCode.events({ + 'click .fa' (event) { + document.getElementById("copyHolder").select(); + document.execCommand("copy"); + $(event.target.parentNode.childNodes[9]).fadeIn(100, function() { + setTimeout(function() { + $(event.target.parentNode.childNodes[9]).fadeOut(250); + }, 500); + }); + } +}); + +toggleToMode = function(mode) { $("#mainBody").fadeOut(250, function() { (Session.equals("sidebarMode", "option")) ? Session.set("settingMode", mode) : Session.set("mode",mode); $("#mainBody").fadeIn(250); }); } + +toggleToSidebar = function(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() { + Session.set("sidebarMode", ""); + }); + } else { + $("#menuContainer").show("slide", {direction: "left"}, 250); + $("#divCenter").stop().animate({left: '36vh'}, 250); + $(".menuWrapper").fadeOut(200, function() { + Session.set("sidebarMode", sidebar); + }); + } +} + +toggleToClassInfo = function(classId) { + $("#infoClassCont").fadeOut(250, function() { + Session.set("classInfo", classId); + Session.set("classInfoMode", "general"); + $(this).fadeIn(250); + }); +} + +toggleToClassInfoMode = function(mode) { + $("#infoClassCont").fadeOut(250, function() { + Session.set("classInfoMode", mode); + $(this).fadeIn(250); + }); +} diff --git a/hourglass/client/profile/profile.css b/hourglass/client/profile/profile.css index 52a98ca..cc5a253 100644 --- a/hourglass/client/profile/profile.css +++ b/hourglass/client/profile/profile.css @@ -470,13 +470,8 @@ } .userHolder { width: 100%; - max-height: 10vh; margin-left: 5%; padding: 2%; - padding-right: 20%; - - overflow-y: scroll; - overflow-x: hidden; } .userBox { diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js index 0c1e1f4..c21d2ac 100644 --- a/hourglass/lib/constants.js +++ b/hourglass/lib/constants.js @@ -2,11 +2,11 @@ themeColors = { "lux": { "background": "White.jpg", "mainColor": "#EEE", - "secondaryColor": "#D5D5D5", - "sidebarColor": "#65839A", + "secondaryColor": "#FEFEFE", + "sidebarColor": "#799cb8", "userDropdownColor": "#E6E6E6", - "iconHighlight": "#8695CF", - "modeHighlight": "#AA2121", + "iconHighlight": "#FFF", + "modeHighlight": "#D34949", "classCardColor":"#EBEBEB", "textColor": "#000" }, diff --git a/hourglass/public/MDBackgrounds/MDBlack.jpg b/hourglass/public/MDBackgrounds/MDBlack.jpg new file mode 100644 index 0000000..22c09d0 Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDBlack.jpg differ diff --git a/hourglass/public/MDBackgrounds/MDEarth.jpg b/hourglass/public/MDBackgrounds/MDEarth.jpg new file mode 100644 index 0000000..167967f Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDEarth.jpg differ diff --git a/hourglass/public/MDBackgrounds/MDNeonBlue.jpg b/hourglass/public/MDBackgrounds/MDNeonBlue.jpg new file mode 100644 index 0000000..781c92d Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDNeonBlue.jpg differ diff --git a/hourglass/public/MDBackgrounds/MDRedBlack.jpg b/hourglass/public/MDBackgrounds/MDRedBlack.jpg new file mode 100644 index 0000000..c218e23 Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDRedBlack.jpg differ diff --git a/hourglass/public/MDBackgrounds/MDSea.jpg b/hourglass/public/MDBackgrounds/MDSea.jpg new file mode 100644 index 0000000..50c5ff9 Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDSea.jpg differ diff --git a/hourglass/public/MDBackgrounds/MDWhite.jpg b/hourglass/public/MDBackgrounds/MDWhite.jpg new file mode 100644 index 0000000..bb8b116 Binary files /dev/null and b/hourglass/public/MDBackgrounds/MDWhite.jpg differ