Large CSS update for main

hourglass/client/main/main.css

@@ -99,7 +99,8 @@ body {
 	box-shadow: 2px 2px 5px 3px #666;
 
 	display: inline-block;
-	position: relative;
+	position: absolute;
+	top: 0;
 	z-index: 50;
 
 	-webkit-transition: background-color 0.5s ease;  
@@ -109,6 +110,7 @@ body {
 }
 
 #mainHeader h1, #mainHeader h2 {
+	font-size: 3.5vh;
 	margin-left: 0.5%;
 	padding: 0;
 	height: 5.5vh;
@@ -120,6 +122,7 @@ body {
 
 #mainHeader h2 {
 	font-weight: 200;
+	font-size: 3vh;
 	float: left;
 }
 
@@ -227,23 +230,24 @@ input, textarea {
 #menuContainer, #optionsContainer {
 	min-height: 100%;
 	max-height: 100%;
-	width: 17%;
+	width: 250px;
 	padding: 1% 0 1% 0;
 	box-shadow: 2px 2px 5px 3px #666;
 
 	position: absolute;
+	top: 6vh;
 	z-index: 5;
 	overflow: hidden;
 	
-	-webkit-transition: margin 0.5s ease, background-color 0.5s ease;  
+	-webkit-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;  
-	-moz-transition: margin 0.5s ease, background-color 0.5s ease; 
+	-moz-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease; 
-	-ms-transition: margin 0.5s ease, background-color 0.5s ease;
+	-ms-transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease;
-	transition: margin 0.5s ease, background-color 0.5s ease; 
+	transition: left 0.5s ease, right 0.5s ease, background-color 0.5s ease; 
 }
 
 #optionsContainer {
-	width: 12%;
+	width: 200px;
-	padding: 1.5%;
+	padding: 40px;
 	right: 0;
 }
 
