diff --git a/hourglass/.meteor/packages b/hourglass/.meteor/packages index ce15493..cc8e845 100644 --- a/hourglass/.meteor/packages +++ b/hourglass/.meteor/packages @@ -47,3 +47,4 @@ mrt:jquery-ui rajit:bootstrap3-datepicker hammer:hammer@=2.0.4_1 velocityjs:velocityjs +mystor:device-detection diff --git a/hourglass/.meteor/versions b/hourglass/.meteor/versions index 5805edf..48973a3 100644 --- a/hourglass/.meteor/versions +++ b/hourglass/.meteor/versions @@ -90,6 +90,7 @@ momentjs:moment@2.15.1 mongo@1.1.14 mongo-id@1.0.6 mrt:jquery-ui@1.9.2 +mystor:device-detection@0.2.0 natestrauser:select2@4.0.3 npm-mongo@2.2.11_2 oauth@1.1.12 diff --git a/hourglass/client/login/login.css b/hourglass/client/login/login.css index bfc9ee8..4dc58bd 100644 --- a/hourglass/client/login/login.css +++ b/hourglass/client/login/login.css @@ -154,4 +154,82 @@ a:hover { .github-corner .octo-arm { animation:octocat-wave 560ms ease-in-out } +} + +/* Mobile */ + +#mLoginCirc { + width: 87vw; + height: 87vw; + + background-color: rgba(255,255,255,0.1); + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + + position: absolute; + top: 22vw; + left: 6.5vw; +} + +#mLoginMidLogo { + height: 70vw; + + position: absolute; + top: 30.5vw; + left: 15vw; +} + +#mLoginTexts { + color: #FCF0F0; + width: 100%; + position: absolute; + top: 69vh; +} + +#mLoginTexts h1 { + font-size: 8vw; + font-weight: 300; + margin: 0; + padding: 0; + text-align: center; +} + +#mLoginTexts h5 { + font-size: 5vw; + font-weight: 100; + text-align: Center; +} + +#mLoginButton { + font-size: 5vw; + width: 30vw; + margin: auto; + margin-top: 3vh; + padding: 2vw; + + border: 1px solid #FCF0F0; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + text-align: center; + cursor: pointer; + + -webkit-tap-highlight-color: rgba(255,255,255,0.3); +} + +#mVersion { + font-size: 3vw; + color: #FFF !important; + margin-right: 1%; + + height: 6vh; + margin: 0; + padding-right: 3vw; + + line-height: 6vh; + display: inline-block; + float: right; } \ No newline at end of file diff --git a/hourglass/client/login/login.html b/hourglass/client/login/login.html index 0d6f713..a086c2c 100644 --- a/hourglass/client/login/login.html +++ b/hourglass/client/login/login.html @@ -27,3 +27,32 @@ {{> loginButtons}} + + + diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css index f7a0c28..7429566 100644 --- a/hourglass/client/main/main.css +++ b/hourglass/client/main/main.css @@ -31,6 +31,8 @@ html { pointer-events: all; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js index 93034f5..bcbe6fa 100644 --- a/hourglass/client/main/main.js +++ b/hourglass/client/main/main.js @@ -110,10 +110,12 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective }); Template.registerHelper('pref', (val) => { // Obtains all user preferences. - var preferences = Session.get("user").preferences; - return options[val].filter(function(entry) { - return (val === 'theme') ? _.isEqual(preferences[val], themeColors[entry.val]) : preferences[val] === entry.val; - })[0].alias; + try { + var preferences = Session.get("user").preferences; + return options[val].filter(function(entry) { + return (val === 'theme') ? _.isEqual(preferences[val], themeColors[entry.val]) : preferences[val] === entry.val; + })[0].alias; + } catch(err) {} }); Template.registerHelper('restrict', (input) => { // Returns characters left for comment length. @@ -770,11 +772,11 @@ function checkMissing() { var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; -function getReadableDate(date) { // Get readable date from Date constructor. +getReadableDate = function(date) { // Get readable date from Date constructor. return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear(); } -function toDate(date) { // Turns formatted date back to Date constructor. +toDate = function(date) { // Turns formatted date back to Date constructor. date = date.substring(date.search(",") + 2, date.length); month = months.indexOf(date.substring(0, date.search(" "))); day = date.substring(date.search(" ") + 1, date.search(",")); @@ -789,6 +791,9 @@ function formReadable(input, val) { // Makes work information readable by users. return input.typeColor = workColors[input.type]; case "name": return input.name; + case "class": + var id = input["class"]; + return (id === Meteor.userId()) ? "Personal" : classes.findOne({_id: id}).name; case "dueDate": return getReadableDate(input.dueDate); case "description": @@ -844,12 +849,12 @@ function formReadable(input, val) { // Makes work information readable by users. if (!_.contains(input.done, Meteor.userId())) return "fa-square-o"; return "fa-check-square-o"; case "userConfirm": - if (!_.contains(input.confirmations, Meteor.userId())) return ""; + if (!_.contains(input.confirmations, Meteor.userId())) return (Session.get("mobileMode")) ? "rgb(101,101,101)" : ""; return "#27A127"; case "confirmations": return input.confirmations.length; case "userReport": - if (!_.contains(input.reports, Meteor.userId())) return ""; + if (!_.contains(input.reports, Meteor.userId())) return (Session.get("mobileMode")) ? "rgb(101,101,101)" : ""; return "#FF1A1A"; case "reports": return input.reports.length; @@ -927,6 +932,7 @@ myClasses = function() { found = classes.findOne({ _id: courses[i] }); + if(found === undefined) return; found.subscribers = found.subscribers.length; found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;}); found.mine = true; @@ -1025,7 +1031,7 @@ myClasses = function() { function calendarEvents(array) { var events = []; var userClasses = array; - + if(userClasses === undefined) return; for (var i = 0; i < userClasses.length; i++) { var works = userClasses[i].thisClassWork; for (var j = 0; j < works.length; j++) { diff --git a/hourglass/client/mobile/mobile.css b/hourglass/client/mobile/mobile.css index a1f913b..d6a4d28 100644 --- a/hourglass/client/mobile/mobile.css +++ b/hourglass/client/mobile/mobile.css @@ -1,6 +1,11 @@ #mobileHeader { border-bottom: 3px solid #999; position: relative; + + -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; } #mobileHeader h2 { @@ -16,7 +21,7 @@ text-align: right; } -#mobileHeader .fa-bars { +#mobileHeader .fa { font-size: 5vw; width: 10vw; height: 10vw; @@ -41,13 +46,23 @@ border-radius: 50%; } +.selectText { + margin: 0; + margin-top: 10%; + padding: 5%; +} + #mobileBody { width: 100%; height: 92vh; margin-bottom: 10%; - background-color: #111; overflow-y: auto; overflow-x: hidden; + + -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; } .mClassContainer { @@ -90,11 +105,17 @@ vertical-align: top; } +.mobileClassContent div { + width: 30%; + display: inline-block; + text-align: right; +} + .minorHeader { font-size: 4vw !important; width: 96%; padding: 2%; - background-color: rgba(255,255,255,0.15); + background-color: #444; } .mContTop { @@ -118,32 +139,38 @@ } .mDesc { + width: 69%; font-size: 3.4vw !important; color: #BBB; } -#mAddWork { - width: 13vw; - height: 13vw; +#mainCircleButton { position: absolute; bottom: 6vw; right: 6vw; + background-color: rgb(255, 26, 26); +} + +.mCircleButton { + width: 13vw; + height: 13vw; + -moz-border-radius: 50%; -webkit-border-radius: 50%; - border-radius: 50%; + border-radius: 50%; - background-color: rgb(255, 26, 26); + -webkit-filter: drop-shadow(3px 4px 4px #111); filter: drop-shadow(3px 4px 4px #111); } -#mAddWork .fa { +.mCircleButton .fa { font-size: 5vw; margin-left: 4.25vw; margin-top: 4vw; - pointer-events: none + pointer-events: none; } .mUndo { @@ -227,6 +254,11 @@ left: -100vw; overflow-y: auto; + + -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; } .mSectionTitle { @@ -357,16 +389,131 @@ color: #CCC; } -#mSettings { +#mSettings, #mSignOut { background-color: rgba(255,255,255,0.1); } -#mSettings h3 { +#mSettings h3, #mSignOut h3 { padding: 0; } +#mSignOut { + margin-top: 0; +} + .mNoneText { font-weight: 300; font-style: italic; padding: 5%; +} + +#dueDateCont, #typeCont { + position: relative; +} + +#dueDateCont i, #typeCont i { + position: absolute; + top: calc(10% + 2vw); + right: 4%; +} + +#name, #class, #dueDate, #type, #description { + font-size: 3.7vw; + width: 95%; + padding: 2.5%; + border-bottom: 1px solid #888; + outline: none; +} + +#mRestrictText { + width: 94%; + text-align: right; + padding: 3%; +} + +#mReport { + position: absolute; + bottom: 21vw; + right: 6vw; + + background-color: rgb(101, 101, 101); + + -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; +} + +#mReport .fa { + margin-left: 4vw; +} + +#mConfirm { + position: absolute; + bottom: 36vw; + right: 6vw; + + background-color: rgb(101, 101, 101); + + -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; +} + +.mNum { + font-size: 4vw; + width: 4vw; + margin: 0; + padding: 1.5%; + + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + text-align: center; + background-color: rgba(255,255,255,0.3); +} + +#mConfirmNum { + position: absolute; + bottom: 38.5vw; + right: 21vw; +} + +#mReportNum { + position: absolute; + bottom: 23.5vw; + right: 21vw; +} + +.mOption { + font-size: 3.7vw; + width: 95%; + padding: 2.5%; + border-bottom: 1px solid #888; + background-color: rgba(255,255,255,0.05); + display: table; +} + +.mOpTitle { + margin: 0; + width: 40%; + display: table-cell; +} + +.mOpVal { + width: 30%; + display: table-cell; + text-align: right; +} + +.mOptionText { + font-size: 3.5vw; + width: 92%; + margin: 0; + padding: 5%; + padding-left: 7%; + + display: table-cell; } \ No newline at end of file diff --git a/hourglass/client/mobile/mobile.html b/hourglass/client/mobile/mobile.html index 44bc978..3bc4e72 100644 --- a/hourglass/client/mobile/mobile.html +++ b/hourglass/client/mobile/mobile.html @@ -1,8 +1,8 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/hourglass/client/mobile/mobile.js b/hourglass/client/mobile/mobile.js index ba06724..916465e 100644 --- a/hourglass/client/mobile/mobile.js +++ b/hourglass/client/mobile/mobile.js @@ -1,30 +1,118 @@ Session.set("mobileWork", []); Session.set("mobileMode", "main"); -Session.set("mobileSidebar", false); Session.set("classDisp", []); Session.set("typeFilter", []); +Session.set("restrictText", {}); +Session.set("select", "none"); +Session.set("options", null); var filterOpen = [false, true, true]; +Template.registerHelper('optionInfo', (type) => { + var op = Session.get("options") + if(type === "title") return op[1]; + if(type === "list") { + return options[op[0]]; + } +}); + Template.mobile.rendered = function() { document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; - addMobileButton($("#mAddWork")[0], 50, "color", function() { - $("#mAddWork").velocity("fadeOut", 200); - $("#mobileBody").velocity("fadeOut", { - duration: 200, - complete: function() { - Session.set("mobileMode", "addWork"); - $("#mobileBody").velocity("fadeIn", 200); - } - }); + addMobileButton($("#mainCircleButton")[0], 50, "color", function() { + if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) { + Session.set("currentWork", null); + Session.set("select", "class"); + toggleSidebar(true); + } else if(Session.equals("mobileMode","addWork") || Session.equals("mobileMode", "editWork")) { + var inputs = document.getElementsByClassName("mAddForm"); + var required = ["name", "dueDate", "class"]; + var alert = checkComplete(required, inputs); + var values = alert[2]; + if(!alert[0]) { + sAlert.error("Missing " + alert[1].replace("dueDate", "due date"), { + effect: 'stackslide', + position: 'top', + timeout: 3000 + }); + return; + } + values["class"] = Session.get("currentWork")["class"]; + values.type = Session.get("currentWork").type; + values.dueDate = toDate(values["dueDate"]); + + if(Session.equals("mobileMode","addWork")) { + serverData = values; + sendData("createWork"); + } else { + values._id = Session.get("currentWork")._id; + serverData = values; + sendData("editWork"); + } + + $("#mainCircleButton").velocity("fadeOut", 200); + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + Session.set("mobileMode", "main"); + $("#mobileBody").velocity("fadeIn", 200); + $("#mainCircleButton").velocity("fadeIn", 200); + timedPushback(); + } + }); + } }); addMobileButton($("#mSidebarToggle")[0], 0.2, "brightness", function() { - Session.set("mobileSidebar", true); - toggleSidebar(true); + if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) { + toggleSidebar(true); + } else if(Session.equals("mobileMode","addWork") || + Session.equals("mobileMode", "editWork") || + Session.equals("mobileMode", "settings")) { + $("#mainCircleButton").velocity("fadeOut", 200); + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + $("#mainCircleButton").velocity("fadeIn", 200); + $("#mobileBody").velocity("fadeIn", 200); + Session.set("mobileMode", "main"); + timedPushback(); + } + }); + } + }); + + // FOR SIDEBAR SLIDEBACK + var deltaX = 0; + var sidebar = $("#mSidebar"); + new Hammer(sidebar[0], { + domEvents: true }); + sidebar.on('panmove', function(e) { + var dX = deltaX + (e.originalEvent.gesture.deltaX); + if(dX > 0) { + $.Velocity.hook(sidebar, 'translateX', dX/70 + 'px'); + } else { + $.Velocity.hook(sidebar, 'translateX', dX + 'px'); + } + }); + + sidebar.on('panend', function(e) { + deltaX += (e.originalEvent.gesture.deltaX); + if(deltaX >= -window.innerWidth * 0.4) { + deltaX = 0; + sidebar.velocity({'translateX': "0px"}, 150); + } else { + deltaX = 0; + toggleSidebar(false); + + } + }); + timedPushback(); +} + +Template.defaultSidebar.rendered = function() { addMobileButton($(".mSectionMode")[0], 0.2, "brightness", function() { if(Session.equals("mobileMode", "main")) { toggleSidebar(false); @@ -46,9 +134,21 @@ Template.mobile.rendered = function() { }); addMobileButton($("#mSettings"), 0.1, "brightness" , function() { - console.log("Go to settings!"); // Render setting template + toggleSidebar(false); + $("#mainCircleButton").velocity("fadeOut", 200); + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + Session.set("mobileMode", "settings"); + $("#mobileBody").velocity("fadeIn", 200); + } + }); }); + addMobileButton($("#mSignOut"), 0.1, "brightness", function() { + document.getElementById('login-buttons-logout').click(); + }) + addMobileButton($("#mFilterHead")[0], 0.1, "brightness", function() { if(event.target.id === "mDisableFilter") return; if (!filterOpen[0]) { @@ -82,37 +182,28 @@ Template.mobile.rendered = function() { Session.set("classDisp", []); timedPushback(); }); - - // FOR SIDEBAR SLIDEBACK - var deltaX = 0; - var sidebar = $("#mSidebar"); - new Hammer(sidebar[0], { - domEvents: true - }); - - sidebar.on('panmove', function(e) { - var dX = deltaX + (e.originalEvent.gesture.deltaX); - if(dX > 0) { - $.Velocity.hook(jQuery(e.target), 'translateX', dX/70 + 'px'); - } else { - $.Velocity.hook(jQuery(e.target), 'translateX', dX + 'px'); - } - }); - - sidebar.on('panend', function(e) { - deltaX += (e.originalEvent.gesture.deltaX); - if(deltaX >= -window.innerWidth * 0.4) { - deltaX = 0; - jQuery(e.target).velocity({'translateX': "0px"}, 150); - } else { - deltaX = 0; - toggleSidebar(false); - - } - }); - timedPushback(); } +Template.defaultSidebar.helpers({ + modeStatus(mode) { + return (Session.equals("mobileMode", mode)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; + }, + types() { + var types = Object.keys(workColors); + var array = []; + for (var i = 0; i < types.length; i++) { + array.push({ + "type": types[i], + "typeName": types[i][0].toUpperCase() + types[i].slice(1), + "selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)" + }); + } + return array; + }, + filterOn() { + return (Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0) ? "inline-block" : "none"; + } +}) Template.mobileClass.rendered = function() { var deltaX = 0; @@ -178,20 +269,97 @@ Template.mobileClass.rendered = function() { undo[0].velocity("fadeOut", {duration: 300}); undo[1].velocity("fadeOut", {duration: 300}); }); + + addMobileButton(movable, -10, "color", function() { + Session.set("currentWork", work.findOne({_id: movable[0].getAttribute("workid")})); + + var thisWork = work.findOne({ + _id: Session.get("currentWork")._id + }); + var inRole = false; + if (thisWork === undefined) return; + var currClass = classes.findOne({ + _id: thisWork["class"] + }); + if (Meteor.userId() === thisWork.creator || + Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || + currClass.moderators.indexOf(Meteor.userId()) !== -1 || + currClass.banned.indexOf(Meteor.userId()) !== -1 + ) { + inRole = true; + } + + if(inRole) { + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + $("#mainCircleButton").velocity("fadeIn", 200); + $("#mobileBody").velocity("fadeIn", 200); + Session.set("mobileMode", "editWork"); + } + }); + } else { + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + $("#mobileBody").velocity("fadeIn", 200); + Session.set("mobileMode", "viewWork"); + } + }); + } + }); } +Template.mobileClass.helpers({ + inRole() { // Checks correct permissions. + if(Session.equals("currentWork",null)) return; + try { + var thisWork = work.findOne({ + _id: Session.get("currentWork")._id + }); + if (thisWork === undefined) return; + var currClass = classes.findOne({ + _id: thisWork["class"] + }); + if (Meteor.userId() === thisWork.creator || + Roles.userIsInRole(Meteor.userId(), ['superadmin', 'admin']) || + currClass.moderators.indexOf(Meteor.userId()) !== -1 || + currClass.banned.indexOf(Meteor.userId()) !== -1 + ) return true; + + } catch(err) {} + } +}) + Template.mSidebarClasses.rendered = function() { let div = this.firstNode; addMobileButton(div, 0.1, "brightness", function() { var classid = div.getAttribute("classid"); - var array = Session.get("classDisp"); - if (array.indexOf(classid) !== -1) { - array.splice(array.indexOf(classid), 1); - } else { - array.push(classid); - } - Session.set("classDisp", array); - timedPushback(); + if(Session.equals("select", "class")) { + var curr = Session.get("currentWork") || {}; + curr["class"] = classid; + Session.set("currentWork", curr); + toggleSidebar(false); + if(!Session.equals("mobileMode", "addWork")) { + $("#mobileBody").velocity("fadeOut", { + duration: 200, + complete: function() { + Session.set("mobileMode", "addWork"); + $("#mobileBody").velocity("fadeIn", 200); + $("#mainCircleButton").velocity("fadeIn", 200); + } + }); + } + } else { + var array = Session.get("classDisp"); + if (array.indexOf(classid) !== -1) { + array.splice(array.indexOf(classid), 1); + } else { + array.push(classid); + } + Session.set("classDisp", array); + timedPushback(); + } }); } @@ -199,14 +367,21 @@ Template.mSideTypeFilter.rendered = function() { let div = this.firstNode; addMobileButton(div, 0.1, "brightness", function() { 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); - timedPushback(); + if(Session.equals("select", "type")) { + var curr = Session.get("currentWork") || {}; + curr["type"] = type; + Session.set("currentWork", curr); + toggleSidebar(false); + } else { + var array = Session.get("typeFilter"); + if (array.indexOf(type) !== -1) { + array.splice(array.indexOf(type), 1); + } else { + array.push(type); + } + Session.set("typeFilter", array); + timedPushback(); + } }); } @@ -220,6 +395,7 @@ Template.mobile.helpers({ }, myWork(done) { var array = myClasses(); + if(array === undefined) return; var notDoneWork = []; var doneWork = []; for(var i = 0; i < array.length; i++) { @@ -251,9 +427,6 @@ Template.mobile.helpers({ showMode(mode) { return Session.equals("mobileMode", mode); }, - modeStatus(mode) { - return (Session.equals("mobileMode", mode)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; - }, types() { var types = Object.keys(workColors); var array = []; @@ -266,9 +439,6 @@ Template.mobile.helpers({ } return array; }, - filterOn() { - return (Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0) ? "inline-block" : "none"; - }, noMain() { try { return (Session.get("mobileWork")[0].length === 0) ? "block" : "none"; @@ -278,9 +448,143 @@ Template.mobile.helpers({ try { return (Session.get("mobileWork")[1].length === 0) ? "block" : "none"; } catch(err) {} + }, + buttonType() { + if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) { + return "pencil"; + } else if(Session.equals("mobileMode","addWork")) { + return "plus"; + } else if(Session.equals("mobileMode", "editWork")) { + return "floppy-o"; + } + }, + buttonTypeHeader() { + if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) { + return "bars"; + } else if(Session.equals("mobileMode","addWork") || Session.equals("mobileMode","editWork")) { + return "times"; + } else if(Session.equals("mobileMode", "settings")) { + return "arrow-left"; + } + }, + select(type) { + return Session.equals("select", type); } }); +Template.mAddWork.rendered = function() { + addMobileButton($('#dueDate'), 0.2, "brightness", function() { + $('#dueDate').datepicker({ + format: 'DD, MM d, yyyy', + clickInput: true, + startDate: 'd', + todayHighlight: true, + todayBtn: true, + autoclose: true + }); + }); + + addMobileButton($('#class'), 0.2, "brightness", function() { + Session.set("select", "class"); + toggleSidebar(true); + }); + + addMobileButton($('#type'), 0.2, "brightness", function() { + Session.set("select", "type"); + toggleSidebar(true); + }); +} + +Template.mEditWork.rendered = function() { + addMobileButton($('#dueDate'), 0.2, "brightness", function() { + $('#dueDate').datepicker({ + format: 'DD, MM d, yyyy', + clickInput: true, + startDate: 'd', + todayHighlight: true, + todayBtn: true, + autoclose: true + }); + }); + + addMobileButton($('#class'), 0.2, "brightness", function() {}); + + addMobileButton($('#type'), 0.2, "brightness", function() { + Session.set("select", "type"); + toggleSidebar(true); + }); +} + +Template.mAddWork.events({ + 'input .restrict' (event) { + var restrict = event.target.maxLength; + var chars = restrict - event.target.value.length; + var newSetting = Session.get("restrictText"); + newSetting[event.target.id] = (chars === restrict) ? "" : (chars.toString() + ((chars === 1) ? " character " : " characters ") + "left"); + newSetting.selected = event.target.id; + Session.set("restrictText", newSetting); + } +}); + +Template.mEditWork.events({ + 'input .restrict' (event) { + var restrict = event.target.maxLength; + var chars = restrict - event.target.value.length; + var newSetting = Session.get("restrictText"); + newSetting[event.target.id] = (chars === restrict) ? "" : (chars.toString() + ((chars === 1) ? " character " : " characters ") + "left"); + newSetting.selected = event.target.id; + Session.set("restrictText", newSetting); + }, + 'click #mConfirm' () { + serverData = [Session.get("currentWork")._id, "confirmations"]; + sendData("toggleWork"); + }, + 'click #mReport' () { + serverData = [Session.get("currentWork")._id, "reports"]; + sendData("toggleWork"); + } +}); + +Template.mViewWork.events({ + 'click #mConfirm' () { + serverData = [Session.get("currentWork")._id, "confirmations"]; + sendData("toggleWork"); + }, + 'click #mReport' () { + serverData = [Session.get("currentWork")._id, "reports"]; + sendData("toggleWork"); + } +}); + +Template.mSettings.rendered = function() { + var options = ["theme", "timeHide", "done", "hideReport"]; + for(let i = 0; i < options.length; i++) { + addMobileButton($("#"+options[i]), 0.05, "brightness", function() { + Session.set("select", "options"); + Session.set("options", [options[i], $("#"+options[i])[0].children[0].innerHTML.replace(":","")]); + toggleSidebar(true); + }); + } +} + +Template.mOptionCard.rendered = function() { + var div = this.firstNode; + addMobileButton(this.firstNode, 0.2, "brightness", function() { + var newSetting = Session.get("user"); + var option = div.children[0].innerHTML; + newSetting.preferences[Session.get("options")[0]] = (function() { + var value = options[Session.get("options")[0]].filter(function(entry) { + return option === entry.alias; + })[0].val; + return (Session.get("options")[0] === 'theme') ? themeColors[value] : value; + })(); + Session.set("user", newSetting); + serverData = Session.get("user"); + sendData("editProfile"); + toggleSidebar(false); + }); +} + function addMobileButton(element, lighten, animateType, completeFunction) { let add = lighten; let type = animateType; @@ -303,10 +607,12 @@ function addMobileButton(element, lighten, animateType, completeFunction) { { backgroundColorRed: colors[0] + add, backgroundColorGreen: colors[1] + add, - backgroundColorBlue: colors[2] + add, + backgroundColorBlue: colors[2] + add },100); + break; case "brightness": ele.velocity({backgroundColorAlpha: colors[3] + add},100); + break; } }); @@ -319,12 +625,13 @@ function addMobileButton(element, lighten, animateType, completeFunction) { { backgroundColorRed: colors[0], backgroundColorGreen: colors[1], - backgroundColorBlue: colors[2], + backgroundColorBlue: colors[2] }, { duration: 200, complete: execute() }); + break; case "brightness": ele.velocity( { @@ -334,6 +641,7 @@ function addMobileButton(element, lighten, animateType, completeFunction) { duration: 200, complete: execute() }); + break; } }); @@ -352,10 +660,12 @@ function addMobileButton(element, lighten, animateType, completeFunction) { { backgroundColorRed: colors[0], backgroundColorGreen: colors[1], - backgroundColorBlue: colors[2], + backgroundColorBlue: colors[2] },200); + break; case "brightness": ele.velocity({backgroundColorAlpha: colors[3]},200); + break; } }); } @@ -374,40 +684,27 @@ function toggleSidebar(open) { duration: 300, complete: function() { $.Velocity.hook($("#mSidebar"), 'translateX', '0px'); + Session.set("select", "none"); } }); } } function timedPushback() { + var fadeTime = 10; $(".mClassContainer").velocity("stop", true); - if($(".mClassContainer").length === 0) { - $(".mNoneText").velocity("fadeOut", { - duration: 10, - complete: function() { - $(".mClassContainer").velocity({left: "-150vw"}, 0); - $(".mClassContainer").velocity("fadeIn", 0); - var i = 0; - var timer = setInterval(function() { - $($(".mClassContainer")[i]).velocity({left: ""}); - if(i === $(".mClassContainer").length - 1) clearInterval(timer); - i += 1; - }, 100); - } - }); - } else { - $(".mClassContainer").velocity("fadeOut", { - duration: 10, - complete: function() { - $(".mClassContainer").velocity({left: "-150vw"}, 0); - $(".mClassContainer").velocity("fadeIn", 0); - var i = 0; - var timer = setInterval(function() { - $($(".mClassContainer")[i]).velocity({left: ""}); - if(i === $(".mClassContainer").length - 1) clearInterval(timer); - i += 1; - }, 100); - } - }); - } + $(".mNoneText").velocity("fadeOut", fadeTime); + $(".mClassContainer").velocity("fadeOut", fadeTime); + setTimeout(function() { + $(".mClassContainer").velocity({left: "-150vw"}, 0); + $(".mClassContainer").velocity("fadeIn", 0); + $(".mClassContainer").velocity({opacity: 1}, 0); + var i = 0; + var timer = setInterval(function() { + $($(".mClassContainer")[i]).velocity({left: ""}); + if(i === $(".mClassContainer").length - 1) clearInterval(timer); + i += 1; + }, 100); + }, fadeTime); + } \ No newline at end of file diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js index 0f14c20..1e09204 100644 --- a/hourglass/lib/constants.js +++ b/hourglass/lib/constants.js @@ -13,7 +13,7 @@ themeColors = { "nox": { "background": "Black.jpg", "mainColor": "#373A56", - "secondaryColor": "#151A2B", + "secondaryColor": "#21273D", "sidebarColor": "#35435D", "userDropdownColor": "#373A56", "iconHighlight": "#33ADFF", diff --git a/hourglass/lib/router.js b/hourglass/lib/router.js index 9f683fe..871cd9a 100644 --- a/hourglass/lib/router.js +++ b/hourglass/lib/router.js @@ -30,8 +30,13 @@ Router.route('/', { this.redirect('/profile'); } else { Session.set("user", Meteor.user().profile); - //this.render("main"); - this.render("mobile"); + if(Meteor.Device.isPhone()) { + this.render("mobile"); + } else { + this.render("main"); + } + + } } } @@ -40,7 +45,11 @@ Router.route('/', { Router.route('/login', { action: function() { if (!Meteor.userId()) { - this.render("login"); + if(Meteor.Device.isPhone()) { + this.render("mLogin"); + } else { + this.render("login"); + } } else if (!completeProfile()) { this.redirect('/profile'); } else {