Added admin page layout, small null checking changes

This commit is contained in:
Kenneth Jao 2016-09-04 01:09:05 -04:00
parent 69b441ec25
commit 9ec4fc6bfb
6 changed files with 142 additions and 9 deletions

View File

@ -0,0 +1,87 @@
#adminBanner {
width: 100%;
position: relative;
}
#adminTabs {
font-size: 120%;
width: 100%;
margin: 0 0 0 10%;
padding: 0.1% 0 0 0;
position: absolute;
bottom: 0;
overflow: hidden;
list-style-type: none;
}
#adminTabs li {
width: 5%;
margin: 0 0.5% 0 0.5%;
padding: 0.7% 0.7% 0.5% 0.7%;
box-shadow: 1px 1px 5px 1px #333;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
display: block;
text-align: center;
float: left;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
-ms-transition: box-shadow 035s ease;
transition: box-shadow 0.3s ease;
}
#adminTabs li:hover {
box-shadow: 1px 1px 5px 1px #333, inset 0 0 0 99999px rgba(0,0,0,0.2);
}
#aContainer {
width: 100%;
height: 100%;
display: inline-block;
}
#adminSide {
width: 10%;
height: 100%;
display: inline-block;
}
#sectionTop {
font-size: 130%;
margin: 0;
padding: 6% 6% 6% 9%;
background-color: rgba(0,0,0,0.3);
box-shadow: -5px -1px 7px 3px #555;
}
#sectionTop p {
margin-left: 10%;
display: inline;
}
.filter {
font-size: 100%;
margin: 0;
padding: 7% 10% 7% 5%;
text-align: right;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
-ms-transition: box-shadow 035s ease;
transition: box-shadow 0.3s ease;
}
.filter:hover {
box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.08);
}
#adminContent {
width: 90%;
height: 100%;
float: right;
}

View File

@ -0,0 +1,22 @@
<template name="admin">
<div id="adminBanner" style="{{banner}}{{textColor}}">
<ul id="adminTabs">
<li id="aClasses" style="background-color:{{divColor 'adminButtons'}};margin-left:0">Classes</li>
<li id="aUsers" style="background-color:{{divColor 'adminButtons'}}">Users</li>
<li id="aWork" style="background-color:{{divColor 'adminButtons'}}">Work</li>
<li id="aSchools" style="background-color:{{divColor 'adminButtons'}}">Schools</li>
<li id="aReports" style="background-color:{{divColor 'adminButtons'}}">Reports</li>
</ul>
</div>
<div id="aContainer">
<div id="adminSide" style="background-color:{{divColor 'sidebar'}}">
<div id="sectionTop"><i class="fa fa-server" aria-hidden="true"></i><p>Filters</p></div>
{{#each filters}}
<p class="filter">{{filter}}</p>
{{/each}}
</div>
<div id="adminContent" style="background-color:{{divColor 'header'}}">
</div>
</div>
</template>

View File

@ -0,0 +1,23 @@
Session.set("adminTab","aClasses");
Template.admin.helpers({
banner() {
if(Meteor.user() === null || Meteor.user() === undefined) return;
var w = window.innerWidth;
var h = window.innerHeight * 0.3;
return "width:" + w + "px;height:" + h + "px;background-image:url(\'" + Meteor.user().profile.banner + "\');background-size:" + w+"px";
},
filters() {
return [{filter:"Lol"}];
}
});
Template.admin.events({
'click #adminTabs li' (event) {
var id = event.target.id;
document.getElementById(Session.get("adminTab")).style.backgroundColor = themeColors[Meteor.user().profile.preferences.theme].adminButtons;
Session.set("adminTab",id);
document.getElementById(id).style.backgroundColor = themeColors[Meteor.user().profile.preferences.theme].header;
}
})

View File

@ -26,6 +26,7 @@ Tag { Always spaces between values
html {
font-family: 'Raleway';
font-weight: 200;
height: 100%;
overflow: hidden;
/*background-image: url("Hourglass.png");
@ -76,6 +77,7 @@ html {
}
body {
height: 100%;
margin: 0;
}

View File

@ -49,20 +49,18 @@ Session.set("refetchEvents",null); // Stores whether to get calendar events agai
Session.set("commentRestrict",null); // Stores text for comment character restriction.
Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
if(Meteor.user() === null) return;
if(Meteor.user().profile.preferences === undefined) return;
if(Meteor.user() === undefined) return;
return themeColors[Meteor.user().profile.preferences.theme][div];
});
Template.registerHelper('textColor', () => { // Reactive color for text.
if(Meteor.user() === null) return;
if(Meteor.user().profile.preferences === undefined) return;
if(Meteor.user() === undefined) return;
document.getElementsByTagName("body")[0].style.color = themeColors[Meteor.user().profile.preferences.theme].text;
return;
});
Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
if(Meteor.user() === null) return;
if(Meteor.user() === undefined) return;
var dim = [window.innerWidth * 0.25, window.innerHeight * 0.2];
var width = "width:" + dim[0].toString() + "px;";
var height = "height:" + dim[1].toString() + "px;";
@ -72,8 +70,7 @@ Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay co
});
Template.registerHelper('myClasses', () => { // Gets all classes and respective works.
if(Meteor.user() === null) return;
if (Meteor.user().profile.classes === undefined || Meteor.user().profile.classes.length === 0) { // Null checking.
if(Meteor.user() === undefined) { // Null checking.
Session.set("noclass",true); // Makes sure to display nothing.
return [];
} else {
@ -157,7 +154,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
});
Template.registerHelper('pref', (val) => { // Obtains all user preferences.
if(Meteor.user() === null) return;
if(Meteor.user() === undefined) return;
var preferences = Meteor.user().profile.preferences;
if(val === 'timeHide' || val === 'done') {
var invert = _.invert(ref);

View File

@ -3,6 +3,7 @@ themeColors = {
"background": "White.jpg",
"header": "#EBEBEB",
"sidebar": "#65839A",
"adminButtons": "#C8C0C0",
"funcButton": "#849CAE",
"statusIcons": "#33ADFF",
"highlightText": "#FF1A1A",
@ -15,7 +16,8 @@ themeColors = {
"background": "Black.jpg",
"header": "#373A56",
"sidebar": "#35435D",
"funcButton": "#5d75A2",
"adminButtons": "#63667E",
"funcButton": "#5D75A2",
"statusIcons": "#33ADFF",
"highlightText": "#FF1A1A",
"cards": "#151A2B",