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

CSS size and zoom fixes

Browse Source
This commit is contained in:
Kenneth Jao 2016-09-12 11:12:06 -04:00
parent 7842b995dc
commit a5d0d17947
6 changed files with 248 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -777,7 +777,6 @@ input, textarea {
}
#bg {
min-width: 1920px;
min-height: 100%;
width: 100%;
height: auto;

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

@ -95,7 +95,7 @@
</div>
</div>
</div>
<img id="bg" src={{bgSrc}}>
<img id="bg" src={{bgSrc}} style="min-width:{{screen}}">
<div id="mainBody{{highlight}}">
{{#if currMode 'classes'}}
<div id="classesMode">

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

@ -70,6 +70,12 @@ Template.registerHelper('userProfile', () => {
return;
});
Template.registerHelper('screen', (multiplier, fraction) => {
if(multiplier === undefined) return screen.width.toString() + "px";
if(fraction === undefined) return (screen.width * parseInt(multiplier)).toString() + "px"
return ((screen.width) * parseInt(multiplier) / parseInt(fraction)).toString() + "px";
});
Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
return themeColors[Session.get("user").preferences.theme][div];
});

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

@ -4,6 +4,13 @@
cursor: pointer;
}
#profWrapper {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
#profPage .change {
font-size: 2.5vh;
}
@ -41,7 +48,6 @@
#profPage {
width: 100%;
height: 100%;
padding-right: 10%;
overflow-x: hidden;
overflow-y: auto;
}
@ -307,7 +313,7 @@
.classBox {
font-size: 2.7vh;
width: 39vw;
width: 94%;
margin-bottom: 3%;
padding: 2%;
@ -493,22 +499,20 @@
}
#createdClasses {
width: 35vw;
width: 500px;
height: 73vh;
margin-right: -40%;
padding: 2.5% 0 2.5% 2.5%;
padding: 30px 0 30px 30px;
border-top: 5px solid #27646D;
box-shadow: -1px 2px 5px 1px #444;
position: absolute;
top: 10vh;
right: 0;
-webkit-transition: margin 0.4s ease;
-moz-transition: margin 0.4s ease;
-ms-transition: margin 0.4s ease;
transition: margin 0.4s ease;
-webkit-transition: right 0.4s ease;
-moz-transition: right 0.4s ease;
-ms-transition: right 0.4s ease;
transition: right 0.4s ease;
}
#code {
@ -684,22 +688,20 @@
}
#joinPrivClass {
width: 18vw;
margin-bottom: -20%;
padding: 1.5%;
padding-bottom: 1%;
width: 200px;
height: 110px;
padding: 20px;
border-top: 5px solid #852E6D;
box-shadow: -2px 0px 5px 1px #444;
position: absolute;
right: 5vw;
bottom: 0;
-webkit-transition: margin 0.4s ease;
-moz-transition: margin 0.4s ease;
-ms-transition: margin 0.4s ease;
transition: margin 0.4s ease;
-webkit-transition: bottom 0.4s ease;
-moz-transition: bottom 0.4s ease;
-ms-transition: bottom 0.4s ease;
transition: bottom 0.4s ease;
}
#joinPrivClass h3 {

380
hourglass/client/profile/profile.html
View File

