CSS optimization, changed client profile handling
This commit is contained in:
parent
8cbe8e253a
commit
b47a6e7f65
@ -209,7 +209,7 @@ input, textarea {
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: margin 0.5s ease, background-color 0.5s ease;
|
||||
@ -653,13 +653,17 @@ input, textarea {
|
||||
}
|
||||
|
||||
#calendar {
|
||||
padding-top: 2%;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
padding-top: 2%;
|
||||
}
|
||||
|
||||
#calbg {
|
||||
#fullcalendar {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
position: absolute;
|
||||
border: 2vh solid rgba(255,255,255,0.3);
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.fc-view-container, .fc-left {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
</head>
|
||||
|
||||
<template name="main">
|
||||
<header style="background-color:{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
|
||||
<header style="background-color:{{user}}{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
|
||||
<div id="aboveBar">
|
||||
<i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
|
||||
<h1>Hourglass</h1><h2>{{schoolName}}</h2>
|
||||
@ -107,8 +107,7 @@
|
||||
{{/if}}
|
||||
|
||||
{{#if currMode 'calendar'}}
|
||||
<div id="calbg" style="{{calbg}}"></div>
|
||||
<div id="calendar" style="{{calCenter}}{{calColor}}{{highlight}}">
|
||||
<div id="calendar" style="{{calColor}}{{highlight}}">
|
||||
{{> fullcalendar calendarOptions}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@ -22,19 +22,8 @@ var workColors = {
|
||||
"other": "#852E6D"
|
||||
};
|
||||
|
||||
//Creates variables for due dates
|
||||
|
||||
var ref = {
|
||||
"1 Day":1,
|
||||
"2 Days":2,
|
||||
"1 Week":7,
|
||||
"1 Month":30,
|
||||
"Never":0,
|
||||
"Yes":true,
|
||||
"No":false
|
||||
};
|
||||
|
||||
// Reactive variables.
|
||||
Session.set("user",null);
|
||||
Session.set("calendarClasses", null);
|
||||
Session.set("sidebar", null); // Status of sidebar
|
||||
Session.set("newWork",null); // If user creating new work.
|
||||
@ -48,36 +37,40 @@ Session.set("classDispHover",null); // Stores current hovered filter.
|
||||
Session.set("refetchEvents",null); // Stores whether to get calendar events again.
|
||||
Session.set("commentRestrict",null); // Stores text for comment character restriction.
|
||||
|
||||
Template.registerHelper('user', () => {
|
||||
var user = Meteor.user().profile;
|
||||
if(user === undefined || user === null) return;
|
||||
Session.set("user", user);
|
||||
return;
|
||||
});
|
||||
|
||||
Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
|
||||
if(Meteor.user() === undefined) return;
|
||||
return themeColors[Meteor.user().profile.preferences.theme][div];
|
||||
return themeColors[Session.get("user").preferences.theme][div];
|
||||
});
|
||||
|
||||
Template.registerHelper('textColor', () => { // Reactive color for text.
|
||||
if(Meteor.user() === undefined) return;
|
||||
document.getElementsByTagName("body")[0].style.color = themeColors[Meteor.user().profile.preferences.theme].text;
|
||||
document.getElementsByTagName("body")[0].style.color = themeColors[Session.get("user").preferences.theme].text;
|
||||
return;
|
||||
});
|
||||
|
||||
Template.registerHelper('overlayDim', (part) => { // Gets size of the overlay container.
|
||||
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;";
|
||||
var margin = "margin-left:" + (-dim[0] / 2).toString() + "px;";
|
||||
var bg = "background-color:" + themeColors[Meteor.user().profile.preferences.theme].header + ";";
|
||||
var bg = "background-color:" + themeColors[Session.get("user").preferences.theme].header + ";";
|
||||
return width + height + margin + bg;
|
||||
});
|
||||
|
||||
Template.registerHelper('myClasses', () => { // Gets all classes and respective works.
|
||||
if(Meteor.user() === undefined) { // Null checking.
|
||||
if(Session.get("user")["classes"].length === 0) { // Null checking.
|
||||
Session.set("noclass",true); // Makes sure to display nothing.
|
||||
return [];
|
||||
} else {
|
||||
var array = [];
|
||||
var courses = Meteor.user().profile.classes;
|
||||
var courses = Session.get("user").classes;
|
||||
var classDisp = Session.get("classDisp"); // Get sidebar class filter.
|
||||
var hide = Meteor.user().profile.preferences.timeHide;
|
||||
var hide = Session.get("user").preferences.timeHide;
|
||||
|
||||
for(var i = 0; i < courses.length; i++) { // For each user class.
|
||||
found = classes.findOne({_id:courses[i]});
|
||||
@ -106,7 +99,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
if(thisWork[j] !== "no" && Meteor.user().profile.preferences.done) { // If done filter is true
|
||||
if(thisWork[j] !== "no" && Session.get("user").preferences.done) { // If done filter is true
|
||||
if(thisWork[j].done.indexOf(Meteor.userId()) !== -1) { // If user marked this work done.
|
||||
thisWork[j] = "no";
|
||||
j = 0;
|
||||
@ -154,8 +147,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
|
||||
});
|
||||
|
||||
Template.registerHelper('pref', (val) => { // Obtains all user preferences.
|
||||
if(Meteor.user() === undefined) return;
|
||||
var preferences = Meteor.user().profile.preferences;
|
||||
var preferences = Session.get("user").preferences;
|
||||
if(val === 'timeHide' || val === 'done') {
|
||||
var invert = _.invert(ref);
|
||||
return invert[preferences[val]];
|
||||
@ -165,28 +157,27 @@ Template.registerHelper('pref', (val) => { // Obtains all user preferences.
|
||||
|
||||
Template.main.helpers({
|
||||
schoolName() { // Finds the name of the user's school.
|
||||
if(Meteor.user().profile.school === undefined) return;
|
||||
return " - " + Meteor.user().profile.school;
|
||||
if(Session.get("user").school === undefined) return;
|
||||
return " - " + Session.get("user").school;
|
||||
},
|
||||
iconColor(icon) { // Sidebar status color
|
||||
if (Session.equals("sidebar",icon + "Container")) {
|
||||
return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
|
||||
return themeColors[Session.get("user").preferences.theme].statusIcons;
|
||||
} else if (Session.equals("sidebar","both")) {
|
||||
return themeColors[Meteor.user().profile.preferences.theme].statusIcons;
|
||||
return themeColors[Session.get("user").preferences.theme].statusIcons;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
defaultMode() { //Loads the default display mode for user.
|
||||
if(load) {
|
||||
Session.set("mode",Meteor.user().profile.preferences.mode);
|
||||
Session.set("mode",Session.get("user").preferences.mode);
|
||||
load = false;
|
||||
}
|
||||
return;
|
||||
},
|
||||
bgSrc() { // Adjusts for different, larger screen sizes.
|
||||
var dim = [window.innerWidth, window.innerHeight];
|
||||
var pic = "Backgrounds/"+themeColors[Meteor.user().profile.preferences.theme].background;
|
||||
bgSrc() { // Returns background.
|
||||
var pic = "Backgrounds/"+themeColors[Session.get("user").preferences.theme].background;
|
||||
return pic;
|
||||
},
|
||||
menuStatus() { // Status of of menu sidebar.
|
||||
@ -209,7 +200,7 @@ Template.main.helpers({
|
||||
},
|
||||
modeStatus(status) { // Color status of display modes.
|
||||
if (Session.equals("mode",status)) {
|
||||
return themeColors[Meteor.user().profile.preferences.theme].highlightText;
|
||||
return themeColors[Session.get("user").preferences.theme].highlightText;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
@ -293,13 +284,9 @@ Template.main.helpers({
|
||||
return "width:" + width.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;";
|
||||
},
|
||||
calColor() { // Sets the color of the calendar according to theme
|
||||
return "color:"+themeColors[Meteor.user().profile.preferences.theme].calendar;
|
||||
},
|
||||
calbg() { //Sets size of the calendar
|
||||
var width = window.innerWidth * 0.865;
|
||||
var height = window.innerHeight * 0.76;
|
||||
return "width:" + width.toString() + "px;height:" + height.toString() + "px;margin-left:" + (0.5 * window.innerWidth - 0.5 * width).toString() + "px;margin-top:" + (0.47 * window.innerHeight - 0.5 * height).toString() + "px";
|
||||
return "color:"+themeColors[Session.get("user").preferences.theme].calendar;
|
||||
},
|
||||
|
||||
calCreWork() { // Display instructions for creating a work.
|
||||
if(Session.get("calCreWork")) return true;
|
||||
return false;
|
||||
@ -856,7 +843,7 @@ function getHomeworkFormData() { // Get all data relating to work creation.
|
||||
}
|
||||
|
||||
function getPreferencesData() { // Get all data relating to preferences.
|
||||
var profile = Meteor.user().profile;
|
||||
var profile = Session.get("user");
|
||||
var options = {
|
||||
"theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
|
||||
"mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
.profHea {
|
||||
font-size: 300%;
|
||||
font-weight: 200;
|
||||
padding: 6% 6% 0 8%;
|
||||
}
|
||||
|
||||
#motda {
|
||||
@ -35,42 +36,54 @@
|
||||
|
||||
#profPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 10%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#profMainContainer {
|
||||
width: 85%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#profTop {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
#profBanner {
|
||||
border: 5px solid #0D0D0D;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-left: 5px solid #0D0D0D;
|
||||
border-right: 5px solid #0D0D0D;
|
||||
}
|
||||
|
||||
#profAvatar {
|
||||
height: 27vh;
|
||||
width: 27vh;
|
||||
|
||||
border: 10px solid #0D0D0D;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 2.5%;
|
||||
float: left;
|
||||
bottom: -6.5%;
|
||||
left: 1.5%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#motdBox {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
margin-top: -0.3%;
|
||||
padding: 0.5% 0 0.5% 0;
|
||||
|
||||
background-color: #0D0D0D;
|
||||
|
||||
border-left: 5px solid #0D0D0D;
|
||||
border-right: 5px solid #0D0D0D;
|
||||
}
|
||||
|
||||
#motdBox span {
|
||||
@ -118,39 +131,69 @@
|
||||
}
|
||||
|
||||
#profCards {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 3%;
|
||||
margin-bottom: 3%;
|
||||
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
|
||||
display: table;
|
||||
}
|
||||
|
||||
#cardColLeft, #cardColRight {
|
||||
height: 100%;
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#cardColLeft {
|
||||
width: 39.6%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#cardColRight {
|
||||
width: 60%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 5%;
|
||||
padding: 4%;
|
||||
padding-top: 2.5%;
|
||||
padding-right: 2%;
|
||||
|
||||
width: 95%;
|
||||
margin-bottom: 9%;
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#profInfo {
|
||||
width: 30%;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
border-top: 5px solid #CC4444;
|
||||
}
|
||||
|
||||
#about {
|
||||
padding: 5%;
|
||||
#about, #preferences {
|
||||
padding: 3% 5% 7% 14%;
|
||||
}
|
||||
|
||||
.radioContainer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#classes {
|
||||
padding: 3% 5% 7% 7%;
|
||||
}
|
||||
|
||||
#profClasses {
|
||||
width: 52%;
|
||||
height: 30%;
|
||||
float: right;
|
||||
height: 90%;
|
||||
margin-right: 0;
|
||||
border-top: 5px solid #2E4F74;
|
||||
|
||||
-webkit-transition: width 0.4s ease;
|
||||
-moz-transition: width 0.4s ease;
|
||||
-ms-transition: width 0.4s ease;
|
||||
transition: width 0.4s ease;
|
||||
float: right;
|
||||
|
||||
-webkit-transition: height 0.5s ease;
|
||||
-moz-transition: height 0.5s ease;
|
||||
-ms-transition: height 0.5s ease;
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
|
||||
#profClassInfoHolder {
|
||||
@ -160,10 +203,6 @@
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
#classes {
|
||||
padding: 4% 0 4% 0;
|
||||
}
|
||||
|
||||
#profFunctions {
|
||||
display: inline;
|
||||
}
|
||||
@ -238,6 +277,7 @@
|
||||
|
||||
.classHolder {
|
||||
width: 90%;
|
||||
max-height: 26vh;
|
||||
padding: 1%;
|
||||
padding-right: 100%;
|
||||
|
||||
@ -338,11 +378,11 @@
|
||||
}
|
||||
|
||||
#creRules {
|
||||
position: absolute;
|
||||
margin: 5%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#create {
|
||||
margin-top: 2.5%;
|
||||
padding: 5%;
|
||||
padding-top: 1%;
|
||||
}
|
||||
@ -401,26 +441,10 @@
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
#mainpage:hover, #logout2:hover {
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
#mainpage h2, #logout2 h2 {
|
||||
font-weight: 200;
|
||||
width: 100%;
|
||||
padding: 8%;
|
||||
|
||||
-webkit-filter: none;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
#mainpage, #logout2 {
|
||||
font-size: 90%;
|
||||
padding: 0.3%;
|
||||
margin: 0;
|
||||
padding: 0.7%;
|
||||
background-color: #617C9E;
|
||||
|
||||
box-shadow: -1px 2px 5px 1px #333;
|
||||
@ -430,11 +454,22 @@
|
||||
left: 10%;
|
||||
z-index: 50;
|
||||
|
||||
-webkit-transition: transform 0.2s ease, background-color 0.1s ease;
|
||||
-moz-transition: transform 0.2s ease, background-color 0.1s ease;
|
||||
-ms-transition: transform 0.2s ease, background-color 0.1s ease;
|
||||
transition: transform 0.2s ease, background-color 0.1s ease;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-transition: background-color 0.1s ease;
|
||||
-moz-transition: background-color 0.1s ease;
|
||||
-ms-transition: background-color 0.1s ease;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#mainpage:hover {
|
||||
background-color: #56708D;
|
||||
}
|
||||
|
||||
#logout2:hover {
|
||||
background-color: #C84949;
|
||||
}
|
||||
|
||||
#logout2 {
|
||||
background-color: #DE5050;
|
||||
position: absolute;
|
||||
@ -442,8 +477,12 @@
|
||||
left: 85%;
|
||||
}
|
||||
|
||||
#mainpage:active, #logout2:active {
|
||||
background-color: #56708D;
|
||||
#mainpage h2, #logout2 h2 {
|
||||
font-weight: 200;
|
||||
width: 100%;
|
||||
|
||||
-webkit-filter: none;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
#createdClasses {
|
||||
@ -521,7 +560,7 @@
|
||||
|
||||
.userHolder {
|
||||
width: 100%;
|
||||
max-height: 10%;
|
||||
max-height: 10vh;
|
||||
margin-left: 5%;
|
||||
padding: 2%;
|
||||
padding-right: 20%;
|
||||
@ -533,10 +572,10 @@
|
||||
.userBox {
|
||||
font-size: 100%;
|
||||
width: 80%;
|
||||
margin-bottom: 3%;
|
||||
padding: 4%;
|
||||
margin-bottom: 1.5%;
|
||||
padding: 2%;
|
||||
|
||||
box-shadow: 2px 2px 5px 3px #666;
|
||||
box-shadow: 1px 1px 5px 1px #666;
|
||||
display: table;
|
||||
}
|
||||
|
||||
@ -671,11 +710,5 @@
|
||||
}
|
||||
|
||||
#profPreferences {
|
||||
width: 30%;
|
||||
float: left;
|
||||
border-top: 5px solid #409333;
|
||||
}
|
||||
|
||||
#preferences {
|
||||
padding: 5%;
|
||||
}
|
||||
@ -1,15 +1,18 @@
|
||||
<template name="profile">
|
||||
{{> loginButtons}}
|
||||
<div id="profPage" style="background-color:{{divColor 'header'}};height:{{mainHeight}};{{textColor}}{{loadNew}}">
|
||||
<div id="mainpage" onclick="window.location='/'"><h2>Main Page</h2></div>
|
||||
<div id="mainpage{{user}}" onclick="window.location='/'"><h2>Main Page</h2></div>
|
||||
<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></div>
|
||||
<div id="profMainContainer" style="{{mainCenter}}">
|
||||
<div id="profBanner" style="{{banner}};"></div>
|
||||
<div id="profAvatar" style="{{avatar}};{{avatarDim}}"></div>
|
||||
<div id="profPage" style="background-color:{{divColor 'header'}};{{textColor}}{{loadNew}}">
|
||||
<div id="profMainContainer">
|
||||
<div id="profTop">
|
||||
<img id="profBanner" src='{{banner}}' alt="Banner">
|
||||
<img id="profAvatar" src='{{avatar}}' alt="Avatar">
|
||||
<div id="motdBox">
|
||||
<span class="username">{{username}} - </span><span class="change mo" restrict="50" id="motd">{{motd}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profCards">
|
||||
<div id="cardColLeft">
|
||||
<!-- Card 1 -->
|
||||
<div id="profInfo" class="card" style="background-color:{{divColor 'cards'}}">
|
||||
<h3 class="profHea">About</h3>
|
||||
<div id="about">
|
||||
@ -18,7 +21,7 @@
|
||||
<span class="change" id="school">{{school}}</span>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="radioContainer">
|
||||
<div>
|
||||
<p class="profTitle">Grade:</p>
|
||||
<span class="change radio" re="readonly" id="grade">{{grade}}</span>
|
||||
@ -32,7 +35,62 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};height:{{profClassHeight}};">
|
||||
<!-- Card 2 -->
|
||||
<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
|
||||
<h3 class="profHea">Preferences</h3>
|
||||
<div id="preferences">
|
||||
<div class="radioContainer">
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Theme:</p>
|
||||
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Light</p>
|
||||
<p class="profOptionText">Dark</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="radioContainer">
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Default Mode:</p>
|
||||
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Classes</p>
|
||||
<p class="profOptionText">Calendar</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="radioContainer">
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Hide Homework:</p>
|
||||
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">1 Day</p>
|
||||
<P class="profOptionText">2 Days</p>
|
||||
<p class="profOptionText">1 Week</p>
|
||||
<p class="profOptionText">1 Month</p>
|
||||
<p class="profOptionText">Never</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="radioContainer">
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Hide Done:</p>
|
||||
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Yes</p>
|
||||
<p class="profOptionText">No</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cardColRight">
|
||||
<!-- Card 3 -->
|
||||
<div id="profClasses" class="card" style="background-color:{{divColor 'cards'}};">
|
||||
<h3 class="profHea">Classes</h3>
|
||||
<div id="classes">
|
||||
<div id="profFunctions">
|
||||
@ -57,7 +115,7 @@
|
||||
<span class="hour classText">Hour</span>
|
||||
<span class="subscriptions classText">Members</span>
|
||||
</div>
|
||||
<div class="classHolder" style="max-height:{{classHolderHeight}}">
|
||||
<div class="classHolder">
|
||||
{{#each myClasses}}
|
||||
{{> classDisplay}}
|
||||
|
||||
@ -78,7 +136,7 @@
|
||||
<span class="hour classText">Hour</span>
|
||||
<span class="subscriptions classText">Members</span>
|
||||
</div>
|
||||
<div class="classHolder" style="max-height:{{classHolderHeight}}">
|
||||
<div class="classHolder">
|
||||
{{#if notsearching}}
|
||||
{{#each classes}}
|
||||
{{> classDisplay}}
|
||||
@ -99,7 +157,6 @@
|
||||
|
||||
{{#if profClassTab "creClass"}}
|
||||
<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
|
||||
<form id="create">
|
||||
<div id="formContainer">
|
||||
<div class="formDiv">
|
||||
<p class="profTitle">School:</p>
|
||||
@ -136,61 +193,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<h3 id="creSubmit">Submit Request</h3>
|
||||
</form>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="profPreferences" class="card" style="background-color:{{divColor 'cards'}}">
|
||||
<h3 class="profHea">Preferences</h3>
|
||||
<div id="preferences">
|
||||
<div>
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Theme:</p>
|
||||
<span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Light</p>
|
||||
<p class="profOptionText">Dark</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Default Mode:</p>
|
||||
<span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Classes</p>
|
||||
<p class="profOptionText">Calendar</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Hide Homework:</p>
|
||||
<span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">1 Day</p>
|
||||
<P class="profOptionText">2 Days</p>
|
||||
<p class="profOptionText">1 Week</p>
|
||||
<p class="profOptionText">1 Month</p>
|
||||
<p class="profOptionText">Never</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div class="inputRadio">
|
||||
<p class="profTitle">Hide Done:</p>
|
||||
<span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
|
||||
</div>
|
||||
<div class="profOptions" style="background-color:{{divColor 'header'}}">
|
||||
<p class="profOptionText">Yes</p>
|
||||
<p class="profOptionText">No</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,7 +222,7 @@
|
||||
<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="userHolder" style="max-height:{{userHolder}}">
|
||||
<div class="userHolder">
|
||||
{{#each selectedClass 'moderators'}}
|
||||
{{> userDisplay}}
|
||||
{{/each}}
|
||||
@ -228,7 +234,7 @@
|
||||
<input class="userAddInput" type="text" placeholder="1234@abc.xyz">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="userHolder" style="max-height:{{userHolder}}">
|
||||
<div class="userHolder">
|
||||
{{#each selectedClass 'banned'}}
|
||||
{{> userDisplay}}
|
||||
{{/each}}
|
||||
@ -245,6 +251,7 @@
|
||||
<input id="privateCode" type="text" placeholder="Enter code here...">
|
||||
<h4 id="privSubmit">Submit</h4>
|
||||
</div>
|
||||
{{> loginButtons}}
|
||||
</template>
|
||||
|
||||
<template name="classDisplay">
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import {
|
||||
/* jshint esversion: 6 */
|
||||
|
||||
import {
|
||||
Template
|
||||
} from 'meteor/templating';
|
||||
|
||||
@ -58,46 +60,14 @@ Template.profile.helpers({
|
||||
}]
|
||||
};
|
||||
},
|
||||
mainCenter() { // Centers main div container.
|
||||
var width = window.innerWidth * 1600 / 1920 + 10;
|
||||
return "width:" + width.toString() + "px;margin-left:" + -0.5 * width.toString() + "px";
|
||||
banner() { // Returns banner
|
||||
return Session.get("user").banner;
|
||||
},
|
||||
mainHeight() { // Returns height of screen for div.
|
||||
return window.innerHeight.toString() + "px";
|
||||
},
|
||||
banner() { // Styles the banner
|
||||
var width = window.innerWidth * 1600 / 1920;
|
||||
var height = width * 615 / 1600;
|
||||
if (Meteor.user().profile.banner !== undefined || Meteor.user().profile.banner !== null) {
|
||||
var banner = Meteor.user().profile.banner;
|
||||
} else {
|
||||
var banner = "Banners/defaultcover.jpg";
|
||||
currentprofile = Meteor.user().profile;
|
||||
currentprofile.banner = banner
|
||||
Meteor.call("editProfile", currentprofile);
|
||||
}
|
||||
return "width:" + width.toString() + "px;height:" + height.toString() + "px;background-image:url(" + banner + ");background-size:" + width.toString() + "px " + height.toString() + "px";
|
||||
},
|
||||
avatar() { // Styles the avatar
|
||||
var dim = window.innerWidth * 1600 / 1920 * 0.16;
|
||||
var pic = "";
|
||||
var userprofile = Meteor.user().profile.avatar;
|
||||
if (userprofile !== undefined && userprofile !== null) {
|
||||
pic = Meteor.user().profile.avatar;
|
||||
} else {
|
||||
pic = "Avatars/" + (Math.floor(Math.random() * (11 - 1)) + 1).toString() + ".png";
|
||||
currentprofile = Meteor.user().profile;
|
||||
currentprofile.avatar = pic;
|
||||
Meteor.call("editProfile", currentprofile);
|
||||
}
|
||||
return "background-image:url(" + pic + ");background-size:" + dim.toString() + "px " + dim.toString() + "px";
|
||||
},
|
||||
avatarDim() { // Dimensions of the avatar
|
||||
var dim = window.innerWidth * 1600 / 1920 * 0.16;
|
||||
return "height:" + dim.toString() + "px;width:" + dim.toString() + "px;top:" + 0.43 * window.innerHeight.toString() + "px;";
|
||||
avatar() { // Returns avatar
|
||||
return Session.get("user").avatar;
|
||||
},
|
||||
username() { //Returns current user's username
|
||||
return Meteor.user().profile.name;
|
||||
return Session.get("user").name;
|
||||
},
|
||||
motd() { // Returns the current user's description
|
||||
if (Meteor.user().profile.description) {
|
||||
@ -141,12 +111,6 @@ Template.profile.helpers({
|
||||
}
|
||||
return array;
|
||||
},
|
||||
profClassHeight() { // Dimensions the class height
|
||||
return 0.6 * window.innerHeight.toString() + "px";
|
||||
},
|
||||
classHolderHeight() { // Dimensions the container for the classes
|
||||
return 0.26 * window.innerHeight.toString() + "px";
|
||||
},
|
||||
profClassTabColor(status) { // Change this [Supposed to show the current mode that's selected via color]
|
||||
if (Session.equals("profClassTab",status)) {
|
||||
return themeColors[Meteor.user().profile.preferences.theme].highlightText;
|
||||
@ -206,9 +170,6 @@ Template.profile.helpers({
|
||||
},
|
||||
code() { // Returns if selected class has code.
|
||||
return Session.get("code");
|
||||
},
|
||||
userHolder() { // Returns height of user holders for moderators/banned.
|
||||
return 0.15 * window.innerHeight.toString() + "px";
|
||||
}
|
||||
});
|
||||
|
||||
@ -249,29 +210,41 @@ Template.profile.events({
|
||||
}
|
||||
},
|
||||
// MAIN BUTTONS
|
||||
'click .addClass' () {
|
||||
'click .addClass' () {
|
||||
if(Session.equals("profClassTab","addClass")) return;
|
||||
var functionHolder = document.getElementById("profClassInfoHolder");
|
||||
closeDivFade(functionHolder);
|
||||
closeDivFade(functionHolder);
|
||||
var div = document.getElementById("profClasses");
|
||||
div.style.height = "50%"
|
||||
setTimeout(function() {
|
||||
Session.set("profClassTab", "addClass");
|
||||
Session.set("profClassTab", "addClass");
|
||||
div.style.height = "90%";
|
||||
openDivFade(functionHolder);
|
||||
}, 300);
|
||||
}, 400);
|
||||
},
|
||||
'click .manageClass' () {
|
||||
'click .manageClass' () {
|
||||
if(Session.equals("profClassTab","manClass")) return;
|
||||
var functionHolder = document.getElementById("profClassInfoHolder");
|
||||
closeDivFade(functionHolder);
|
||||
closeDivFade(functionHolder);
|
||||
var div = document.getElementById("profClasses");
|
||||
div.style.height = "50%"
|
||||
setTimeout(function() {
|
||||
Session.set("profClassTab", "manClass");
|
||||
Session.set("profClassTab", "manClass");
|
||||
div.style.height = "90%";
|
||||
openDivFade(functionHolder);
|
||||
}, 300);
|
||||
}, 400);
|
||||
},
|
||||
'click .createClass' () {
|
||||
'click .createClass' () {
|
||||
if(Session.equals("profClassTab","creClass")) return;
|
||||
var functionHolder = document.getElementById("profClassInfoHolder");
|
||||
closeDivFade(functionHolder);
|
||||
closeDivFade(functionHolder);
|
||||
var div = document.getElementById("profClasses");
|
||||
div.style.height = "50%"
|
||||
setTimeout(function() {
|
||||
Session.set("profClassTab", "creClass");
|
||||
Session.set("profClassTab", "creClass");
|
||||
div.style.height = "90%";
|
||||
openDivFade(functionHolder);
|
||||
}, 300);
|
||||
}, 400);
|
||||
},
|
||||
'click .classBox' (event) { // When you click on a box that holds class
|
||||
if (event.target.id === "label" ||
|
||||
@ -600,7 +573,8 @@ function closeInput(modifyingInput) { // Closes current modifying input.
|
||||
}
|
||||
span.style.display = "initial";
|
||||
Session.set("modifying", null);
|
||||
serverData = getProfileData();
|
||||
Session.set("user", getProfileData());
|
||||
serverData = Session.get("user");
|
||||
sendData("editProfile");
|
||||
}
|
||||
|
||||
@ -609,19 +583,19 @@ function sendData(funcName) {
|
||||
}
|
||||
|
||||
function getProfileData() { // Gets all data related to profile.
|
||||
var profile = Meteor.user().profile;
|
||||
var profile = Session.get("user");
|
||||
profile.description = document.getElementById("motd").childNodes[0].nodeValue;
|
||||
profile.school = document.getElementById("school").childNodes[0].nodeValue;
|
||||
var gradein = document.getElementById("grade").childNodes[0].nodeValue;
|
||||
profile.grade = parseInt(gradein.substring(gradein.length - 2, gradein));
|
||||
profile.avatar = document.getElementById("profAvatar").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
|
||||
profile.banner = document.getElementById("profBanner").style.backgroundImage.replace(")", "").replace("url(", "").replace("\"", "").replace("\"", "");
|
||||
profile.avatar = document.getElementById("profAvatar").src;
|
||||
profile.banner = document.getElementById("profBanner").src;
|
||||
profile.preferences = {
|
||||
"theme":document.getElementById("prefTheme").childNodes[0].nodeValue.toLowerCase(),
|
||||
"mode":document.getElementById("prefMode").childNodes[0].nodeValue.toLowerCase(),
|
||||
"timeHide":document.getElementById("prefHide").childNodes[0].nodeValue
|
||||
"timeHide":ref[document.getElementById("prefHide").childNodes[0].nodeValue],
|
||||
"done":ref[document.getElementById("prefDone").childNodes[0].nodeValue]
|
||||
};
|
||||
|
||||
return profile;
|
||||
}
|
||||
|
||||
|
||||
@ -29,3 +29,12 @@ themeColors = {
|
||||
};
|
||||
|
||||
serverData = null;
|
||||
ref = {
|
||||
"1 Day":1,
|
||||
"2 Days":2,
|
||||
"1 Week":7,
|
||||
"1 Month":30,
|
||||
"Never":0,
|
||||
"Yes":true,
|
||||
"No":false
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user