@@ -379,17 +383,41 @@ input, textarea {
 
 #classesMode {
 	width: 100%;
-	height: 100%;
+	height: 94vh;
-	display: inline-block;
+
+	position: absolute;
+	top: 6vh;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	overflow-x: auto;
+	overflow-y: hidden;
+	white-space: nowrap;
 }
 
 .mainClass {
-	width: 18vw;
+	width: 100%;
-	margin: 2%;
+	padding-bottom: 1%;
-	margin-right: 0;
 
 	box-shadow: 2px 2px 5px 3px #666;
-	float: left;
+}
+
+.classWrapper {
+	width: 300px;
+	height: 100%;
+	margin: 10px;
+	margin-top: 20px;
+	display: inline-block;
+	vertical-align: top;
+}
+
+.classWrapper:first-child {
+	margin-left: 20px;
+}
+
+.classWrapper:last-child {
+	margin-right: 20px;
 }
 
 .classInfo {
@@ -398,7 +426,9 @@ input, textarea {
 }
 
 .mainClassName {
-	font-size: 3.1vh;
+	font-size: 160%;
+	white-space: normal;
+	word-break: break-all;
 
 	-webkit-filter: none;
 	filter: none;
@@ -428,15 +458,12 @@ input, textarea {
 }
 
 .workHolder {
-	width: 90%;
+	width: 100%;
-	position: relative;
-	left: 5%;
 }
 
 .workCard {
-	width: 100%;
+	width: 90%;
-	margin-right: 0;
+	margin: 2.5% 5% 2.5% 5%;
-	margin-bottom: 5%;
 	background-color: rgba(255,255,255,0.3);
 	box-shadow: 2px 2px 5px 3px #666;
 	cursor: pointer;
@@ -447,6 +474,14 @@ input, textarea {
 	transition: box-shadow 0.4s ease, transform 0.3s ease;
 }
 
+.workCard:first-child {
+	margin-top: 5%;
+}
+
+.workCard:last-child {
+	margin-bottom: 5%;
+}
+
 .workCard:hover {
 	box-shadow: 2px 2px 5px 3px #666, inset 0 0 0 99999px rgba(0,0,0,0.09);
 }
@@ -517,14 +552,14 @@ input, textarea {
 }
 
 .workTitle, .prefTitle {
-	font-size: 2.7vh;
+	font-size: 200%;
 	font-weight: 400;
 	margin: 0 3% 1% 0;
 	cursor: default;
 }
 
 .prefTitle {
-	font-size: 2.5vh;
+	font-size: 140%;
 	margin-top: 5%;
 }
 
@@ -722,17 +757,22 @@ input, textarea {
 }
 
 #bg {
+	min-width: 1920px;
+	min-height: 100%;
 	width: 100%;
-	position: absolute;
+	height: auto;
+
+	position: fixed;
 	top: 0;
 	left: 0;
 	z-index: -1;
+
 }
 
 #mainBody {
 	width: 100%;
 	height: 100%;
-	position: absolute;
+	position: relative;
 
 	-webkit-transition: opacity 0.4s ease;  
 	-moz-transition: opacity 0.4s ease; 
@@ -1085,6 +1125,10 @@ input, textarea {
 	bottom: 0;
 }
 
+#toggleButtons div {
+	cursor: pointer;
+}
+
 #toggleButtons i {
 	margin-right: 12%;
 
@@ -1167,9 +1211,9 @@ input, textarea {
 #userDropdownAvatar img {
 	width: 9vh;
 	height: 9vh;
-	margin: -6.5vh 0 0 -5vh;
+	margin: -6.5vh 0 0 -5.25vh;
 
-	border: 3px solid #0D0D0D;
+	border: 0.5vh solid #0D0D0D;
 	-moz-border-radius: 50%;
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
@@ -1180,9 +1224,10 @@ input, textarea {
 }
 
 #userDropdownAvatar p {
+	font-size: 2.4vh;
 	width: 15vw;
 	margin: 0 auto 0 auto;
-	padding-top: 12vh;
+	padding-top: 12.4vh;
 	text-align: center;
 }
 
@@ -1214,10 +1259,9 @@ input, textarea {
 }
 
 #requests {
-	width: 25vw;
+	width: 300px;
-	height: 11vw;
+	height: 170px;
-	margin-bottom: -15.5vw;
+	padding: 30px;
-	padding: 2vw;
 
 	border-top: 5px solid #852E6D;
 	box-shadow: -2px 0px 5px 1px #444;
@@ -1228,31 +1272,31 @@ input, textarea {
 
 	z-index: 30;
 
-	-webkit-transition: margin 0.4s ease;  
+	-webkit-transition: bottom 0.4s ease;  
-	-moz-transition: margin 0.4s ease; 
+	-moz-transition: bottom 0.4s ease; 
-	-ms-transition: margin 0.4s ease;
+	-ms-transition: bottom 0.4s ease;
-	transition: margin 0.4s ease;
+	transition: bottom 0.4s ease;
 }
 
 #requestTab {
-	width: 5vw;
+	width: 70px;
-	height: 4vw;
+	height: 50px;
 
 	border-top: 5px solid #852E6D;
 	box-shadow: -2px -4px 5px 0px #444;
 
 	position: absolute;
 	right: 0;
-	top: -4vw;
+	top: -55px;
 
 	cursor: pointer;
 	z-index: 15;
 }
 
 .fa-question {
-	font-size: 5vh;
+	font-size: 36px;
-	width: 4vw;
+	width: 50px;
-	padding: 5% 10% 10% 10%;
+	padding: 5px 10px 1px 10px;
 	text-align: center;
 
 	-webkit-transition: background-color 0.4s ease;  
@@ -1266,14 +1310,16 @@ input, textarea {
 }
 
 #requests p {
+	font-size: 80%;
+	font-weight: 400;
 	margin: 0;
 	margin-bottom: 1vh;
 }
 
 #requests textarea {
 	width: 96%;
-	height: 11vh;
+	height: 100px;
-	margin-bottom: 1.5vh;
+	margin-bottom: 10px;
 }
 
 #requestCont{