@ -2,203 +2,205 @@
<div class="noScroll">
<div id="mainpage{{userProfile}}" onclick="window.location='/'"><h2>Main Page</h2></div>
<div id="logout2" onclick='document.getElementById("login-buttons-logout").click();'><h2>Logout</h2></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>
<span id="motdrestrict">{{commentLength}}</span>
<div id="profWrapper">
<div id="profPage" style="background-color:{{divColor 'header'}};min-width:{{screen}}{{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>
<span id="motdrestrict">{{commentLength}}</span>
</div>
</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">
<div>
<p class="profTitle">School Name:</p>
<span class="change" id="school">{{school}}</span>
</div>
<br>
<div class="radioContainer">
<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">
<div>
<p class="profTitle">Grade:</p>
<span class="change radio" re="readonly" id="grade">{{grade}}</span>
<p class="profTitle">School Name:</p>
<span class="change" id="school">{{school}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">9th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">10th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">11th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">12th</p>
<br>
<div class="radioContainer">
<div>
<p class="profTitle">Grade:</p>
<span class="change radio" re="readonly" id="grade">{{grade}}</span>
</div>
<div class="profOptions">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">9th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">10th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">11th</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">12th</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Light</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Classes</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Day</p>
<P class="profOptionText" style="background-color:{{divColor 'header'}}">2 Days</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Week</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Month</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Yes</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">No</p>
</div>
</div>
</div>
</div>
</div>
<!-- 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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Light</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Classes</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Day</p>
<P class="profOptionText" style="background-color:{{divColor 'header'}}">2 Days</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Week</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">1 Month</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<p class="profOptionText" style="background-color:{{divColor 'header'}}">Yes</p>
<p class="profOptionText" style="background-color:{{divColor 'header'}}">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">
<div class="profFunction manageClass">
<i class="fa fa-tasks" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'manClass'}}">Manage my Classes</h4>
</div>
<div class="profFunction addClass">
<i class="fa fa-plus" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'addClass'}}">Join a Class</h4>
</div>
<div class="profFunction createClass">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'creClass'}}">Create a Class</h4>
</div>
</div>
<div id="profClassInfoHolder">
{{#if profClassTab "manClass"}}
<div id="label" class="classBox">
<span class="name classText">Class Name</span>
<span class="teacher classText">Teacher</span>
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder">
{{#each myClasses}}
{{> classDisplay}}
<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">
<div class="profFunction manageClass">
<i class="fa fa-tasks" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'manClass'}}">Manage my Classes</h4>
</div>
<div class="profFunction addClass">
<i class="fa fa-plus" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'addClass'}}">Join a Class</h4>
</div>
<div class="profFunction createClass">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<h4 style="color:{{profClassTabColor 'creClass'}}">Create a Class</h4>
</div>
</div>
<div id="profClassInfoHolder">
{{#if profClassTab "manClass"}}
<div id="label" class="classBox">
<span class="name classText">Class Name</span>
<span class="teacher classText">Teacher</span>
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder">
{{#each myClasses}}
{{> classDisplay}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
{{/if}}
</div>
{{/if}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
{{/if}}
</div>
{{/if}}
{{#if profClassTab "addClass"}}
<div id="joinTop">
<i class="fa fa-search" aria-hidden="true"></i>
{{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}
<h4 id="private">Join Private Class</h4>
</div>
<div id="label" class="classBox">
<span class="name classText">Class Name</span>
<span class="teacher classText">Teacher</span>
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder">
{{#if notsearching}}
{{#each classes}}
{{> classDisplay}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
{{/if}}
{{else}}
{{#each autocompleteClasses}}
{{> classDisplay}}
{{/each}}
{{#if notfound}}
<h3>No results found...</h3>
{{#if profClassTab "addClass"}}
<div id="joinTop">
<i class="fa fa-search" aria-hidden="true"></i>
{{> inputAutocomplete id="profClassSearch" settings=classSettings placeholder="Search..."}}
<h4 id="private">Join Private Class</h4>
</div>
<div id="label" class="classBox">
<span class="name classText">Class Name</span>
<span class="teacher classText">Teacher</span>
<span class="hour classText">Hour</span>
<span class="subscriptions classText">Members</span>
</div>
<div class="classHolder">
{{#if notsearching}}
{{#each classes}}
{{> classDisplay}}
{{/each}}
{{#if noclass}}
<h3>No results found...</h3>
{{/if}}
{{else}}
{{#each autocompleteClasses}}
{{> classDisplay}}
{{/each}}
{{#if notfound}}
<h3>No results found...</h3>
{{/if}}
{{/if}}
</div>
{{/if}}
{{#if profClassTab "creClass"}}
<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
<div id="formContainer">
<div class="formDiv">
<p class="profTitle">School:</p>
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
</div>
<div class="formDiv">
<p class="profTitle">Hour:</p>
<input class="creInput" type="text" name="hour">
</div>
<div class="formDiv">
<p class="profTitle">Teacher:</p>
{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
</div>
<div class="formDiv">
<p class="profTitle">Class Name:</p>
<input class="creInput" type="text" name="classname">
</div>
<div class="formDiv">
<p class="profTitle">Privacy:</p>
<input class="creInput radio op" type="text" name="privacy" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Public</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Private</p>
</div>
</div>
<div class="formDiv">
<p class="profTitle">Category:</p>
<input class="creInput radio op" type="text" name="category" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Class</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Club</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Other</p>
</div>
</div>
</div>
<h3 id="creSubmit">Submit Request</h3>
{{/if}}
</div>
{{/if}}
{{#if profClassTab "creClass"}}
<div id="creRules"><p>Submit a request for a class to be approved by an administrator.</p></div>
<div id="formContainer">
<div class="formDiv">
<p class="profTitle">School:</p>
{{> inputAutocomplete settings=schoolComplete class="form-control creInput" type="text" name="school" placeholder="Example: International Academy" }}
</div>
<div class="formDiv">
<p class="profTitle">Hour:</p>
<input class="creInput" type="text" name="hour">
</div>
<div class="formDiv">
<p class="profTitle">Teacher:</p>
{{> inputAutocomplete settings=teacherComplete class="form-control creInput" type="text" name="teacher" placeholder="Example: Woods" }}
</div>
<div class="formDiv">
<p class="profTitle">Class Name:</p>
<input class="creInput" type="text" name="classname">
</div>
<div class="formDiv">
<p class="profTitle">Privacy:</p>
<input class="creInput radio op" type="text" name="privacy" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Public</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Private</p>
</div>
</div>
<div class="formDiv">
<p class="profTitle">Category:</p>
<input class="creInput radio op" type="text" name="category" readonly>
<div class="profOptions creOp">
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Class</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Club</p>
<p class="profOptionText cre" style="background-color:{{divColor 'header'}}">Other</p>
</div>
</div>
</div>
<h3 id="creSubmit">Submit Request</h3>
{{/if}}
</div>
</div>
</div>
@ -216,7 +218,7 @@
</div>
</div>
<div id="createdClasses" style="background-color:{{divColor 'cards'}}" classid="{{selectedClass '_id'}}">
<div id="createdClasses" style="background-color:{{divColor 'cards'}};right:{{ownedStatus}}" classid="{{selectedClass '_id'}}">
<h3>{{selectedClass 'name'}}</h3>
<h4 id="codetext">Code:</h4>
<input id="code" value="{{selectedClass 'code'}}" type="text" readonly>
@ -253,7 +255,7 @@
<div id="deleteClass">Delete Class</div>
</div>
<div id="joinPrivClass" style="background-color:{{divColor 'cards'}}">
<div id="joinPrivClass" style="background-color:{{divColor 'cards'}};bottom:{{privStatus}}">
<h3>Enter Code:</h3>
<input id="privateCode" type="text" placeholder="Enter code here...">
<h4 id="privSubmit">Submit</h4>

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

@ -1,14 +1,20 @@
/* jshint esversion: 6 */
import {
Template
} from 'meteor/templating';
var openValues = {
"owned": "-540px",
"priv": "-160px"
};
confirm = null; // Sets function to execute after confirmation click.
// Sets up global variables
Session.set("profClassTab", "manClass"); // Set default classes card mode to 'Manage Classes.'
Session.set("owned",false); // Status of createdClasses.
Session.set("privClass",false); //Status of joinPrivClass.
Session.set("modifying", null); // Stores current open input.
Session.set("notsearching", true); // If user is searching in search box.
Session.set("autocompleteDivs", null); // Stores returned autocomplete results.
@ -70,25 +76,16 @@ Template.profile.helpers({
return Session.get("user").name;
},
motd() { // Returns the current user's description
if (Session.get("user").description === "") {
return Session.get("user").description;
} else {
return "Say something about yourself!";
}
if (Session.get("user").description !== "") return Session.get("user").description;
return "Say something about yourself!";
},
school() { // Returns the current user's school's name
if (Session.get("user").school === "") {
return Session.get("user").school;
} else {
return "Click here to edit...";
}
if (Session.get("user").school !== "") return Session.get("user").school;
return "Click here to edit...";
},
grade() { // Returns the current user's grade
if (Session.get("user").grade === "") {
return Session.get("user").grade + "th";
} else {
return "Click here to edit...";
}
if (Session.get("user").grade !== "") return Session.get("user").grade + "th";
return "Click here to edit...";
},
classes() { // Loads all of the possible classes ( Limit of twenty shown ) ( Sorts by class size )
var array = classes.find(
@ -111,6 +108,14 @@ Template.profile.helpers({
}
return array;
},
ownedStatus() { // Status of createdClasses
if(!Session.get("owned")) return openValues.owned;
return "0px";
},
privStatus() {
if(!Session.get("privClass")) return openValues.priv;
return "0px";
},
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;        
@ -170,7 +175,7 @@ Template.profile.events({
if(!document.getElementById("createdClasses").contains(event.target) &&
!Session.equals("code",null) &&
!event.target.className.includes("fa-times-circle-o")) {
document.getElementById("createdClasses").style.marginRight = "-40%";
Session.set("owned",false);
}
if(Session.get("changeAdmin") &&
!document.getElementById("changeAdmin").contains(event.target)) {
@ -179,10 +184,10 @@ Template.profile.events({
div.removeChild(div.childNodes[3]);
div.removeChild(div.childNodes[3]);
}
if(Session.get("privateClass") &&
if(Session.get("privClass") &&
!(event.target.id === "private") &&
!document.getElementById("joinPrivClass").contains(event.target)) {
Session.set("privateClass",false);
document.getElementById("joinPrivClass").style.marginBottom = "-20%";
Session.set("privClass",false);
}
},
// MAIN BUTTONS
@ -275,7 +280,7 @@ Template.profile.events({
}
Session.set("selectedClass",array);
document.getElementById("createdClasses").style.marginRight = "0";
Session.set("owned",true);
});
},
'click .classBox .fa-times' (event) { // Leaves a class
@ -296,11 +301,11 @@ Template.profile.events({
openDivFade(document.getElementsByClassName("overlay")[0]);
},
'click #private' (event) { // Joins private class
Session.set("privateClass",true);
if(Session.get("privClass")) return;
var input = document.getElementById("privateCode");
input.className = "";
input.placeholder = "Enter code here...";
document.getElementById("joinPrivClass").style.marginBottom = "0";
Session.set("privClass",true);
},
'click #privSubmit' () { // Submits private class code
var input = document.getElementById("privateCode");
@ -309,7 +314,7 @@ Template.profile.events({
serverData = code;
Meteor.call("joinPrivateClass", code, function(error, result) {
if(result) {
document.getElementById("joinPrivClass").style.marginBottom = "-10%";
Session.set("privClass",false);
} else {
input.className = "formInvalid";
input.placeholder = "Invalid code.";