kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished mobile main, and mobile login

Browse Source
This commit is contained in:
Kenneth Jao 2017-04-08 00:07:00 -04:00
parent e3c7425ecf
commit e59229bbea
11 changed files with 889 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hourglass/.meteor/packages
View File

@ -47,3 +47,4 @@ mrt:jquery-ui
rajit:bootstrap3-datepicker rajit:bootstrap3-datepicker
hammer:hammer@=2.0.4_1 hammer:hammer@=2.0.4_1
velocityjs:velocityjs velocityjs:velocityjs
mystor:device-detection

1
hourglass/.meteor/versions
View File

@ -90,6 +90,7 @@ momentjs:moment@2.15.1
mongo@1.1.14 mongo@1.1.14
mongo-id@1.0.6 mongo-id@1.0.6
mrt:jquery-ui@1.9.2 mrt:jquery-ui@1.9.2
mystor:device-detection@0.2.0
natestrauser:select2@4.0.3 natestrauser:select2@4.0.3
npm-mongo@2.2.11_2 npm-mongo@2.2.11_2
oauth@1.1.12 oauth@1.1.12

78
hourglass/client/login/login.css
View File

@ -154,4 +154,82 @@ a:hover {
.github-corner .octo-arm { .github-corner .octo-arm {
animation:octocat-wave 560ms ease-in-out 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;
} }

29
hourglass/client/login/login.html
View File

@ -27,3 +27,32 @@
</div> </div>
{{> loginButtons}} {{> loginButtons}}
</template> </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>

2
hourglass/client/main/main.css
View File

@ -31,6 +31,8 @@ html {
pointer-events: all; pointer-events: all;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transition: color 0.5s ease; -webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease; -moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease; -ms-transition: color 0.5s ease;

24
hourglass/client/main/main.js
View File

@ -110,10 +110,12 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
}); });
Template.registerHelper('pref', (val) => { // Obtains all user preferences. Template.registerHelper('pref', (val) => { // Obtains all user preferences.
var preferences = Session.get("user").preferences; try {
return options[val].filter(function(entry) { var preferences = Session.get("user").preferences;
return (val === 'theme') ? _.isEqual(preferences[val], themeColors[entry.val]) : preferences[val] === entry.val; return options[val].filter(function(entry) {
})[0].alias; 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. 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 days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 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(); 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); date = date.substring(date.search(",") + 2, date.length);
month = months.indexOf(date.substring(0, date.search(" "))); month = months.indexOf(date.substring(0, date.search(" ")));
day = date.substring(date.search(" ") + 1, 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]; return input.typeColor = workColors[input.type];
case "name": case "name":
return input.name; return input.name;
case "class":
var id = input["class"];
return (id === Meteor.userId()) ? "Personal" : classes.findOne({_id: id}).name;
case "dueDate": case "dueDate":
return getReadableDate(input.dueDate); return getReadableDate(input.dueDate);
case "description": 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"; if (!_.contains(input.done, Meteor.userId())) return "fa-square-o";
return "fa-check-square-o"; return "fa-check-square-o";
case "userConfirm": 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"; return "#27A127";
case "confirmations": case "confirmations":
return input.confirmations.length; return input.confirmations.length;
case "userReport": 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"; return "#FF1A1A";
case "reports": case "reports":
return input.reports.length; return input.reports.length;
@ -927,6 +932,7 @@ myClasses = function() {
found = classes.findOne({ found = classes.findOne({
_id: courses[i] _id: courses[i]
}); });
if(found === undefined) return;
found.subscribers = found.subscribers.length; found.subscribers = found.subscribers.length;
found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;}); found.teachershort = found.teacher.split(" ").slice(1).reduce(function(a,b) { return a+ " " + b;});
found.mine = true; found.mine = true;
@ -1025,7 +1031,7 @@ myClasses = function() {
function calendarEvents(array) { function calendarEvents(array) {
var events = []; var events = [];
var userClasses = array; var userClasses = array;
if(userClasses === undefined) return;
for (var i = 0; i < userClasses.length; i++) { for (var i = 0; i < userClasses.length; i++) {
var works = userClasses[i].thisClassWork; var works = userClasses[i].thisClassWork;
for (var j = 0; j < works.length; j++) { for (var j = 0; j < works.length; j++) {

171
hourglass/client/mobile/mobile.css
View File

@ -1,6 +1,11 @@
#mobileHeader { #mobileHeader {
border-bottom: 3px solid #999; border-bottom: 3px solid #999;
position: relative; 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 { #mobileHeader h2 {
@ -16,7 +21,7 @@
text-align: right; text-align: right;
} }
#mobileHeader .fa-bars { #mobileHeader .fa {
font-size: 5vw; font-size: 5vw;
width: 10vw; width: 10vw;
height: 10vw; height: 10vw;
@ -41,13 +46,23 @@
border-radius: 50%; border-radius: 50%;
} }
.selectText {
margin: 0;
margin-top: 10%;
padding: 5%;
}
#mobileBody { #mobileBody {
width: 100%; width: 100%;
height: 92vh; height: 92vh;
margin-bottom: 10%; margin-bottom: 10%;
background-color: #111;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; 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 { .mClassContainer {
@ -90,11 +105,17 @@
vertical-align: top; vertical-align: top;
} }
.mobileClassContent div {
width: 30%;
display: inline-block;
text-align: right;
}
.minorHeader { .minorHeader {
font-size: 4vw !important; font-size: 4vw !important;
width: 96%; width: 96%;
padding: 2%; padding: 2%;
background-color: rgba(255,255,255,0.15); background-color: #444;
} }
.mContTop { .mContTop {
@ -118,32 +139,38 @@
} }
.mDesc { .mDesc {
width: 69%;
font-size: 3.4vw !important; font-size: 3.4vw !important;
color: #BBB; color: #BBB;
} }
#mAddWork { #mainCircleButton {
width: 13vw;
height: 13vw;
position: absolute; position: absolute;
bottom: 6vw; bottom: 6vw;
right: 6vw; right: 6vw;
background-color: rgb(255, 26, 26);
}
.mCircleButton {
width: 13vw;
height: 13vw;
-moz-border-radius: 50%; -moz-border-radius: 50%;
-webkit-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); -webkit-filter: drop-shadow(3px 4px 4px #111);
filter: drop-shadow(3px 4px 4px #111); filter: drop-shadow(3px 4px 4px #111);
} }
#mAddWork .fa { .mCircleButton .fa {
font-size: 5vw; font-size: 5vw;
margin-left: 4.25vw; margin-left: 4.25vw;
margin-top: 4vw; margin-top: 4vw;
pointer-events: none pointer-events: none;
} }
.mUndo { .mUndo {
@ -227,6 +254,11 @@
left: -100vw; left: -100vw;
overflow-y: auto; 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 { .mSectionTitle {
@ -357,16 +389,131 @@
color: #CCC; color: #CCC;
} }
#mSettings { #mSettings, #mSignOut {
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1);
} }
#mSettings h3 { #mSettings h3, #mSignOut h3 {
padding: 0; padding: 0;
} }
#mSignOut {
margin-top: 0;
}
.mNoneText { .mNoneText {
font-weight: 300; font-weight: 300;
font-style: italic; font-style: italic;
padding: 5%; 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;
} }

