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

Code cleanup, and display formatting/css

Browse Source
This commit is contained in:
Kenneth Jao 2016-08-11 03:10:32 -04:00
parent 670e212543
commit e3444a8fc6
5 changed files with 164 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,7 +204,7 @@ input {
z-index: 1; z-index: 1;
} }
#functionHolder { #classListHolder {
max-height: 48%; max-height: 48%;
width: 90%; width: 90%;
margin-bottom: 30%; margin-bottom: 30%;
@ -222,90 +222,6 @@ input {
transition: opacity 0.4s ease; transition: opacity 0.4s ease;
} }
#create {
font-size: 140%;
width: 100%;
}
.input {
margin: 0;
margin-top: 3%;
margin-bottom: -9%;
-webkit-filter: drop-shadow(2px 2px 5px #666);
filter: drop-shadow(2px 2px 5px #666);
}
.creSubmit {
width: 100%;
margin-top: 30%;
padding: 3% 0 3% 0;
text-align: center;
background-color: #849CAE;
-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;
}
.creSubmit:hover {
background-color: #A2B5C3;
}
.creSubmit:active {
background-color: #EFF3F5;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.creInput, select {
font-family: 'Raleway';
width: 90%;
margin-bottom: 4%;
padding: 3.5%;
position: relative;
z-index: 0;
}
select {
font-family: 'Raleway';
width: 100%;
}
.creOptions {
width: 80%;
margin-top: -3.4%;
box-shadow: 2px 2px 5px 3px #666;
display: none;
position: absolute;
z-index: 5;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.creOptions p {
margin: 0;
padding: 5%;
display: block;
}
.creOptions p:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1)
}
.overlay { .overlay {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -409,6 +325,18 @@ select {
height: 100%; height: 100%;
} }
#calbg {
background-color: rgba(255,255,255,0.3);
position: absolute;
}
.fc-view-container, .fc-left {
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.fc-view-container { .fc-view-container {
background-color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8);
} }
@ -417,13 +345,16 @@ select {
padding: 0.5% 1% 0.5% 1%; padding: 0.5% 1% 0.5% 1%;
background-color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8);
-moz-border-radius: 10px; -moz-border-radius: 5px;
-webkit-border-radius: 10px; -webkit-border-radius: 5px;
border-radius: 10px; border-radius: 5px;
} }
.fc-left h2 { .fc-left h2 {
font-weight: 400; font-weight: 400;
-webkit-filter: none;
filter: none;
} }
.fc-head { .fc-head {
@ -446,5 +377,4 @@ select {
.fc-button:hover { .fc-button:hover {
background-color: rgba(255,255,255,0.9) !important; background-color: rgba(255,255,255,0.9) !important;
} }

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

@ -1,113 +1,64 @@
<head> <head>
<title>Hourglass</title> <title>Hourglass</title>
<link rel="icon" href="favicon.ico?v=2"> <link rel="icon" href="favicon.ico?v=2">
</head> </head>
<body>
</body>
<template name="main"> <template name="main">
<header style="background-color:{{divColor 'header'}}"> <header style="background-color:{{divColor 'header'}}">
<div id="aboveBar"> <div id="aboveBar">
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i> <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
<h1>Hourglass</h1> <h2>{{schoolname}}</h2> <h1>Hourglass</h1><h2>{{schoolName}}</h2>
<i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i> <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
</div> </div>
<div id="loadBar"> <div id="loadBar">
<div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div> <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
</div> </div>
</header> </header>
<div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}"> <div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
<div class="mode classes"> <div class="mode classes">
<i class="fa fa-university" aria-hidden="true"></i> <i class="fa fa-university" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'classes'}}">Classes</h4> <h4 style="color:{{modeStatus 'classes'}}">Classes</h4>
</div> </div>
<div class="mode calendar"> <div class="mode calendar">
<i class="fa fa-calendar" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i>
<h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4> <h4 style="color:{{modeStatus 'calendar'}}">Calendar</h4>
</div> </div>
<div id="functions"> <div id="functions">
<div class="function addClass"> <div class="function manageClass" onclick="window.location='/profile'">
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-tasks" aria-hidden="true"></i>
<h4 style="color:{{functionStatus 'addClass'}}">Join Class</h4> <h4>Manage Classes</h4>
</div>
<div class="function createClass">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<h4 style="color:{{functionStatus 'creClass'}}">Create Class</h4>
</div>
<div class="function manageClass">
<i class="fa fa-tasks" aria-hidden="true"></i>
<h4 style="color:{{functionStatus 'manClass'}}">Manage Classes</h4>
</div>
</div>
<div id="functionHolder">
{{#if currFunction "addClass"}}
<p>Add a Class</p>
{{/if}}
{{#if currFunction "manClass"}}
<p>Manage Classes</p>
{{/if}}
{{#if currFunction "creClass"}}
<h2>Create a Class</h2>
<form id="create">
<p class="input">School:</p><br>
{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
<p class="input">Hour:</p><br>
<input class="creInput" type="text" name="hour"><br>
<p class="input">Teacher:</p><br>
{{> inputAutocomplete settings=teachercomplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
<p class="input">Class Name:</p><br>
<input class="creInput" type="text" name="classname"><br>
<p class="input">Privacy:</p><br>
<div class="select">
<input class="creInputSel creInput" type="text" name="privacy" op="0" readonly><br>
<div class="creOptions" style="background-color:{{divColor 'header'}}">
<p>Public</p>
<p>Private</p>
</div>
</div> </div>
<p class="input">Category:</p><br> </div>
<div class="select"> <div id="classListHolder">
<input class="creInputSel creInput" type="text" name="category" op="1" readonly><br>
<div class="creOptions" style="background-color:{{divColor 'header'}}"> </div>
<p>Class</p>
<p>Club</p>
<p>Other</p>
</div>
</div>
<div class="creSubmit">Submit Request</div>
</form>
{{/if}}
</div>
</div>
<div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
</div>
<img id="bg" src={{bgSrc}}>
<div id="mainBody">
{{#if currMode 'classes'}}
{{/if}}
{{#if currMode 'calendar'}}
<div id="calendar" style="{{calCenter}}">
{{> fullcalendar calendarOptions id="fullcalendar"}}
</div> </div>
{{/if}} <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
</div> </div>
<div class="overlay"> <img id="bg" src={{bgSrc}}>
<div class="overlayCont" style="{{overlayDim}};"> <div id="mainBody">
<p>Are you sure?</p> {{#if currMode 'classes'}}
<i class="fa fa-check-circle-o" aria-hidden="true"></i> {{/if}}
<i class="fa fa-times-circle-o" aria-hidden="true"></i> {{#if currMode 'calendar'}}
<div id="calbg" style="{{calbg}}"></div>
<div id="calendar" style="{{calCenter}}">
{{> fullcalendar calendarOptions id="fullcalendar"}}
</div>
{{/if}}
</div>
<div class="overlay">
<div class="overlayCont" style="{{overlayDim}};">
<p>Are you sure?</p>
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
<i class="fa fa-times-circle-o" aria-hidden="true"></i>
</div>
</div> </div>
</div>
</template> </template>
<template name="schoollist"> <template name="schoollist">
{{name}} {{name}}
</template> </template>
<template name="teacherlist"> <template name="teacherlist">
{{teacher}} {{teacher}}
</template> </template>

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

@ -33,13 +33,8 @@ var options = {
var searchSchools = []; var searchSchools = [];
Session.set("menuOpen", false); Session.set("sidebar",null);
Session.set("optionsOpen", false);
Session.set("mode",null); // Change to user preferences Session.set("mode",null); // Change to user preferences
Session.set("function", null);
Session.set("confirm",null);
Session.set("formCre",null);
Session.set("inputOpen",null);
Template.registerHelper( 'divColor', (div) => { Template.registerHelper( 'divColor', (div) => {
return themeColors[Cookie.get("theme")][div]; return themeColors[Cookie.get("theme")][div];
@ -55,12 +50,13 @@ Template.registerHelper( 'overlayDim', (part) => {
}) })
Template.main.helpers({ Template.main.helpers({
schoolname() { schoolName() {
return " - " + Meteor.user().profile.school; return " - " + Meteor.user().profile.school;
}, },
iconColor(icon) { iconColor(icon) {
let status = Session.get(icon+"Open"); if(Session.get("sidebar") === icon+"Container") {
if(status) { return themeColors[Cookie.get("theme")].statusIcons;
} else if(Session.get("sidebar") === "both") {
return themeColors[Cookie.get("theme")].statusIcons; return themeColors[Cookie.get("theme")].statusIcons;
} else { } else {
return; return;
@ -72,13 +68,23 @@ Template.main.helpers({
return pic; return pic;
}, },
menuStatus() { menuStatus() {
let status = Session.get("menuOpen"); if(Session.get("sidebar") === "menuContainer") {
if(status) { return "0%";
} else if(Session.get("sidebar") === "both") {
return "0%"; return "0%";
} else { } else {
return openValues["menu"]; return openValues["menu"];
} }
}, },
optionsStatus() {
if(Session.get("sidebar") === "optionsContainer") {
return "0%";
} else if(Session.get("sidebar") === "both") {
return "0%";
} else {
return openValues["options"];
}
},
modeStatus(status) { modeStatus(status) {
if(status === Session.get("mode")) { if(status === Session.get("mode")) {
return themeColors[Cookie.get("theme")].highlightText; return themeColors[Cookie.get("theme")].highlightText;
@ -86,13 +92,6 @@ Template.main.helpers({
return; return;
} }
}, },
functionStatus(status) {
if(status === Session.get("function")) {
return themeColors[Cookie.get("theme")].highlightText;
} else {
return;
}
},
currMode(name) { currMode(name) {
if(name === Session.get("mode")) { if(name === Session.get("mode")) {
return true; return true;
@ -100,57 +99,6 @@ Template.main.helpers({
return false; return false;
} }
}, },
currFunction(name) {
if(name === Session.get("function")) {
return true;
} else {
return false;
}
},
optionsStatus() {
let status = Session.get("optionsOpen");
if(status) {
return "0%";
} else {
return openValues["options"];
}
},
creHighlight(input) {
if(input == Session.get("creInput")) {
return "#CCEEFF";
} else {
return;
}
},
schoolcomplete() {
return {
position: "bottom",
limit: 6,
rules: [
{
token: '',
collection: schools,
field: 'name',
matchAll: true,
template: Template.schoollist
}
]
};
},
teachercomplete() {
return {
position: "bottom",
limit: 1,
rules: [
{
token: '',
collection: classes,
field: 'teacher',
template: Template.teacherlist
}
]
};
},
calendarOptions() { calendarOptions() {
var cursor = work.find({}); var cursor = work.find({});
var events = []; var events = [];
@ -160,35 +108,64 @@ Template.main.helpers({
duedate = current.dueDate.toISOString().slice(0,10); duedate = current.dueDate.toISOString().slice(0,10);
events.push({start: duedate, title: title, backgroundColor: backgroundColor}); events.push({start: duedate, title: title, backgroundColor: backgroundColor});
}); });
console.log(events);
return { return {
height: window.innerHeight *.8, height: window.innerHeight *.8,
events: events events: events,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
}
}; };
}, },
calCenter() { calCenter() {
var width = window.innerWidth * .85; var width = window.innerWidth * .85;
return "width:"+width.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px"; return "width:"+width.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px";
},
calbg() {
var width = window.innerWidth * .865;
var height = window.innerHeight * .76;
return "width:"+width.toString()+"px;height:"+height.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px;margin-top:"+(.47*window.innerHeight-.5*height).toString()+"px";
} }
}); });
Template.main.events({ Template.main.events({
'click .fa-bars' () { 'click .fa-bars' () {
Session.set("menuOpen",!Session.get("menuOpen")); 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");
} else {
Session.set("sidebar","menuContainer");
}
}, },
'click .fa-cog' () { 'click .fa-cog' () {
Session.set("optionsOpen",!Session.get("optionsOpen")); 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");
} else {
Session.set("sidebar","optionsContainer");
}
}, },
'click .classes' () { 'click .classes' () {
if(Session.get("mode") === "classes") return;
var modeHolder = document.getElementById("mainBody"); var modeHolder = document.getElementById("mainBody");
closeDivFade(modeHolder); closeDivFade(modeHolder);
setTimeout(function() { setTimeout(function() {
Session.set("mode","classes"); Session.set("mode","classes");
openDivFade(modeHolder); openDivFade(modeHolder);
}, 300); }, 300);
}, },
'click .calendar' () { 'click .calendar' () {
if(Session.get("mode") === "calendar") return;
var modeHolder = document.getElementById("mainBody"); var modeHolder = document.getElementById("mainBody");
closeDivFade(modeHolder); closeDivFade(modeHolder);
setTimeout(function() { setTimeout(function() {
@ -196,83 +173,14 @@ Template.main.events({
openDivFade(modeHolder); openDivFade(modeHolder);
}, 300); }, 300);
}, },
'click .addClass' () {
var functionHolder = document.getElementById("functionHolder")
closeDivFade(functionHolder);
setTimeout(function() {
Session.set("function","addClass");
openDivFade(functionHolder);
},300);
},
'click .manageClass' () {
var functionHolder = document.getElementById("functionHolder")
closeDivFade(functionHolder);
setTimeout(function() {
Session.set("function","manClass");
openDivFade(functionHolder);
},300);
},
'click .createClass' () {
var functionHolder = document.getElementById("functionHolder")
closeDivFade(functionHolder);
setTimeout(function() {
Session.set("function","creClass");
openDivFade(functionHolder);
},300);
},
'click .creSubmit' () {
openDivFade(document.getElementsByClassName("overlay")[0]);
setTimeout(function() {
document.getElementsByClassName("overlay")[0].style.opacity = "1";
}, 200);
Session.set("confirm","createClass");
},
'click .fa-check-circle-o' () {
sendData();
closeDivFade(document.getElementsByClassName("overlay")[0]);
closeDivFade(document.getElementById("functionHolder"));
document.getElementById("create").reset();
setTimeout(function() {
Session.set("confirm",null);
Session.set("function",null);
}, 300);
},
'click .fa-times-circle-o' () {
closeDivFade(document.getElementsByClassName("overlay")[0]);
closeDivFade(document.getElementById("functionHolder"));
document.getElementById("create").reset();
setTimeout(function() {
Session.set("confirm",null);
Session.set("function",null);
}, 300);
},
'click .creInput' (event) {
var opened = Session.get("inputOpen");
if(opened !== null && opened !== event.target.getAttribute("op")) {
closeDivFade(document.getElementsByClassName("creInputSel")[opened].parentNode.childNodes[4]);
}
},
'click .creInputSel' (event) {
Session.set("inputOpen", event.target.getAttribute("op"));
openDivFade(event.target.parentNode.childNodes[4]);
},
'focus .creInputSel' (event) {
Session.set("inputOpen", event.target.getAttribute("op"));
openDivFade(event.target.parentNode.childNodes[4]);
},
'click .creOptions p' (event) {
var p = event.target;
p.parentNode.parentNode.childNodes[1].value = p.childNodes[0].nodeValue;
closeDivFade(p.parentNode);
p.parentNode.parentNode.childNodes[1].focus();
Session.set("inputOpen",null)
},
'click' (event) { 'click' (event) {
var e = event.target.className; var e = event.target.className;
if(!(e.includes("creInput") || e.includes("select"))) { if(e !== Session.get("sidebar") &&
try { !e.includes("fa-cog") &&
closeDivFade(document.getElementsByClassName("creInputSel")[Session.get("inputOpen")].parentNode.childNodes[4]); !e.includes("fa-bars") &&
} catch(err) {} !document.getElementById("menuContainer").contains(event.target) &&
!document.getElementById("optionsContainer").contains(event.target)) {
Session.set("sidebar", null);
} }
} }
}); });

9
hourglass/client/profile/profile.js
View File

@ -213,10 +213,15 @@ Template.profile.events({
}, },
'click' (event) { 'click' (event) {
var sessval = Session.get("modifying"); var sessval = Session.get("modifying");
if(event.target.id !== sessval && event.target.id !== sessval+"a" && !Session.equals("modifying",null) && !event.target.parentNode.className.includes("profOptions")) { if(event.target.id !== sessval &&
event.target.id !== sessval+"a" &&
!Session.equals("modifying",null) &&
!event.target.parentNode.className.includes("profOptions")) {
closeInput(sessval); closeInput(sessval);
} }
if(!event.target.className.includes("radio") && !Session.equals("radioDiv",null) && !event.target.parentNode.className.includes("profOptions")) { if(!event.target.className.includes("radio") &&
!Session.equals("radioDiv",null) &&
!event.target.parentNode.className.includes("profOptions")) {
closeDivFade(document.getElementsByClassName("profOptions")[Session.get("radioDiv")]); closeDivFade(document.getElementsByClassName("profOptions")[Session.get("radioDiv")]);
} }
}, },

41
hourglass/server/main.js
View File

@ -13,8 +13,9 @@ Meteor.methods({
}, },
'createSchool': function(schoolname) { 'createSchool': function(schoolname) {
// if superadmin, no need for approval // if superadmin, no need for approval
if (Meteor.user() != null && schools.findOne({name:input.school}) != null && if (Meteor.user() != null &&
schools.findOne({status: false, creator: Meteor.userId()}) != null) { schools.findOne({name:input.school}) != null &&
schools.findOne({status: false, creator: Meteor.userId()}) != null) {
schools.insert({name: schoolname, status: false, creator: Meteor.userId()}); schools.insert({name: schoolname, status: false, creator: Meteor.userId()});
} }
@ -26,8 +27,10 @@ Meteor.methods({
'createClass': function(input) { 'createClass': function(input) {
// if superadmin, no need for approval // if superadmin, no need for approval
classes.schema.validate(input); classes.schema.validate(input);
if(Meteor.user() != null && classes.find({status:false, admin:Meteor.userId()}).fetch().length < 5 && if(Meteor.user() != null &&
schools.findOne({name:input.school}) != null) { classes.find({status:false, admin:Meteor.userId()}).fetch().length < 5 &&
schools.findOne({name:input.school}) != null) {
input.status = false; input.status = false;
input.subscribers = 0; input.subscribers = 0;
input.admin = Meteor.userId() input.admin = Meteor.userId()
@ -64,9 +67,15 @@ Meteor.methods({
ref = new Date(ref.getFullYear()+ "-" + month.toString() + "-" + ref.getDate()).getTime() ref = new Date(ref.getFullYear()+ "-" + month.toString() + "-" + ref.getDate()).getTime()
work.schema.validate(input); work.schema.validate(input);
found = Meteor.findOne({_id: input.class}) found = Meteor.findOne({_id: input.class})
if (Meteor.user() != null && found != null && found.subscribers.indexOf(Meteor.userId()) != -1
&& found.banned.indexOf(Meteor.userId()) === -1 && found.blockEdit.indexOf(Meteor.userId()) === -1 if (Meteor.user() != null &&
&& input.dueDate.getTime() >= ref && worktype.indexOf(type) != -1 && input.name.length <= 50) { found != null &&
found.subscribers.indexOf(Meteor.userId()) != -1 &&
found.banned.indexOf(Meteor.userId()) === -1 &&
found.blockEdit.indexOf(Meteor.userId()) === -1 &&
input.dueDate.getTime() >= ref && worktype.indexOf(type) != -1 &&
input.name.length <= 50) {
input.submittor = Meteor.userId(); input.submittor = Meteor.userId();
input.confirmations = [Meteor.userId()]; input.confirmations = [Meteor.userId()];
input.reports = []; input.reports = [];
@ -87,8 +96,13 @@ Meteor.methods({
current.description = change[2]; current.description = change[2];
current.avatar = change[3]; current.avatar = change[3];
current.banner = change[4]; current.banner = change[4];
if (schools.findOne({name:current.school}) != null && Number.isInteger(current.grade) &&
current.grade >= 9 && current.grade <= 12 && current.description.length <= 50) { if (schools.findOne({name:current.school}) != null &&
Number.isInteger(current.grade) &&
current.grade >= 9 &&
current.grade <= 12 &&
current.description.length <= 50) {
Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}}); Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}});
return 1; return 1;
} else { } else {
@ -97,8 +111,13 @@ Meteor.methods({
}, },
'joinClass': function(change, pass) { 'joinClass': function(change, pass) {
found = classes.findOne({_id: change, status: true}); found = classes.findOne({_id: change, status: true});
if (Meteor.user() != null && found != null && pass === found.code
&& found.banned.indexOf(Meteor.userId()) === -1 && Meteor.user().profile.classes.indexOf(change) === -1) { if (Meteor.user() != null &&
found != null &&
pass === found.code &&
found.banned.indexOf(Meteor.userId()) === -1 &&
Meteor.user().profile.classes.indexOf(change) === -1) {
current = Meteor.user().profile; current = Meteor.user().profile;
current.classes.append(change); current.classes.append(change);
Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}}); Meteor.users.update({_id: Meteor.userId()}, {$set: {profile: current}});