diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index 91004c8..0dab4af 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -304,7 +304,7 @@ body { .mode h4 { width: 65%; - padding-left: 9%; + padding-left: 5%; line-height: 6vh; display: table-cell; vertical-align: middle; @@ -363,6 +363,7 @@ body { font-size: 1.7vh; padding: 5%; display: table-cell; + pointer-events: none; } .sideClassName { @@ -684,9 +685,9 @@ textarea.clickModify { } .optionText { - font-size: 120%; + font-size: 120% !important; min-width: 10%; - padding: 4% 7% 4% 7%; + padding: 4% 7% 4% 7% !important; margin: 0; box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.05); @@ -798,23 +799,16 @@ textarea.clickModify { background-color: rgba(0,0,0,0.15); } -.overlay { +.overlay, #confirmOverlay { width: 100%; height: 100%; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0,0,0,0.7); display: none; position: absolute; top: 0; left: 0; z-index: 51; - - opacity: 0; - - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; } .overlayCont { @@ -824,11 +818,12 @@ textarea.clickModify { margin: auto; margin-top: 25vh; padding: 1%; - box-shadow: 2px 2px 5px 3px #666; + + box-shadow: 2px 2px 5px 1px #666; - -moz-border-radius: 30px; - -webkit-border-radius: 30px; - border-radius: 30px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; text-align: center; } @@ -1230,13 +1225,6 @@ textarea.clickModify { top: 0.5vh; right: 1.5vw; z-index: 20; - - opacity: 0; - - -webkit-transition: opacity 0.4s ease; - -moz-transition: opacity 0.4s ease; - -ms-transition: opacity 0.4s ease; - transition: opacity 0.4s ease; } #userDropdownAvatar { diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html index 20961ee..89ae751 100644 --- a/hourglass/client/main/main.html +++ b/hourglass/client/main/main.html @@ -60,6 +60,10 @@ {{#if currSettingMode 'addClass'}} {{> joinClass}} {{/if}} + + {{#if currSettingMode 'createClass'}} + {{> createClass}} + {{/if}} @@ -134,6 +138,16 @@ +
{{alias}}
+{{alias}}
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index b8e88a5..4a007c0 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -32,6 +32,7 @@ Session.set("typeFilterHover", null); // Stores current hovered type filter. Session.set("classDispHover", null); // Stores current hovered class filter. Session.set("refetchEvents", null); // Stores whether to get calendar events again. Session.set("restrictText", {}); // Stores text for comment character restriction. +Session.set("confirmText", ""); // Stores text for confirmations. // On render actions @@ -41,7 +42,7 @@ Template.login.rendered = function() { Template.main.created = function() { Session.set("mode", Session.get("user").preferences.mode); - Session.set("classInfo", Session.get("user").classes[0]); + Session.set("classInfo", null); } Template.main.rendered = function() { @@ -63,17 +64,6 @@ Template.profile.rendered = function() { document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; }; -Template.selectOptionMenu.rendered = function() { - $(".optionText").hover( - function() { - $(this).addClass("selectedOption"); - }, - function() { - $(this).removeClass("selectedOption"); - } - ); -} - // Global Helpers Template.registerHelper('adminPage', () => { @@ -124,12 +114,14 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective _id: courses[i] }); found.subscribers = found.subscribers.length; + found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;}); found.mine = true; if (found.admin === Meteor.userId()) { // If user owns this class. found.box = " owned"; found.mine = false; } } + found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected. array.push(found); @@ -265,6 +257,10 @@ Template.registerHelper('work', (value) => {// Returns the specified work value. } }); +Template.registerHelper('confirmText', () => { + return Session.get("confirmText"); +}) + // Main template helpers and events Template.main.helpers({ @@ -368,7 +364,7 @@ Template.main.helpers({ eventClick: function(event, jsEvent, view) { // On-click for work. Session.set("newWork", false); Session.set("currentWork", work.findOne({_id: event.id})); - openDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeIn(250); }, eventMouseover: function(event, jsEvent, view) { this.style.boxShadow = "inset 0 0 0 99999px rgba(255,255,255,0.2)"; @@ -468,13 +464,13 @@ Template.main.events({ } if (e === "overlay") { // Overlay closing. - closeDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeOut(250); if (!Session.get("newWork")) { document.getElementById("workComment").value = ""; } } - if (!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown")); + if (!document.getElementById("userDropdown").contains(event.target)) $("#userDropdown").fadeOut(250); }, // MAIN MENU BUTTONS 'click .fa-bars' (event) { // Click menu button. @@ -495,13 +491,28 @@ Template.main.events({ } Session.set("newWork", true); Session.set("currentWork",{class: attr, dueDate: (new Date((new Date()).valueOf() + 1000*3600*24))}); - openDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeIn(250); + }, + 'click .fa-check-circle-o' () { // Confirmation Button + sendData(confirm); + $("#confirmOverlay").fadeOut(250); + if(confirm === "changeAdmin") { + $("#changeAdminWrapper").fadeOut(250); + } else if(confirm === "deleteClass") { + Session.set("classInfo", null); + } + serverData = null; + confirm = null; + + }, + 'click .fa-times-circle-o' () { // Deny Button + $("#confirmOverlay").fadeOut(250); + serverData = null; + confirm = null; }, 'click #dropdown' (event) { if (document.getElementById("userDropdown").style.display === "block") return; - setTimeout(function() { - openDivFade(document.getElementById("userDropdown")); - }, 100); + $("#userDropdown").fadeIn(250); }, 'click .workCard' (event) { // Display work information on work card click. var workid = event.target.getAttribute("workid"); @@ -523,7 +534,7 @@ Template.main.events({ var inputs = $('#editWork .clickModify').css("cursor", "default"); } } - openDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeIn(250); }, 'click #requestSubmit' () { var area = document.getElementById("requestArea"); @@ -662,6 +673,8 @@ Template.main.events({ if(Session.get("newWork")) return; if(checkMissing()) return; sendData("editWork"); + } else if(modifyingInput.slice(0,3) === "cre") { + document.getElementById(modifyingInput).value = option; } else { var newSetting = Session.get("user"); newSetting.preferences[modifyingInput] = (function() { @@ -714,12 +727,12 @@ Template.main.events({ if(checkMissing()) return; sendData("createWork"); Session.set("newWork",false); - closeDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeOut(250); }, 'click #workDelete' () { serverData = Session.get("currentWork")._id; sendData("deleteWork"); - closeDivFade(document.getElementsByClassName("overlay")[0]); + $(".overlay").fadeOut(250); }, 'click #markDone' () { // Click done button. serverData = [Session.get("currentWork")._id, "done"]; @@ -756,21 +769,6 @@ function toggleOptionMenu(toggle, menu) { } } -function openDivFade(div) { - div.style.display = "block"; - div.style.opacity = "0"; - setTimeout(function() { - div.style.opacity = "1"; - }, 100); -} - -function closeDivFade(div) { - div.style.opacity = "0"; - setTimeout(function() { - div.style.display = "none"; - }, 100); -} - 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) { @@ -780,6 +778,7 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu Meteor.call(funcName, serverData, function(error, result) { serverData = null; currWork = Session.get("currentWork"); + if(currWork !== null && currWork._id !== undefined) { Session.set("currentWork", work.findOne({ _id: currWork._id @@ -798,6 +797,13 @@ sendData = function(funcName) { // Call Meteor function, and do actions after fu position: 'bottom-right', timeout: 2500 }); + if(funcName === "createClass") { + var inputs = document.getElementsByClassName("creInput"); + for(var i = 0; i < inputs.length; i++) { + inputs[i].value = ""; + } + toggleToMode("manageClass"); + } } document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; }); @@ -981,4 +987,4 @@ startDragula = function() { } Meteor.call("reorderClasses", final); }); -} +}; diff --git a/hourglass/client/menus/menus.css b/hourglass/client/menus/menus.css index b83b278..76e4aa7 100644 --- a/hourglass/client/menus/menus.css +++ b/hourglass/client/menus/menus.css @@ -155,6 +155,23 @@ background-color: rgba(0,0,0,0.3); } +.classBox .fa { + text-align: center; + + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease; +} + +.classBox .fa-times:hover { + color: #FF1A1A; +} + +.classBox .fa-plus:hover { + color: #85E085; +} + .owned { box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.3); -webkit-transition: background-color 0.4s ease; @@ -175,16 +192,23 @@ pointer-events: none; } -.classBox .fa-times { - display: table-cell; - width: 5%; +.classBox .fa { + font-size: 2.5vh !important; + padding: 0 !important; + display: table-cell !important; + width: 5% !important; } .name { width: 40%; } +.teacher { + width: 25%; +} + .hour.classText, .subscribers.classText { + width: 15%; text-align: center; } @@ -298,7 +322,7 @@ display: inline-block; } -#infoClassCont div .fa-files-o{ +#infoClassCont div .fa-files-o, #infoClassCont div .fa-pencil-square-o { font-size: 2vh; position: absolute; @@ -335,6 +359,59 @@ position: absolute; } +#changeAdminWrapper { + margin-top: 1%; + display: none; +} + +#changeAdminWrapper span { + font-size: 2vh; + display: inline-block !important; +} + +#changeAdmin { + width: 40%; + margin: 0 1% 0 1%; + font-size: 2vh; + padding: 1%; + outline: none; +} + +#adminSubmit { + padding: 2%; + background-color: rgba(0,0,0,0.1); + display: inline-block; + + 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; +} + +#adminSubmit:hover { + background-color: rgba(0,0,0,0.2); +} + +#deleteClass { + cursor: pointer; + float: right; +} + +#deleteClass:hover { + color: #FF1A1A; +} + +#deleteClass .fa { + margin-top: 0; + + -webkit-transition: color 0.4s ease; + -moz-transition: color 0.4s ease; + -ms-transition: color 0.4s ease; + transition: color 0.4s ease; +} + .userAdder { width: 100%; margin-bottom: 3%; @@ -400,3 +477,130 @@ .userDisp .fa:hover { color: #FF1A1A; } + +#joinTop { + margin: 2% 0 0 5%; +} + +#joinTop .-autocomplete-container { + display: none; +} + +#joinTop .fa { + font-size: 2.5vh; +} + +#classSearch, #privateCode { + font-size: 2vh; + padding: 1%; + outline: none; +} + +#private { + font-size: 2.4vh; + padding: 1.5%; + margin: 0 2% 0 2%; + + background-color: rgba(0,0,0,0.1); + + 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; +} + +#private:hover { + background-color: rgba(0,0,0,0.2); +} + +#privateCode { + width: 25%; + display: none; + + -webkit-animation: expand .7s ease 1; + animation: expand .7s ease 1; +} + +@-webkit-keyframes expand { + 0% { width: 0%; } + 100% { width: 25%; } +} + +@keyframes expand { + 0% { width: 0%; } + 100% { width: 25%; } +} + +#createWrapper { + padding: 3%; +} + +#creRules p { + padding: 0; +} + +.formDiv { + margin-left: 25%; + padding: 1% 2% 1% 2%; + width: 30%; + background-color: rgba(255,255,255,0.1); + position: relative; + display: table; +} + +.formDiv:first-child { + padding-top: 2%; +} + +.formDiv:last-child { + padding-bottom: 2%; +} + +.formDiv input { + font-size: 2vh; + width: calc(98% - 8px) !important; + padding: 1%; + margin: 1%; +} + +.formDiv .optionHolder { + width: 89%; +} + +.formDiv .-autocomplete-container { + margin: 1% 0 0 0.5%; +} + +.profTitle { + padding-left: 0 !important; +} + +#formContainer { + margin: 2%; +} + +#creSubmit { + font-weight: 200; + width: 30%; + padding: 2%; + margin-top: 2%; + margin-left: 25%; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + text-align: center; + 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; +} + +#creSubmit:hover { + background-color: rgba(0,0,0,0.1); +} diff --git a/hourglass/client/menus/menus.html b/hourglass/client/menus/menus.html index c2f34ee..6b6c2b4 100644 --- a/hourglass/client/menus/menus.html +++ b/hourglass/client/menus/menus.html @@ -141,7 +141,9 @@ -Click on a class to see its info.
{{/if}}Join Classes
Click on a class to see its info!
{{/if}}Submit a request for a class to be approved by an administrator.
+ You can have up to 8 unapproved classes at once.
**Privacy:
+ +**Category:
+ +