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

New UI, display fixes, and small bugs

Browse Source
This commit is contained in:
Kenneth Jao 2016-10-23 22:11:27 -04:00
parent 05f5f1275f
commit 81962e24ef
8 changed files with 487 additions and 481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hourglass/.meteor/packages
View File

@ -43,3 +43,4 @@ dburles:collection-helpers
yogiben:admin-edit
mfactory:admin-lte
standard-minifier-css
mrt:jquery-ui

1
hourglass/.meteor/versions
View File

@ -84,6 +84,7 @@ modules-runtime@0.7.6_1
momentjs:moment@2.15.1
mongo@1.1.12_1
mongo-id@1.0.5
mrt:jquery-ui@1.9.2
natestrauser:select2@4.0.3
npm-mongo@1.5.49
oauth@1.1.11

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

@ -55,7 +55,7 @@ html {
.formInvalid::-webkit-input-placeholder {
color: red;
}
}s
.formInvalid:-moz-placeholder {
color: red;
@ -93,50 +93,62 @@ body {
width: 100%;
height: 6vh;
margin: 0;
box-shadow: 2px 2px 5px 3px #666;
box-shadow: 0px 5px 2px -2px #666;
display: inline-block;
position: absolute;
top: 0;
z-index: 50;
z-index: 0;
}
#mainHeader h1 {
margin-left: 1%;
}
#mainHeader h1, #mainHeader h2 {
font-size: 3.5vh;
margin-left: 0.5%;
padding: 0;
height: 5.5vh;
line-height: 5.5vh;
height: 6vh;
-webkit-filter: none;
filter: none;
display: inline;
line-height: 6vh;
text-align: right;
}
#mainHeader h2 {
font-weight: 200;
font-size: 3vh;
float: left;
}
#divLeftBar, #divCenter {
height: 100%;
position: absolute;
top: 0;
}
#divCenter {
left: 6vh;
right: 0;
z-index: 10;
}
#divLeftBar {
width: 36vh;
z-index: 5;
}
a
.noScroll h1,.noScroll h2,.noScroll h3,.noScroll h4,.noScroll h5,
.gu-mirror h1,.gu-mirror h2,.gu-mirror h3,.gu-mirror h4,.gu-mirror h5 {
margin: 0;
-webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666);
}
.noScroll h1, .gu-mirror h1 {
padding: 0.4%;
float: left;
}
.noScroll h4, .gu-mirror h4 {
font-size: 130%;
font-weight: 200;
padding: 5%;
-webkit-filter: drop-shadow(2px 2px 5px #333);
filter: drop-shadow(2px 2px 5px #333);
display: inline-block;
@ -156,32 +168,21 @@ body {
.fa-bars, .fa-cog {
font-size: 3.5vh;
width: 5.5vh;
height: 5.5vh;
line-height: 5.5vh;
width: 6vh;
height: calc(6vh - 1px);
border-bottom: 2px solid #333;
position: relative;
line-height: 6vh;
text-align: center;
float: left;
cursor: pointer;
-webkit-transition: color 0.5s ease, background-color 0.5s ease;
-moz-transition: color 0.5s ease, background-color 0.5s ease;
-ms-transition: color 0.5s ease, background-color 0.5s ease;
transition: color 0.5s ease, background-color 0.5s ease;
cursor: pointer;
}
#headerBar {
width: 100%;
height: 0.5vh;
background-color: #33ADFF;
position: absolute;
bottom: 0;
}
.fa-cog {
float: right;
}
.fa-bars:hover, .fa-cog:hover {
@ -193,8 +194,10 @@ body {
}
#dropdown {
width: 5.5vh;
height: 5.5vh;
width: auto;
height: 6vh;
padding-right: 2vh;
float: right;
display: inline-block;
cursor: pointer;
@ -205,120 +208,121 @@ body {
transition: background-color 0.5s ease;
}
#dropdown img{
#dropdown img {
width: 4vh;
height: 4vh;
padding: .7vh;
line-height: 5.5vh;
padding: 1vh;
line-height: 6vh;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#dropdown:hover {
background-color: rgba(0,0,0,0.1);
#dropdown h4 {
padding: 0;
vertical-align: top;
line-height: 6vh;
}
#menuContainer, #optionsContainer {
#dropdown:hover {
background-color: rgba(0,0,0,0.3);
}
#menuBar {
height: 100%;
width: 6vh;
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);
z-index: 0;
float: left;
}
#menuContainer {
min-height: 100%;
max-height: 100%;
width: 250px;
padding: 1% 0 1% 0;
box-shadow: 2px 2px 5px 3px #666;
width: 30vh;
position: absolute;
top: 6vh;
z-index: 5;
overflow: hidden;
-webkit-transition: left 0.5s ease, right 0.5s ease;
-moz-transition: left 0.5s ease, right 0.5s ease
-ms-transition: left 0.5s ease, right 0.5s ease;
transition: left 0.5s ease, right 0.5s ease;
}
#optionsContainer {
padding: 40px 0 40px 40px;
right: 0;
}
#optionsContainer .change {
color: #000;
}
#optionsContainer h3 {
font-size: 175%;
}
.mode, .function {
width: 100%;
position: relative;
background-color: rgba(255,255,255,0.2);
display: inline-block;
z-index: -1;
overflow: hidden;
-webkit-transition: background-color 0.5s ease, box-shadow 0.5s ease;
-moz-transition: background-color 0.5s ease, box-shadow 0.5s ease;
-ms-transition: background-color 0.5s ease, box-shadow 0.5s ease;
transition: background-color 0.5s ease, box-shadow 0.5s ease;
position: fixed;
left: 6vh;
}
.menuWrapper {
display: none;
}
#modes {
margin-top: 6vh;
}
.sectionTitle {
font-weight: 200;
width: 100%;
padding: 6%;
background-color: rgba(255,255,255,0.1);
}
.mode {
width: 100%;
display: table;
background-color: rgba(0,0,0,0.1);
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
cursor: pointer;
}
.mode:hover, .function:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
.mode:hover {
background-color: rgba(0,0,0,0.2);
}
.mode:active, .function:active {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.3);
-webkit-transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
-ms-transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
.mode:active {
background-color: rgba(0,0,0,0.3);
}
.fa-university, .fa-calendar, .fa-download {
font-size: 175%;
width: 12%;
padding: 10%;
.status {
width: 3% !important;
height: 100%;
border-spacing: 6%;
display: table-cell;
-webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666);
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .fa-tasks, .fa-graduation-cap, .fa-exchange {
.mode .fa {
width: 10%;
padding: 6%;
display: table-cell;
}
.mode h4 {
width: 74%;
display: table-cell;
}
#divLeftBar .fa-university, #divLeftBar .fa-calendar, #divLeftBar .fa-download, #divLeftBar .fa-tasks {
font-size: 150%;
}
.noScroll .fa-plus, .creWork .fa-plus, .fa-minus, .fa-graduation-cap, .fa-exchange {
font-size: 130%;
padding: 5%;
-webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666);
}
#exportText {
display: inline;
}
.fa-download {
padding: 0%;
}
#exportDiv {
position: absolute;
bottom: 9%;
}
#functions {
width: 100%;
margin-top: 7%;
border-style: solid;
border-color: #D9D9D9;
border-left: none;
box-shadow: 0px 4px 8px 1px #222;
position: relative;
z-index: 1;
position: absolute;
bottom: 0;
}
#classListHolder {
@ -333,28 +337,67 @@ body {
max-height: 20vh;
}
#classListHolder h3 {
font-weight: 200;
margin: 5%;
margin-right: 4%;
.sideClass, .sideFilter {
width: 100%;
display: inline-block;
background-color: rgba(0,0,0,0.1);
cursor: pointer;
display: table;
-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;
}
#classFilterHolder h3 {
font-weight: 200;
padding: 5%;
box-shadow: 0px 4px 10px 1px #222;
.sideClass:hover, .sideFilter:hover {
background-color: rgba(0,0,0,0.2);
}
.sideClass, .sideFilter, #exportDiv {
width: 100%;
height: 5vh;
padding: 1.5vh;
.sideClass:active, .sideFilter:active {
background-color: rgba(0,0,0,0.3);
}
.sideClass span {
font-weight: 400;
margin: 0;
font-size: 110%;
padding: 5%;
display: table-cell;
}
.sideClassName {
width: 65%;
padding-left: 5%;
}
.sideClassHour {
width: 30%;
color: #CCC;
}
.sideTypeName {
font-size: 110%;
width: 92%;
margin: 0;
padding: 5%;
padding-left: 5%;
display: table-cell;
}
#classesMode {
height: 94vh;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
#filterHead {
font-weight: 200;
padding: 0;
background-color: rgba(255,255,255,0.1);
cursor: pointer;
-webkit-transition: background-color 0.4s ease;
@ -363,84 +406,56 @@ body {
transition: background-color 0.4s ease;
}
.sideClass div {
height: 100%;
#filterHead:hover {
background-color: rgba(255,255,255,0.2);
}
#filterHead h3:first-child {
font-weight: 200;
padding: 5%;
display: inline-block;
pointer-events: none;
}
.sideClass div:first-child {
width: 80%;
}
.sideClass:hover, .sideFilter:hover, #exportDiv:hover {
background-color: rgba(255,255,255,0.3);
}
.sideClassName {
font-weight: 600;
margin: 0;
display: table-row;
}
.sideClassHour {
font-weight: 400;
color: #CCC;
margin: 0;
display: table-row;
}
.sideTypeName {
margin: 0;
display: inline-block;
}
.sideFilter, #exportDiv {
height: auto;
}
.fa-dot-circle-o {
font-size: 1.1vw;
color: #53BD42;
#filterHead .fa {
font-size: 120%;
padding: 5%;
float: right;
text-align: right;
}
.sideClass .fa-dot-circle-o {
line-height: 4.4vh;
}
.sideFilter div {
width: 100%;
height: 100%;
}
.sideFilter .fa-dot-circle-o {
margin: 0;
margin-right: 3vh;
display: inline-block;
pointer-events: none;
}
#classesMode {
width: 100%;
height: 94vh;
#disableFilter {
font-weight: 200;
font-size: 90%;
margin-left: 10%;
padding: 4%;
background-color: rgba(255,255,255,0.2);
position: absolute;
top: 6vh;
right: 0;
bottom: 0;
left: 0;
display: inline-block;
cursor: pointer;
pointer-events: all;
z-index: 2;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-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;
}
#disableFilter:hover {
background-color: rgba(0,0,0,0.1);
}
#filterWrapper {
display: none;
}
.mainClass {
width: 100%;
padding-bottom: 1%;
box-shadow: 2px 2px 5px 3px #666;
box-shadow: 2px 2px 5px 1px #666;
}
.classWrapper {
@ -466,6 +481,10 @@ body {
cursor: pointer;
}
.sectionTitle.option {
margin-top: 6vh;
}
.mainClassName {
font-size: 160%;
white-space: normal;
@ -482,7 +501,7 @@ body {
.creWork {
margin-bottom: 5%;
cursor: pointer;
box-shadow: 0px 5px 5px 1px #666;
box-shadow: 0px 5px 5px -2px #666;
-webkit-transition: background-color 0.4 ease;
-moz-transition: background-color 0.4s ease;
@ -506,7 +525,7 @@ body {
width: 90%;
margin: 5%;
background-color: rgba(255,255,255,0.3);
box-shadow: 2px 2px 5px 3px #666;
box-shadow: 1px 1px 5px 1px #666;
cursor: pointer;
-webkit-transition: box-shadow 0.4s ease, transform 0.3s ease;
@ -516,7 +535,11 @@ body {
}
.workCard:hover {
box-shadow: 2px 2px 5px 3px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
box-shadow: 1px 1px 5px 1px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
}
.workCard div {
pointer-events: none;
}
.cWorkTop {
@ -636,7 +659,7 @@ textarea.clickModify {
font-size: 130%;
}
.workTitle, .prefTitle {
.workTitle {
font-size: 150%;
font-weight: 400;
margin: 0 3% 1% 0;
@ -648,18 +671,23 @@ textarea.clickModify {
margin-top: 5%;
}
.prefWrapper {
width: 85%;
.menuWrapper .prefWrapper {
width: 100%;
position: relative;
}
.prefText {
padding: 4%;
background-color: rgba(255,255,255,0.15);
}
.noneLeft {
color: red;
}
.clickModify.dropdown {
font-size: 1.2vw;
width: 100%;
font-size: 120%;
width: calc(100% - 2px);
border: 1px solid #999797;
background-color: rgba(0,0,0,0.07);
@ -677,21 +705,15 @@ textarea.clickModify {
}
.clickModify.dropdown span {
width: 75%;
width: 78%;
padding: 3% 5% 3% 5%;
display: inline-block;
pointer-events: none;
}
.fa-caret-down {
font-size: 1.1vw;
text-align: right;
pointer-events: none;
}
.optionHolder {
width: 100%;
width: calc(100% - 2px);
margin-top: -1px;
border: 1px solid #666;
@ -932,10 +954,10 @@ textarea.clickModify {
width: 90%;
height: 94vh;
margin: auto;
padding-top: 5%;
padding-top: 1%;
position: absolute;
top: 6vh;
top: 0;
right: 0;
bottom: 0;
left: 0;
@ -1078,22 +1100,6 @@ textarea.clickModify {
}
}
#disableFilter {
font-size: 90%;
margin: 0 0 0 23% !important;
padding: 4%;
background-color: rgba(255,255,255,0.2);
-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;
}
#disableFilter:hover {
background-color: rgba(255,255,255,0.1);
}
.fc-past {
background-color: rgba(0,0,0,0.2);
}
@ -1120,14 +1126,6 @@ textarea.clickModify {
pointer-events: auto;
}
#prefCont {
margin-left: 5%;
}
#prefCont .changeInput {
width: 70%;
}
#workComment {
width: 99%;
margin-bottom: 3%;
@ -1327,20 +1325,20 @@ textarea.clickModify {
position: absolute;
top: -2.9vh;
right: 2vw;
right: 1.5vw;
z-index: 18;
}
#userDropdown {
width: 15vw;
width: 12vw;
margin-top: 10vh;
box-shadow: 2px 2px 5px 2px #666;
box-shadow: 1px 1px 3px 1px #666;
display: none;
position: absolute;
top: 1vh;
right: 4vw;
top: 0.5vh;
right: 1.5vw;
z-index: 20;
opacity: 0;
@ -1373,7 +1371,7 @@ textarea.clickModify {
#userDropdownAvatar p {
font-size: 1.2vw;
width: 15vw;
width: 12vw;
margin: 0 auto 0 auto;
padding-top: 7.5vw;
text-align: center;

309
hourglass/client/main/main.html
View File

@ -5,141 +5,152 @@
<template name="main">
<div class="noScroll">
<header id="mainHeader" style="background-color:{{userProfile}}{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
<i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
<div id="dropdown">
<img src="{{avatar}}">
</div>
<div id="headerBar" style="background-color:{{divColor 'iconHighlight'}}"></div>
</header>
<div id="menuContainer" style="left:{{menuStatus}};background-color:{{divColor 'sidebarColor'}}">
<div id="modes">
<div class="mode classes">
<i class="fa fa-university" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
</div>
<div class="mode calendar">
<i class="fa fa-calendar" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
</div>
</div>
<div id="functions">
<div class="function manageClass" onclick="window.location='/profile'">
<i class="fa fa-tasks" aria-hidden="true"></i>
<h4>Manage Classes</h4>
</div>
</div>
{{#if myClasses}}
<div id="classFilterHolder">
<h3>Filters</h3>
{{#each types}}
{{> sideTypeFilter}}
{{/each}}
</div>
<div id="classListHolder">
<h3>By Class </h3>
{{#if calCreWork}}
<h3 id="calCreWork">-- Pick a class</h3>
{{else}}
{{#if filterOn}}
<h3 id="disableFilter">Disable All</h3>
{{/if}}
{{/if}}
<div id="sideClassWrapper">
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
</div>
</div>
{{/if}}
<div id="exportDiv">
<i id="export" class="fa fa-download" aria-hidden="true"></i>
<h4 id="exportText">Export</h4>
</div>
</div>
<div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebarColor'}}">
<h3>Preferences</h3>
<div id="prefCont">
<div class="prefWrapper">
<p class="prefTitle">Theme:</p>
<div id="theme" class="clickModify dropdown" tabindex="1">
<span>{{pref 'theme'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'theme'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Default Mode:</p>
<div id="mode" class="clickModify dropdown" tabindex="2">
<span>{{pref 'mode'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'mode'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Homework:</p>
<div id="timeHide" class="clickModify dropdown" tabindex="3">
<span>{{pref 'timeHide'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'timeHide'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Done:</p>
<div id="done" class="clickModify dropdown" tabindex="4">
<span>{{pref 'done'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'done'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<p class="prefTitle">Hide Reported:</p>
<div id="hideReport" class="clickModify dropdown" tabindex="5">
<span>{{pref 'hideReport'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'hideReport'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
</div>
<img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
<div id="mainBody{{highlight}}">
{{#if currMode 'classes'}}
<div id="classesMode">
{{#each myClasses}}
{{> classesMode}}
{{/each}}
<div id="divLeftBar">
<div id="menuBar" style="background-color:{{divColor 'sidebarColor'}}">
<i class="fa fa-bars" style="color:{{iconStatus 'menu'}}" aria-hidden="true"></i>
<i class="fa fa-cog" style="color:{{iconStatus 'option'}}" aria-hidden="true"></i>
</div>
<div id="menuContainer" style="background-color:{{divColor 'sidebarColor'}};">
<div class="menuWrapper menu">
<div id="modes">
<h3 class="sectionTitle">Main</h3>
<div class="mode classes">
<div class="status" style="background-color:{{modeStatus 'classes'}}"></div>
<i class="fa fa-university" aria-hidden="true"></i>
<h4>Classes</h4>
</div>
<div class="mode calendar">
<div class="status" style="background-color:{{modeStatus 'calendar'}}"></div>
<i class="fa fa-calendar" aria-hidden="true"></i>
<h4>Calendar</h4>
</div>
<div class="mode manageClass" onclick="window.location='/profile'">
<div class="status"></div>
<i class="fa fa-tasks" aria-hidden="true"></i>
<h4>Manage Classes</h4>
</div>
</div>
<div id="filters">
<div id="filterHead" class="sectionTitle">
<h3>Filters</h3>
{{#if filterOn}}
<h3 id="disableFilter">Disable All</h3>
{{/if}}
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="filterWrapper">
<h3 class="sectionTitle">By Type</h3>
<div id="classFilterHolder">
{{#each types}}
{{> sideTypeFilter}}
{{/each}}
</div>
<div id="classListHolder">
<h3 class="sectionTitle">By Class</h3>
<div id="sideClassWrapper">
{{#each myClasses}}
{{> sidebarClasses}}
{{/each}}
</div>
</div>
</div>
</div>
<div id="exportDiv" class="mode">
<i class="fa fa-download" aria-hidden="true"></i>
<h4>Export</h4>
</div>
</div>
{{/if}}
<div class="menuWrapper option">
<h3 class="sectionTitle option">Preferences</h3>
<div id="prefCont">
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Theme:</h3>
<div id="theme" class="clickModify dropdown" tabindex="1">
<span>{{pref 'theme'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'theme'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Default Mode:</h3>
<div id="mode" class="clickModify dropdown" tabindex="2">
<span>{{pref 'mode'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'mode'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Homework:</h3>
<div id="timeHide" class="clickModify dropdown" tabindex="3">
<span>{{pref 'timeHide'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'timeHide'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Done:</h3>
<div id="done" class="clickModify dropdown" tabindex="4">
<span>{{pref 'done'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'done'}}
{{> option}}
{{/each}}
</div>
</div>
<div class="prefWrapper">
<h3 class="sectionTitle prefText">Hide Reported:</h3>
<div id="hideReport" class="clickModify dropdown" tabindex="5">
<span>{{pref 'hideReport'}}</span>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder">
{{#each selectOptions 'hideReport'}}
{{> option}}
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<div id="divCenter">
<header id="mainHeader" style="background-color:{{divColor 'mainColor'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
<div id="dropdown">
<img src="{{avatar}}">
<h4>{{username}}</h4>
</div>
</header>
<div id="mainBody{{highlight}}">
{{#if currMode 'classes'}}
<div id="classesMode">
{{#each myClasses}}
{{> classesMode}}
{{/each}}
</div>
{{/if}}
{{#if currMode 'calendar'}}
<div id="calendar">
{{> fullcalendar calendarOptions}}
</div>
{{/if}}
{{#if currMode 'calendar'}}
<div id="calendar">
{{> fullcalendar calendarOptions}}
</div>
{{/if}}
</div>
</div>
<div class="overlay">
@ -256,15 +267,18 @@
<template name="sidebarClasses">
<div class="sideClass" classid="{{_id}}">
<div>
<p class="sideClassName">{{name}}</p>
<p class="sideClassHour">{{hour}}</p>
</div>
<div>
{{#if selected}}
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
{{/if}}
</div>
{{#unless calCreWork}}
<div class="status" style="background-color:{{selected}}"></div>
{{/unless}}
<span class="sideClassName">{{name}}</span>
<span class="sideClassHour">{{hour}}</span>
</div>
</template>
<template name="sideTypeFilter">
<div class="sideFilter" type="{{type}}">
<div class="status" style="background-color:{{selected}}"></div>
<span class="sideTypeName">{{typeName}}</span>
</div>
</template>
@ -334,17 +348,6 @@
</div>
</template>
<template name="sideTypeFilter">
<div class="sideFilter" type="{{type}}">
<div>
<p class="sideTypeName">{{typeName}}</p>
{{#if selected}}
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
{{/if}}
</div>
</div>
</template>
<template name="option">
<p class="optionText" style="background-color:{{divColor 'mainColor'}}">{{alias}}</p>
</template>
@ -396,7 +399,7 @@
<div id="typeWrapper">
<div id="wType" class="clickModify dropdown" tabindex="13">
<span>{{work 'type'}}</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="optionHolder type">
{{#each selectOptions 'type'}}

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

@ -10,10 +10,10 @@ var calWorkOpen = null;
var calWorkDate = null;
modifyingInput = null;
dropOpen = null;
var filterOpen = false;
var sidebarMode = [null,null]
var openValues = {
"menu": "-270px",
"options": "-300px",
"requests": "-235px"
};
@ -36,10 +36,10 @@ var defaultWork = {
// Reactive variables.
Session.set("user", {}); // Stores user preferences.
Session.set("calendarClasses", []); // Stores calendar classes.
Session.set("sidebar", null); // Status of sidebar.
Session.set("requests", false); // Status of requests.
Session.set("sidebarMode", [null,null]); // Status of sidebars.
Session.set("newWork", null); // If user creating new work.
Session.set("currentWork",null);
Session.set("currentWork",null); // Current stored work.
Session.set("noclass", null); // If user does not have classes.
Session.set("calCreWork", null); // If user is creating a work from calendar.
Session.set("classDisp", []); // Stores current filter for classes.
@ -65,6 +65,7 @@ Template.main.rendered = function() {
$(this).removeClass("selectedOption");
}
);
$("#menuContainer").toggle();
};
Template.profile.rendered = function() {
@ -79,12 +80,6 @@ Template.profile.rendered = function() {
);
};
Template.registerHelper('userProfile', () => {
if (Meteor.user() === undefined || Meteor.user() === null) return;
Session.set("user", Meteor.user().profile);
return;
});
Template.registerHelper('adminPage', () => {
return window.location.pathname.includes("/");
});
@ -145,7 +140,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
found.mine = false;
}
}
if (classDisp.indexOf(courses[i]) !== -1) found.selected = true; // Filter selected.
found.selected = ((classDisp.indexOf(courses[i]) !== -1)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"; // Filter selected.
array.push(found);
var thisWork = work.find({
@ -296,15 +291,6 @@ Template.main.helpers({
if (Session.get("user").school === undefined || Session.get("user").school === null) return;
return " - " + Session.get("user").school;
},
iconColor(icon) { // Sidebar status color
if (Session.equals("sidebar", icon + "Container")) {
return Session.get("user").preferences.theme.statusIcons;
} else if (Session.equals("sidebar", "both")) {
return Session.get("user").preferences.theme.statusIcons;
} else {
return;
}
},
avatar() { // Returns avatar.
return Meteor.user().services.google.picture;
},
@ -319,31 +305,16 @@ Template.main.helpers({
bgSrc() { // Returns background.
return "Backgrounds/" + Session.get("user").preferences.theme.background;
},
menuStatus() { // Status of of menu sidebar.
if (Session.equals("sidebar", "menuContainer")) {
return "0px";
} else if (Session.equals("sidebar", "both")) {
return "0px";
} else {
return openValues.menu;
}
},
optionsStatus() { // Status of options sidebar.
if (Session.equals("sidebar", "optionsContainer")) {
return "0px";
} else if (Session.equals("sidebar", "both")) {
return "0px";
} else {
return openValues.options;
}
iconStatus(icon) {
var sidebar = Session.get("sidebarMode");
return (sidebar[0] === icon && sidebar[1]) ? Session.get("user").preferences.theme.iconHighlight + ";background-color:rgba(0,0,0,0.2)" : "";
},
requestStatus() {
if (Session.get("requests")) return "0px";
return openValues.requests;
},
modeStatus(status) { // Color status of display modes.
if (!Session.equals("mode", status)) return;
return Session.get("user").preferences.theme.modeHighlight;
return (Session.equals("mode", status)) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)";
},
currMode(name) { // Status of display mode.
return Session.equals("mode", name);
@ -397,6 +368,10 @@ Template.main.helpers({
});
var date = event.start.format().split("-");
current.dueDate = new Date(date[0], parseInt(date[1]) - 1, date[2], 11, 59, 59);
if(Date.parse(new Date) > Date.parse(current.dueDate)) {
revertFunc();
return;
}
serverData = current;
sendData("editWork");
},
@ -426,12 +401,10 @@ Template.main.helpers({
return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
},
calCreWork() { // Display instructions for creating a work.
if (Session.get("calCreWork")) return true;
return false;
return Session.get("calCreWork");
},
filterOn() {
if (Session.get("classDisp").length !== 0) return true;
return false;
return Session.get("classDisp").length !== 0 || Session.get("typeFilter").length !== 0;
},
highlight() { // Calendar highlight/scale option.
var hoverHighlight = Session.get("classDispHover");
@ -461,7 +434,7 @@ Template.main.helpers({
array.push({
"type": types[i],
"typeName": types[i][0].toUpperCase() + types[i].slice(1),
"selected": _.contains(Session.get("typeFilter"), types[i])
"selected": (_.contains(Session.get("typeFilter"), types[i])) ? Session.get("user").preferences.theme.modeHighlight : "rgba(0,0,0,0)"
});
}
return array;
@ -503,8 +476,7 @@ Template.main.events({
if(modifyingInput !== null && event.target !== document.getElementById(modifyingInput)) {
if (!(e.includes("optionHolder") || e.includes("optionText"))) {
if(document.getElementById(modifyingInput).className.includes("dropdown")) {
$(".optionHolder")
.fadeOut(250, "linear");
$(".optionHolder").fadeOut(100);
$(".selectedOption").removeClass("selectedOption");
} else {
@ -514,11 +486,10 @@ Template.main.events({
}
}
if (!Session.equals("sidebar", e) && // Sidebar closing.
!e.includes("fa-cog") &&
if (!e.includes("fa-cog") && // Sidebar closing.
!e.includes("fa-bars") &&
!document.getElementById("menuContainer").contains(event.target) &&
!document.getElementById("optionsContainer").contains(event.target)) {
!document.getElementById("menuBar").contains(event.target)) {
if (Session.get("calCreWork")) {
if (!calWorkOpen) {
Session.set("calCreWork", false);
@ -526,7 +497,9 @@ Template.main.events({
}
calWorkOpen = false;
} else {
Session.set("sidebar", null);
Session.set("sidebarMode", Session.get("sidebarMode")[0], false);
toggleSidebar(false);
Session.set("sidebarMode", [null,null]);
}
}
@ -542,30 +515,41 @@ Template.main.events({
if (!document.getElementById("requests").contains(event.target)) Session.set("requests", false);
},
// MAIN MENU BUTTONS
'click .fa-bars' () { // Click menu button.
var side = Session.get("sidebar");
if (side === "menuContainer") {
Session.set("sidebar", null);
} else if (side === "optionsContainer") {
Session.set("sidebar", "both");
} else if (side === "both") {
Session.set("sidebar", "optionsContainer");
'click .fa-bars' (event) { // Click menu button.
var sidebar = Session.get("sidebarMode");
if(sidebar[0] === "menu" && sidebar[1]) {
Session.set("sidebarMode", ["menu",false]);
toggleSidebar(false);
} else {
Session.set("sidebar", "menuContainer");
Session.set("sidebarMode", ["menu",true]);
$(".menuWrapper.option").fadeOut(200);
toggleSidebar(true);
$(".menuWrapper.menu").slideDown(350);
}
},
'click .fa-cog' () { // Click settings button.
var side = Session.get("sidebar");
if (side === "optionsContainer") {
Session.set("sidebar", null);
} else if (side === "menuContainer") {
Session.set("sidebar", "both");
} else if (side === "both") {
Session.set("sidebar", "menuContainer");
'click .fa-cog' (event) { // Click settings button.
var sidebar = Session.get("sidebarMode");
if(sidebar[0] === "option" && sidebar[1]) {
Session.set("sidebarMode", ["option",false]);
toggleSidebar(false);
} else {
Session.set("sidebar", "optionsContainer");
Session.set("sidebarMode", ["option",true]);
$(".menuWrapper.menu").slideUp(200);
toggleSidebar(true);
$(".menuWrapper.option").slideDown(350);
}
},
'click #filterHead' (event) {
if(event.target.id === "disableFilter") return;
if(!filterOpen) {
$("#filterWrapper").slideDown(300);
} else {
$("#filterWrapper").slideUp(300);
}
filterOpen = !filterOpen;
},
'click #requests .fa-question' () {
Session.set("requests", !Session.get("requests"));
},
@ -578,7 +562,9 @@ Template.main.events({
openDivFade(modeHolder);
}, 300);
setTimeout(startDragula, 500);
Session.set("sidebar", null); // Closes all sidebars.
Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
toggleSidebar(false);
Session.set("sidebarMode", [null,null]);
Session.set("calCreWork", null);
},
'click .calendar' () { // Click calendar mode button.
@ -589,7 +575,9 @@ Template.main.events({
Session.set("mode", "calendar");
openDivFade(modeHolder);
}, 300);
Session.set("sidebar", null); // Closes all sidebars.
Session.set("sidebarMode", Session.get("sidebarMode")[0], false); // Closes all sidebars.
toggleSidebar(false);
Session.set("sidebarMode", [null,null]);
Session.set("calCreWork", null);
},
'click .creWork' (event) { // Cick add work button.
@ -610,10 +598,7 @@ Template.main.events({
}, 100);
},
'click .workCard' (event) { // Display work information on work card click.
var dom = event.target;
while (event.target.className !== "workCard") event.target = event.target.parentNode;
var workid = event.target.getAttribute("workid");
var thisWork = work.findOne({
_id: workid
});
@ -621,7 +606,7 @@ Template.main.events({
Session.set("newWork", false);
Session.set("currentWork", thisWork);
if (!Session.get("newWork") && !document.getElementById("optionsContainer").contains(event.target)) {
if (!Session.get("newWork")) {
var currClass = classes.findOne({
_id: thisWork["class"]
});
@ -692,7 +677,7 @@ Template.main.events({
// HANDLING INPUT CHANGING
'focus .clickModify' (event) {
$(".optionHolder")
.fadeOut(250, "linear");
.fadeOut(100);
if(modifyingInput !== null) {
if(!$("#"+modifyingInput)[0].className.includes("dropdown")) closeInput(modifyingInput);
@ -761,7 +746,7 @@ Template.main.events({
serverData = Session.get("currentWork");
$("#" + modifyingInput).next()
.fadeOut(250, "linear");
.fadeOut(100);
$(".selectedOption").removeClass("selectedOption");
if(Session.get("newWork")) return;
if(checkMissing()) return;
@ -780,7 +765,7 @@ Template.main.events({
}
$("#" + modifyingInput).next()
.fadeOut(250, "linear");
.fadeOut(100);
$(".selectedOption").removeClass("selectedOption");
},
@ -878,6 +863,7 @@ Template.main.events({
},
'click #disableFilter' () {
Session.set("classDisp", []);
Session.set("typeFilter", []);
},
'mouseover .sideClass' (event) { // Highlight/scale filter on-hover.
var div;
@ -919,6 +905,16 @@ Template.main.events({
// Other Functions
function toggleSidebar(open) {
if(open) {
$("#menuContainer").show("slide", {direction: "left"}, 250);
$("#divCenter").stop().animate({left: '36vh'}, 250);
} else {
$("#menuContainer").hide("slide", {direction: "left"}, 250);
$("#divCenter").stop().animate({left: '6vh'}, 250);
}
}
function openDivFade(div) {
div.style.display = "block";
div.style.opacity = "0";

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

@ -15,7 +15,7 @@
.profHea {
margin: 0;
font-size: 3vw;
font-size: 2vw;
font-weight: 200;
padding: 6% 6% 0 8%;
}

6
hourglass/lib/constants.js
View File

@ -5,8 +5,8 @@ themeColors = {
"secondaryColor": "#E8E8E8",
"sidebarColor": "#65839A",
"userDropdownColor": "#E6E6E6",
"iconHighlight": "#33ADFF",
"modeHighlight": "#FF1A1A",
"iconHighlight": "#8695CF",
"modeHighlight": "#AA2121",
"classCardColor":"#EBEBEB",
"textColor": "#000"
},
@ -36,7 +36,7 @@ themeColors = {
"background": "Sea.jpg",
"mainColor": "#1E926C",
"secondaryColor": "#1C564F",
"sidebarColor": "#3CB08A",
"sidebarColor": "#1C7458",
"userDropdownColor": "#2EA96A",
"iconHighlight": "#61D9A3",
"modeHighlight": "#C9FE62",

7
hourglass/lib/router.js
View File

@ -14,8 +14,10 @@ Router.route('/', {
},
action: function() {
if(_.contains([null, undefined, ""], Meteor.user().profile.school)) {
Session.set("user", Meteor.user().profile);
this.redirect('/login');
} else {
Session.set("user", Meteor.user().profile);
this.render("main");
}
}
@ -26,8 +28,10 @@ Router.route('/login', {
if (!Meteor.userId()) {
this.render("login");
} else if (!Meteor.user().profile.school) {
Session.set("user", Meteor.user().profile);
this.redirect('/profile');
} else {
Session.set("user", Meteor.user().profile);
this.redirect('/');
}
}
@ -48,6 +52,7 @@ Router.route('/profile', {
}
},
action: function() {
Session.set("user", Meteor.user().profile);
this.render("profile");
}
});
@ -64,8 +69,10 @@ Router.route('/user/:email', {
action: function() {
if(Meteor.users.findOne({'services.google.email': this.params.email}) !== undefined) {
if(Meteor.user() && this.params.email === Meteor.user().services.google.email) {
Session.set("user", Meteor.user().profile);
this.redirect('/profile');
} else {
Session.set("user", Meteor.user().profile);
this.render('user');
}
} else {