Fixed header CSS on main

hourglass/client/main/main.css

@@ -88,6 +88,7 @@ body {
 header {
 	font-weight: 600;
 	width: 100%;
+	height: 6vh;
 	margin: 0;
 	box-shadow: 2px 2px 5px 3px #666;
 
@@ -136,11 +137,7 @@ input, textarea {
 	resize: none;
 }
 
-#aboveBar {
+header h2 {
-	display: inline;
-}
-
-#aboveBar h2 {
 	font-weight: 400;
 	padding: 0.6%;
 	padding-left: 0;
@@ -148,8 +145,7 @@ input, textarea {
 }
 
 .fa-bars, .fa-cog {
-	font-size: 200%;
+	font-size: 3.5vh;
-	height: 100%;
 	padding: 0.65%;
 	padding-right: 0.8%;
 
@@ -163,6 +159,15 @@ input, textarea {
 	cursor: pointer;
 }
 
+#headerBar {
+	width: 100%;
+	height: 4px;
+	background-color: #33ADFF;
+
+	position: absolute;
+	bottom: 0;
+}
+
 .fa-cog {
 	padding-left: 0.8%;
 	float: right;
@@ -172,20 +177,13 @@ input, textarea {
 	background-color: rgba(0,0,0,0.2);
 }
 
-#loadBar, #progress {
-	width: 100%;
-	height: 4px;
-	display: table;
-	background-color: #33ADFF;
-}
-
 #login-buttons {
 	display: none;
 }
 
 #dropdown {
-	width: 6.5vh;
+	width: 6vh;
-	height: 6.5vh;
+	height: 6vh;
 	float: right;
 	display: inline-block;
 	position: relative;
@@ -197,9 +195,9 @@ input, textarea {
 }
 
 #dropdown img{
-	width: 5vh;
+	width: 4vh;
-	height: 5vh;
+	height: 4vh;
-	margin: -2.6vh 0 0 -2.7vh;
+	margin: -2.2vh 0 0 -2.2vh;
 
 	cursor: pointer;
 	position: absolute;
@@ -1042,23 +1040,20 @@ input, textarea {
 	width: 0; 
 	height: 0; 
 
-	-webkit-filter: drop-shadow(2px 2px 5px #666);
-	filter: drop-shadow(2px 2px 5px #666);
-
 	border-left: 2.5vh solid transparent;
 	border-right: 2.5vh solid transparent;
 
 	position: absolute;
-	top: -3vh;
+	top: -2.9vh;
 	right: 2vw;
-	z-index: 19;
+	z-index: 18;
 }
 
 #userDropdown {
 	width: 15vw;
 	margin-top: 10vh;
 
-	box-shadow: 2px 2px 5px 3px #666;	
+	box-shadow: 2px 2px 5px 2px #666;	
 	display: none;
 
 	position: absolute;
@@ -1077,7 +1072,7 @@ input, textarea {
 #userDropdownAvatar {
 	width: 100%;
 	height: 16vh;
-	background-color: rgba(255,255,255,0.3);
+	background-color: rgba(0,0,0,0.1);
 	position: relative;
 }
 
@@ -1100,6 +1095,7 @@ input, textarea {
 	width: 9vh;
 	margin: 0 auto 0 auto;
 	padding-top: 12vh;
+	text-align: center;
 }
 
 #userFunctions {
@@ -1110,6 +1106,7 @@ input, textarea {
 .userFunction {
 	font-size: 2.5vh;
 	width: 100%;
+	background-color: rgba(255,255,255,0.3);
 	cursor: pointer;
 
 	-webkit-transition: background-color 0.4s ease;  
@@ -1119,7 +1116,7 @@ input, textarea {
 }
 
 .userFunction:hover {
-	background-color: rgba(255,255,255,0.2);
+	background-color: rgba(255,255,255,0.1);
 }
 
 .userFunction i, .userFunction p {

hourglass/client/main/main.html

@@ -5,17 +5,13 @@
 
 <template name="main">
     <header style="background-color:{{userProfile}}{{divColor 'header'}}{{textColor}}{{defaultMode}}{{refetchEvents}}">
-        <div id="aboveBar">
+        <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
-            <i class="fa fa-bars" aria-hidden="true" style="color:{{iconColor 'menu'}}"></i>
+        <h1>Hourglass</h1><h2>{{schoolName}}</h2>
-            <h1>Hourglass</h1><h2>{{schoolName}}</h2>
+        <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
-            <i class="fa fa-cog" aria-hidden="true" style="color:{{iconColor 'options'}}"></i>
+        <div id="dropdown">
-            <div id="dropdown">
+            <img src="{{avatar}}">
-                <img src="{{avatar}}">
-            </div>
-        </div>
-        <div id="loadBar">
-            <div id="progress" style="background-color:{{loadType}};width:{{loadPercent}}"></div>
         </div>
+        <div id="headerBar"></div>
     </header>
     <div id="menuContainer" style="margin-left:{{menuStatus}};background-color:{{divColor 'sidebar'}}">
         <div id="modes">
@@ -205,11 +201,11 @@
         </div>
     </div>
 
-    <div id="userDropdown" style="background-color:{{divColor 'cards'}}">
+    <div id="userDropdown" style="background-color:{{divColor 'dropdown'}}">
         <div id="userTab" style="border-bottom: 3vh solid {{divColor 'header'}}"></div>
         <div id="userDropdownAvatar">
             <img src="{{avatar}}">
-            <p>ksjdragon</p>
+            <p>{{username}}</p>
         </div>
         <div id="userFunctions">
             <div id="myprofile" class="userFunction" onclick="window.location='/profile';">

hourglass/lib/constants.js

@@ -3,6 +3,7 @@ themeColors =  {
         "background": "White.jpg",
         "header": "#EBEBEB",
         "sidebar": "#65839A",
+        "dropdown": "#D9D9D9",
         "adminButtons": "#C8C0C0",
         "funcButton": "#849CAE",
         "statusIcons": "#33ADFF",
@@ -16,6 +17,7 @@ themeColors =  {
         "background": "Black.jpg",
         "header": "#373A56",
         "sidebar": "#35435D",
+        "dropdown": "#373A56", 
         "adminButtons": "#63667E",
         "funcButton": "#5D75A2",
         "statusIcons": "#33ADFF",