240
hourglass/client/mobile/mobile.html
View File

@ -1,8 +1,8 @@
<template name="mobile"> <template name="mobile">
<div class="noScroll"> <div class="noScroll" style="background-color: {{divColor 'mainColor'}}">
<header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}"> <header id="mobileHeader" style="background-color:{{divColor 'mainColor'}}">
<div id="mSidebarToggle"> <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> </div>
<h2>{{schoolName}}</h2> <h2>{{schoolName}}</h2>
</header> </header>
@ -22,58 +22,63 @@
<h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3> <h3 class="mNoneText" style="display:{{noDone}}">You... should really get to work.</h3>
{{/if}} {{/if}}
{{#if showMode 'addWork'}} {{#if showMode 'addWork'}}
{{> mAddWork}}
{{/if}} {{/if}}
</div> {{#if showMode 'editWork'}}
<div id="mAddWork"> {{> mEditWork}}
<i class="fa fa-pencil" aria-hidden="true"></i> {{/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>
<div id="mOverlay"></div> <div id="mOverlay"></div>
<div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}"> <div id="mSidebar" style="background-color:{{divColor 'sidebarColor'}};border-left:3vw solid {{divColor 'sidebarColor'}}">
<div class="mSectionTitle downOffset"> {{#if select 'class'}}
<h3>Main</h3> <p class="selectText">Pick a class to create work for</p>
</div> <div id="mClassFilterWrapper" class="mSectionTitle">
<div class="mSectionMode"> <h3>Classes</h3>
<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>
<div id="mClassListHolder"> <div id="mClassListHolder">
{{#each myClasses}} {{#each myClasses}}
{{> mSidebarClasses}} {{> mSidebarClasses}}
{{/each}} {{/each}}
</div> </div>
</div> {{/if}}
<div id="mSettings" class="mSectionTitle mSectionMode"> {{#if select 'type'}}
<i class="fa fa-cog" aria-hidden="true"></i> <p class="selectText">Pick a type for your work</p>
<h3>Settings</h3> <div id="mTypeFilterWrapper" class="mSectionTitle">
</div> <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>
</div> </div>
{{> sAlert}}
{{> loginButtons}}
</template> </template>
<template name="mobileClass"> <template name="mobileClass">
@ -94,11 +99,66 @@
<h4 class="mDate">{{dueDate}}</h4> <h4 class="mDate">{{dueDate}}</h4>
<h4 class="mClass">{{class}}</h4> <h4 class="mClass">{{class}}</h4>
<h4 class="mDesc">{{shortdesc}}</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> </div>
</div> </div>
</template> </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"> <template name="mSideTypeFilter">
<div class="mSideFilter" type="{{type}}"> <div class="mSideFilter" type="{{type}}">
<div class="mStatus" style="background-color:{{selected}}"></div> <div class="mStatus" style="background-color:{{selected}}"></div>
@ -113,3 +173,99 @@
<span class="mSideClassHour">{{hour}}</span> <span class="mSideClassHour">{{hour}}</span>
</div> </div>
</template> </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>

489
hourglass/client/mobile/mobile.js
View File

@ -1,30 +1,118 @@
Session.set("mobileWork", []); Session.set("mobileWork", []);
Session.set("mobileMode", "main"); Session.set("mobileMode", "main");
Session.set("mobileSidebar", false);
Session.set("classDisp", []); Session.set("classDisp", []);
Session.set("typeFilter", []); Session.set("typeFilter", []);
Session.set("restrictText", {});
Session.set("select", "none");
Session.set("options", null);
var filterOpen = [false, true, true]; 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() { Template.mobile.rendered = function() {
document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor; document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
addMobileButton($("#mAddWork")[0], 50, "color", function() { addMobileButton($("#mainCircleButton")[0], 50, "color", function() {
$("#mAddWork").velocity("fadeOut", 200); if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) {
$("#mobileBody").velocity("fadeOut", { Session.set("currentWork", null);
duration: 200, Session.set("select", "class");
complete: function() { toggleSidebar(true);
Session.set("mobileMode", "addWork"); } else if(Session.equals("mobileMode","addWork") || Session.equals("mobileMode", "editWork")) {
$("#mobileBody").velocity("fadeIn", 200); 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() { addMobileButton($("#mSidebarToggle")[0], 0.2, "brightness", function() {
Session.set("mobileSidebar", true); if(Session.equals("mobileMode","main") || Session.equals("mobileMode","done")) {
toggleSidebar(true); 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() { addMobileButton($(".mSectionMode")[0], 0.2, "brightness", function() {
if(Session.equals("mobileMode", "main")) { if(Session.equals("mobileMode", "main")) {
toggleSidebar(false); toggleSidebar(false);
@ -46,9 +134,21 @@ Template.mobile.rendered = function() {
}); });
addMobileButton($("#mSettings"), 0.1, "brightness" , 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() { addMobileButton($("#mFilterHead")[0], 0.1, "brightness", function() {
if(event.target.id === "mDisableFilter") return; if(event.target.id === "mDisableFilter") return;
if (!filterOpen[0]) { if (!filterOpen[0]) {
@ -82,37 +182,28 @@ Template.mobile.rendered = function() {
Session.set("classDisp", []); Session.set("classDisp", []);
timedPushback(); 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() { Template.mobileClass.rendered = function() {
var deltaX = 0; var deltaX = 0;
@ -178,20 +269,97 @@ Template.mobileClass.rendered = function() {
undo[0].velocity("fadeOut", {duration: 300}); undo[0].velocity("fadeOut", {duration: 300});
undo[1].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() { Template.mSidebarClasses.rendered = function() {
let div = this.firstNode; let div = this.firstNode;
addMobileButton(div, 0.1, "brightness", function() { addMobileButton(div, 0.1, "brightness", function() {
var classid = div.getAttribute("classid"); var classid = div.getAttribute("classid");
var array = Session.get("classDisp"); if(Session.equals("select", "class")) {
if (array.indexOf(classid) !== -1) { var curr = Session.get("currentWork") || {};
array.splice(array.indexOf(classid), 1); curr["class"] = classid;
} else { Session.set("currentWork", curr);
array.push(classid); toggleSidebar(false);
} if(!Session.equals("mobileMode", "addWork")) {
Session.set("classDisp", array); $("#mobileBody").velocity("fadeOut", {
timedPushback(); 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; let div = this.firstNode;
addMobileButton(div, 0.1, "brightness", function() { addMobileButton(div, 0.1, "brightness", function() {
var type = div.getAttribute("type"); var type = div.getAttribute("type");
var array = Session.get("typeFilter"); if(Session.equals("select", "type")) {
if (array.indexOf(type) !== -1) { var curr = Session.get("currentWork") || {};
array.splice(array.indexOf(type), 1); curr["type"] = type;
} else { Session.set("currentWork", curr);
array.push(type); toggleSidebar(false);
} } else {
Session.set("typeFilter", array); var array = Session.get("typeFilter");
timedPushback(); 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) { myWork(done) {
var array = myClasses(); var array = myClasses();
if(array === undefined) return;
var notDoneWork = []; var notDoneWork = [];
var doneWork = []; var doneWork = [];
for(var i = 0; i < array.length; i++) { for(var i = 0; i < array.length; i++) {
@ -251,9 +427,6 @@ Template.mobile.helpers({
showMode(mode) { showMode(mode) {
return Session.equals("mobileMode", 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() { types() {
var types = Object.keys(workColors); var types = Object.keys(workColors);
var array = []; var array = [];
@ -266,9 +439,6 @@ Template.mobile.helpers({
} }
return array; return array;
}, },
filterOn() {
return (Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0) ? "inline-block" : "none";
},
noMain() { noMain() {
try { try {
return (Session.get("mobileWork")[0].length === 0) ? "block" : "none"; return (Session.get("mobileWork")[0].length === 0) ? "block" : "none";
@ -278,9 +448,143 @@ Template.mobile.helpers({
try { try {
return (Session.get("mobileWork")[1].length === 0) ? "block" : "none"; return (Session.get("mobileWork")[1].length === 0) ? "block" : "none";
} catch(err) {} } 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) { function addMobileButton(element, lighten, animateType, completeFunction) {
let add = lighten; let add = lighten;
let type = animateType; let type = animateType;
@ -303,10 +607,12 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
{ {
backgroundColorRed: colors[0] + add, backgroundColorRed: colors[0] + add,
backgroundColorGreen: colors[1] + add, backgroundColorGreen: colors[1] + add,
backgroundColorBlue: colors[2] + add, backgroundColorBlue: colors[2] + add
},100); },100);
break;
case "brightness": case "brightness":
ele.velocity({backgroundColorAlpha: colors[3] + add},100); ele.velocity({backgroundColorAlpha: colors[3] + add},100);
break;
} }
}); });
@ -319,12 +625,13 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
{ {
backgroundColorRed: colors[0], backgroundColorRed: colors[0],
backgroundColorGreen: colors[1], backgroundColorGreen: colors[1],
backgroundColorBlue: colors[2], backgroundColorBlue: colors[2]
}, },
{ {
duration: 200, duration: 200,
complete: execute() complete: execute()
}); });
break;
case "brightness": case "brightness":
ele.velocity( ele.velocity(
{ {
@ -334,6 +641,7 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
duration: 200, duration: 200,
complete: execute() complete: execute()
}); });
break;
} }
}); });
@ -352,10 +660,12 @@ function addMobileButton(element, lighten, animateType, completeFunction) {
{ {
backgroundColorRed: colors[0], backgroundColorRed: colors[0],
backgroundColorGreen: colors[1], backgroundColorGreen: colors[1],
backgroundColorBlue: colors[2], backgroundColorBlue: colors[2]
},200); },200);
break;
case "brightness": case "brightness":
ele.velocity({backgroundColorAlpha: colors[3]},200); ele.velocity({backgroundColorAlpha: colors[3]},200);
break;
} }
}); });
} }
@ -374,40 +684,27 @@ function toggleSidebar(open) {
duration: 300, duration: 300,
complete: function() { complete: function() {
$.Velocity.hook($("#mSidebar"), 'translateX', '0px'); $.Velocity.hook($("#mSidebar"), 'translateX', '0px');
Session.set("select", "none");
} }
}); });
} }
} }
function timedPushback() { function timedPushback() {
var fadeTime = 10;
$(".mClassContainer").velocity("stop", true); $(".mClassContainer").velocity("stop", true);
if($(".mClassContainer").length === 0) { $(".mNoneText").velocity("fadeOut", fadeTime);
$(".mNoneText").velocity("fadeOut", { $(".mClassContainer").velocity("fadeOut", fadeTime);
duration: 10, setTimeout(function() {
complete: function() { $(".mClassContainer").velocity({left: "-150vw"}, 0);
$(".mClassContainer").velocity({left: "-150vw"}, 0); $(".mClassContainer").velocity("fadeIn", 0);
$(".mClassContainer").velocity("fadeIn", 0); $(".mClassContainer").velocity({opacity: 1}, 0);
var i = 0; var i = 0;
var timer = setInterval(function() { var timer = setInterval(function() {
$($(".mClassContainer")[i]).velocity({left: ""}); $($(".mClassContainer")[i]).velocity({left: ""});
if(i === $(".mClassContainer").length - 1) clearInterval(timer); if(i === $(".mClassContainer").length - 1) clearInterval(timer);
i += 1; i += 1;
}, 100); }, 100);
} }, fadeTime);
});
} 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);
}
});
}
} }

2
hourglass/lib/constants.js
View File

@ -13,7 +13,7 @@ themeColors = {
"nox": { "nox": {
"background": "Black.jpg", "background": "Black.jpg",
"mainColor": "#373A56", "mainColor": "#373A56",
"secondaryColor": "#151A2B", "secondaryColor": "#21273D",
"sidebarColor": "#35435D", "sidebarColor": "#35435D",
"userDropdownColor": "#373A56", "userDropdownColor": "#373A56",
"iconHighlight": "#33ADFF", "iconHighlight": "#33ADFF",

15
hourglass/lib/router.js
View File

@ -30,8 +30,13 @@ Router.route('/', {
this.redirect('/profile'); this.redirect('/profile');
} else { } else {
Session.set("user", Meteor.user().profile); Session.set("user", Meteor.user().profile);
//this.render("main"); if(Meteor.Device.isPhone()) {
this.render("mobile"); this.render("mobile");
} else {
this.render("main");
}
} }
} }
} }
@ -40,7 +45,11 @@ Router.route('/', {
Router.route('/login', { Router.route('/login', {
action: function() { action: function() {
if (!Meteor.userId()) { if (!Meteor.userId()) {
this.render("login"); if(Meteor.Device.isPhone()) {
this.render("mLogin");
} else {
this.render("login");
}
} else if (!completeProfile()) { } else if (!completeProfile()) {
this.redirect('/profile'); this.redirect('/profile');
} else { } else {