Finished mobile main, and mobile login
This commit is contained in:
Kenneth Jao
parent
e3c7425ecf
commit
e59229bbea
@ -47,3 +47,4 @@ mrt:jquery-ui
|
||||
rajit:bootstrap3-datepicker
|
||||
hammer:hammer@=2.0.4_1
|
||||
velocityjs:velocityjs
|
||||
mystor:device-detection
|
||||
|
||||
@ -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
|
||||
|
||||
@ -155,3 +155,81 @@ a:hover {
|
||||
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;
|
||||
}
|
||||
@ -27,3 +27,32 @@
|
||||
</div>
|
||||
{{> loginButtons}}
|
||||
</template>
|
||||
|
||||
<template name="mLogin">
|
||||
<div class="noScroll">
|
||||
<a href="https://github.com/ksjdragon/hourglass" target="_blank" class="github-corner" aria-label="View source on Github">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#B63737; color:#222328; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div id="loginHeader">
|
||||
<img src="./Logos/LogoTextSmall.png" id="loginLogo" onclick="window.location.href='/'">
|
||||
</div>
|
||||
<div id="loginBody">
|
||||
<div id="mLoginCirc"></div>
|
||||
<img src="./Logos/ColoredLogo.png" id="mLoginMidLogo">
|
||||
<div id="mLoginTexts">
|
||||
<h1>Everything in <b>One Place</b></h1>
|
||||
<h5><b>We'll</b> handle the organization, <b>you</b> handle the work.</h5>
|
||||
<div id="mLoginButton" onclick="document.getElementById('login-buttons-google').click()">Sign in!</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer id="loginFooter">
|
||||
<p id="mVersion">Version 0.2.0</p>
|
||||
</footer>
|
||||
</div>
|
||||
{{> loginButtons}}
|
||||
</template>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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++) {
|
||||
|
||||
@ -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%;
|
||||
|
||||
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;
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
<template name="mobile">
|
||||
<div class="noScroll">
|
||||
<div class="noScroll" style="background-color: {{divColor 'mainColor'}}">
|
||||
<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
|
||||
<div id="mSidebarToggle">
|
||||
<i class="fa fa-bars" style="color:{{iconStatus}}" aria-hidden="true"></i>
|
||||
<i class="fa fa-{{buttonTypeHeader}}" style="color:{{iconStatus}}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h2>{{schoolName}}</h2>
|
||||
</header>
|
||||
@ -22,58 +22,63 @@
|
||||
<h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3>
|
||||
{{/if}}
|
||||
{{#if showMode 'addWork'}}
|
||||
{{> mAddWork}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="mAddWork">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
{{#if showMode 'editWork'}}
|
||||
{{> mEditWork}}
|
||||
{{/if}}
|
||||
{{#if showMode 'viewWork'}}
|
||||
{{> mViewWork}}
|
||||
{{/if}}
|
||||
{{#if showMode 'settings'}}
|
||||
{{> mSettings}}
|
||||
{{/if}}
|
||||
<div id="mainCircleButton" class="mCircleButton">
|
||||
<i class="fa fa-{{buttonType}}" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mOverlay"></div>
|
||||
<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}">
|
||||
<div class="mSectionTitle downOffset">
|
||||
<h3>Main</h3>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
|
||||
<i class="fa fa-list-ul" aria-hidden="true"></i>
|
||||
<h4>Main Work</h4>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'done'}}"></div>
|
||||
<i class="fa fa-check-square" aria-hidden="true"></i>
|
||||
<h4>Done Work</h4>
|
||||
</div>
|
||||
<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
|
||||
<h3>Filters</h3>
|
||||
<h3 id="mDisableFilter" style="display:{{filterOn}}">Disable All</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mFilterWrapper">
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Type</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mClassFilterHolder">
|
||||
{{#each types}}
|
||||
{{> mSideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="mClassFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Class</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
{{#if select 'class'}}
|
||||
<p class="selectText">Pick a class to create work for</p>
|
||||
<div id="mClassFilterWrapper" class="mSectionTitle">
|
||||
<h3>Classes</h3>
|
||||
</div>
|
||||
<div id="mClassListHolder">
|
||||
{{#each myClasses}}
|
||||
{{> mSidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mSettings" class="mSectionTitle mSectionMode">
|
||||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if select 'type'}}
|
||||
<p class="selectText">Pick a type for your work</p>
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle">
|
||||
<h3>Types</h3>
|
||||
</div>
|
||||
<div id="mClassFilterHolder">
|
||||
{{#each types}}
|
||||
{{> mSideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if select 'options'}}
|
||||
<p class="selectText">Pick your new setting</p>
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle">
|
||||
<h3>{{optionInfo 'title'}}</h3>
|
||||
</div>
|
||||
<div id="mOptionHolder">
|
||||
{{#each optionInfo 'list'}}
|
||||
{{> mOptionCard}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if select 'none'}}
|
||||
{{> defaultSidebar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{> sAlert}}
|
||||
{{> loginButtons}}
|
||||
</template>
|
||||
|
||||
<template name="mobileClass">
|
||||
@ -94,11 +99,66 @@
|
||||
<h4 class="mDate">{{dueDate}}</h4>
|
||||
<h4 class="mClass">{{class}}</h4>
|
||||
<h4 class="mDesc">{{shortdesc}}</h4>
|
||||
<div style="color:{{doneRatio}}">
|
||||
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
|
||||
<span>{{confirmationLength}}</span>
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
|
||||
<span>{{reportLength}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="defaultSidebar">
|
||||
<div class="mSectionTitle downOffset">
|
||||
<h3>Main</h3>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'main'}}"></div>
|
||||
<i class="fa fa-list-ul" aria-hidden="true"></i>
|
||||
<h4>Main Work</h4>
|
||||
</div>
|
||||
<div class="mSectionMode">
|
||||
<div class="mStatus" style="background-color:{{modeStatus 'done'}}"></div>
|
||||
<i class="fa fa-check-square" aria-hidden="true"></i>
|
||||
<h4>Done Work</h4>
|
||||
</div>
|
||||
<div id="mFilterHead" class="mSectionTitle mOpenable downOffset">
|
||||
<h3>Filters</h3>
|
||||
<h3 id="mDisableFilter" style="display:{{filterOn}}">Disable All</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mFilterWrapper">
|
||||
<div id="mTypeFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Type</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mClassFilterHolder">
|
||||
{{#each types}}
|
||||
{{> mSideTypeFilter}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="mClassFilterWrapper" class="mSectionTitle mOpenable">
|
||||
<h3>By Class</h3>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="mClassListHolder">
|
||||
{{#each myClasses}}
|
||||
{{> mSidebarClasses}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mSettings" class="mSectionTitle mSectionMode">
|
||||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
<div id="mSignOut" class="mSectionTitle mSectionMode">
|
||||
<i class="fa fa-sign-out" aria-hidden="true"></i>
|
||||
<h3>Sign out</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mSideTypeFilter">
|
||||
<div class="mSideFilter" type="{{type}}">
|
||||
<div class="mStatus" style="background-color:{{selected}}"></div>
|
||||
@ -113,3 +173,99 @@
|
||||
<span class="mSideClassHour">{{hour}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mOptionCard">
|
||||
<div class="mSideFilter">
|
||||
<span class="mOptionText">{{alias}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mAddWork">
|
||||
<h4 class="minorHeader">Add Work</h4>
|
||||
<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name">
|
||||
<input id="class" class="mAddForm" form="class" value="{{work 'class'}}">
|
||||
<div id="dueDateCont">
|
||||
<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="typeCont">
|
||||
<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="150" placeholder="Description"></textarea>
|
||||
<div id="mRestrictText">
|
||||
<span class="resText">{{restrict 'name'}}</span>
|
||||
<span class="resText">{{restrict 'description'}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="mEditWork">
|
||||
<h4 class="minorHeader">Edit Work</h4>
|
||||
<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name" value="{{work 'name'}}">
|
||||
<input id="class" class="mAddForm" form="class" value="{{work 'class'}}" onfocus="this.blur()" readonly>
|
||||
<div id="dueDateCont">
|
||||
<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" value="{{work 'dueDate'}}" onfocus="this.blur()" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div id="typeCont">
|
||||
<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}" onfocus="this.blur()" readonly>
|
||||
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||||
</div>
|
||||
<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="150" placeholder="Description" value="{{work 'description'}}"></textarea>
|
||||
<div id="mRestrictText">
|
||||
<span class="resText">{{restrict 'name'}}</span>
|
||||
<span class="resText">{{restrict 'description'}}</span>
|
||||
</div>
|
||||
<div id="mConfirm" class="mCircleButton" style="background-color:{{work 'userConfirm'}}">
|
||||
<i class="fa fa-thumbs-up" aria-hidden="true" ></i>
|
||||
</div>
|
||||
<p id="mConfirmNum" class="mNum">{{work 'confirmations'}}</p>
|
||||
<div id="mReport" class="mCircleButton" style="background-color:{{work 'userReport'}}">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true" ></i>
|
||||
</div>
|
||||
<p id="mReportNum" class="mNum">{{work 'reports'}}</p>
|
||||
</template>
|
||||
|
||||
<template name="mViewWork">
|
||||
<h4 class="minorHeader">View Work</h4>
|
||||
<input id="name" class="mAddForm restrict" form="name" maxLength="50" placeholder="Name" value="{{work 'name'}}" onfocus="this.blur()" readonly>
|
||||
<input id="class" class="mAddForm" form="class" value="{{work 'class'}}" onfocus="this.blur()" readonly>
|
||||
<div id="dueDateCont">
|
||||
<input id="dueDate" class="mAddForm" form="dueDate" placeholder="Due Date" value="{{work 'dueDate'}}" onfocus="this.blur()" readonly>
|
||||
</div>
|
||||
<div id="typeCont">
|
||||
<input id="type" class="mAddForm" form="type" placeholder="Type" value="{{work 'type'}}" onfocus="this.blur()" readonly>
|
||||
</div>
|
||||
<textarea id="description" class="mAddForm restrict" form="description" rows="8" maxLength="150" placeholder="Description" value="{{work 'description'}}" onfocus="this.blur()" readonly></textarea>
|
||||
<div id="mRestrictText">
|
||||
<span class="resText">{{restrict 'name'}}</span>
|
||||
<span class="resText">{{restrict 'description'}}</span>
|
||||
</div>
|
||||
<div id="mConfirm" class="mCircleButton" style="background-color:{{work 'userConfirm'}}">
|
||||
<i class="fa fa-thumbs-up" aria-hidden="true" ></i>
|
||||
</div>
|
||||
<p id="mConfirmNum" class="mNum">{{work 'confirmations'}}</p>
|
||||
<div id="mReport" class="mCircleButton" style="background-color:{{work 'userReport'}}">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true" ></i>
|
||||
</div>
|
||||
<p id="mReportNum" class="mNum">{{work 'reports'}}</p>
|
||||
</template>
|
||||
|
||||
<template name="mSettings">
|
||||
<div id="theme" class="mOption">
|
||||
<p class="mOpTitle">Theme:</p>
|
||||
<p class="mOpVal">{{pref 'theme'}}</p>
|
||||
</div>
|
||||
<div id="timeHide" class="mOption">
|
||||
<p class="mOpTitle">Hide Homework:</p>
|
||||
<p class="mOpVal">{{pref 'timeHide'}}</p>
|
||||
</div>
|
||||
<div id="done" class="mOption">
|
||||
<p class="mOpTitle">Hide Done:</p>
|
||||
<p class="mOpVal">{{pref 'done'}}</p>
|
||||
</div>
|
||||
<div id="hideReport" class="mOption">
|
||||
<p class="mOpTitle">Hide Reported:</p>
|
||||
<p class="mOpVal">{{pref 'hideReport'}}</p>
|
||||
</div>
|
||||
</template>
|
||||
@ -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);
|
||||
|
||||
}
|
||||
@ -13,7 +13,7 @@ themeColors = {
|
||||
"nox": {
|
||||
"background": "Black.jpg",
|
||||
"mainColor": "#373A56",
|
||||
"secondaryColor": "#151A2B",
|
||||
"secondaryColor": "#21273D",
|
||||
"sidebarColor": "#35435D",
|
||||
"userDropdownColor": "#373A56",
|
||||
"iconHighlight": "#33ADFF",
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user