CSS size and zoom fixes

hourglass/client/main/main.css

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

hourglass/client/main/main.html

@@ -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">

hourglass/client/main/main.js

@@ -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];
 });

hourglass/client/profile/profile.css

@@ -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 {

hourglass/client/profile/profile.html

@@ -2,7 +2,8 @@
 	<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="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">
@@ -206,6 +207,7 @@
 					</div>
 				</div>
 			</div>
+		</div>
 		<div class="overlay">
 		    <div class="overlayCont" style="background-color:{{divColor 'header'}}">
 		     	<p>{{confirmText}}</p>
@@ -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>

hourglass/client/profile/profile.js

@@ -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 {
+        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 {
+        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 {
+        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.";