@@ -1282,7 +1328,7 @@ input, textarea {
 
 #requestSubmit {
 	font-weight: 200;
-	font-size: 2.5vh;
+	font-size: 20px;
 	margin-right: 2%;
 	padding: 2%;
 

hourglass/client/main/main.html

@@ -14,7 +14,7 @@
             </div>
             <div id="headerBar"></div>
         </header>
-        <div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
+        <div id="menuContainer" style="left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
             <div id="modes">
                 <div class="mode classes" style="background-color:{{divColor 'funcButton'}}">
                     <i class="fa fa-university" aria-hidden="true"></i>
@@ -47,7 +47,7 @@
             {{/if}}
             </div>
         </div>
-        <div id="optionsContainer" style="margin-right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
+        <div id="optionsContainer" style="right:{{optionsStatus}};background-color:{{divColor 'sidebar'}}">
             <h3>Preferences</h3>
             <div id="prefCont">
                 <div>
@@ -236,7 +236,7 @@
             </div>
         </div>
 
-        <div id="requests" style="background-color:{{divColor 'cards'}}">
+        <div id="requests" style="bottom:{{requestStatus}};background-color:{{divColor 'cards'}}">
             <div id="requestTab" style="background-color:{{divColor 'cards'}}">
                 <i class="fa fa-question" aria-hidden="true"></i>
             </div>
@@ -265,6 +265,7 @@
 </template>
 
 <template name="classesMode">
+    <div class="classWrapper">
         <div class="mainClass" style="background-color:{{divColor 'classes'}}">
             <div class="classInfo"> <!-- class color -->
                 <h3 class="mainClassName">{{name}}</h3>
@@ -281,6 +282,7 @@
                 {{/each}}
             </div>
         </div>
+    </div>
 </template>
 
 <template name="classModeWork">

hourglass/client/main/main.js

@@ -10,8 +10,9 @@ var calWorkOpen = null;
 var calWorkDate = null;
 
 var openValues = {
-    "menu": "-25%",
+    "menu": "-250px",
-    "options": "-20%"
+    "options": "-280px",
+    "requests": "-235px"
 };
 
 // Sets colors for different assignment statuses
@@ -38,7 +39,8 @@ var ref = {
 // Reactive variables.
 Session.set("user",{}); // Stores user preferences.
 Session.set("calendarClasses", []); // Stores calendar classes.
-Session.set("sidebar", null); // Status of sidebar
+Session.set("sidebar", null); // Status of sidebar.
+Session.set("requests",false); // Status of requests.
 Session.set("newWork", null); // If user creating new work.
 Session.set("currentWork", null); // Stores current selected work info.
 Session.set("currentReadableWork", null); // Stores readable selected work info.
@@ -226,22 +228,26 @@ Template.main.helpers({
     },
     menuStatus() { // Status of of menu sidebar.
         if (Session.equals("sidebar", "menuContainer")) {
-            return "0%";
+            return "0px";
         } else if (Session.equals("sidebar", "both")) {
-            return "0%";
+            return "0px";
         } else {
             return openValues.menu;
         }
     },
     optionsStatus() { // Status of options sidebar.
         if (Session.equals("sidebar", "optionsContainer")) {
-            return "0%";
+            return "0px";
         } else if (Session.equals("sidebar", "both")) {
-            return "0%";
+            return "0px";
         } else {
             return openValues.options;
         }
     },
+    requestStatus() {
+        if (Session.get("requests")) return "0px";
+        return openValues.requests;
+    },
     modeStatus(status) { // Color status of display modes.
         if (!Session.equals("mode",status)) return;
         return themeColors[Session.get("user").preferences.theme].highlightText;
@@ -467,7 +473,7 @@ Template.main.events({
         }
 
         if(!document.getElementById("userDropdown").contains(event.target)) closeDivFade(document.getElementById("userDropdown"));
-        if(!document.getElementById("requests").contains(event.target)) document.getElementById("requests").style.marginBottom = "-15.5vw";
+        if(!document.getElementById("requests").contains(event.target)) Session.set("requests",false);
     },
     // MAIN MENU BUTTONS
     'click .fa-bars' () { // Click menu button.
@@ -494,6 +500,10 @@ Template.main.events({
             Session.set("sidebar", "optionsContainer");
         }
     },
+    'click #requests .fa-question' () {
+        console.log("hi");
+        Session.set("requests",!Session.get("requests"));
+    },
     'click .classes' () { // Click classes mode button.
         if (Session.equals("mode", "classes")) return;
         var modeHolder = document.getElementById("mainBody");
@@ -569,9 +579,6 @@ Template.main.events({
         }
         openDivFade(document.getElementsByClassName("overlay")[0]);
     },
-    'click #requests .fa-question' () {
-        document.getElementById("requests").style.marginBottom = "0";
-    },
     'click #requestSubmit' () {
         var area = document.getElementById("requestArea");
         if(area.value === "") return;

hourglass/client/profile/profile.css

@@ -1,5 +1,5 @@
 .change {
-	font-size: 2.5vh;
+	font-size: 150%;
 	color: #8C8C8C;
 	cursor: pointer;
 }