From afb3486268986ac584dfa0713409a5bd65f3da86 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Wed, 7 Sep 2016 20:04:51 -0400
Subject: [PATCH] CSS fixes

---
 hourglass/client/main/main.css        |  9 +++--
 hourglass/client/main/main.html       | 58 ++++++++++++++-------------
 hourglass/client/main/main.js         |  9 ++---
 hourglass/client/profile/profile.html | 54 ++++++++++++-------------
 hourglass/lib/constants.js            |  2 +-
 5 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/hourglass/client/main/main.css b/hourglass/client/main/main.css
index 2fc4c87..4db2401 100644
--- a/hourglass/client/main/main.css
+++ b/hourglass/client/main/main.css
@@ -137,9 +137,13 @@ input, textarea {
 	resize: none;
 }
 
+header h1 {
+	font-size: 3.5vh;
+}
+
 header h2 {
 	font-weight: 400;
-	padding: 0.6%;
+	padding: 1vh;
 	padding-left: 0;
 	float: left;
 }
@@ -197,7 +201,7 @@ header h2 {
 #dropdown img{
 	width: 4vh;
 	height: 4vh;
-	margin: -2.2vh 0 0 -2.2vh;
+	margin: -2.5vh 0 0 -2.2vh;
 
 	cursor: pointer;
 	position: absolute;
@@ -1072,7 +1076,6 @@ header h2 {
 #userDropdownAvatar {
 	width: 100%;
 	height: 16vh;
-	background-color: rgba(0,0,0,0.1);
 	position: relative;
 }
 
diff --git a/hourglass/client/main/main.html b/hourglass/client/main/main.html
index b70851b..0578810 100644
--- a/hourglass/client/main/main.html
+++ b/hourglass/client/main/main.html
@@ -54,9 +54,9 @@
                 <p class="prefTitle">Theme:</p>
                 <span class="change radio" re="readonly" id="prefTheme">{{pref 'theme'}}</span>
                 </div>
-                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
-                    <p class="prefOptionText">Light</p>
-                    <p class="prefOptionText">Dark</p>
+                <div class="prefOptions">
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Light</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Dark</p>
                 </div>
             </div>
             <div>
@@ -64,9 +64,9 @@
                 <p class="prefTitle">Default Mode:</p>
                 <span class="change radio" re="readonly" id="prefMode">{{pref 'mode'}}</span>
                 </div>
-                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
-                    <p class="prefOptionText">Classes</p>
-                    <p class="prefOptionText">Calendar</p>
+                <div class="prefOptions">
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Classes</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Calendar</p>
                 </div>
             </div>
             <div>
@@ -74,12 +74,12 @@
                 <p class="prefTitle">Hide Homework:</p>
                 <span class="change radio" re="readonly" id="prefHide">{{pref 'timeHide'}}</span>
                 </div>
-                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
-                    <p class="prefOptionText">1 Day</p>
-                    <P class="prefOptionText">2 Days</p>
-                    <p class="prefOptionText">1 Week</p>
-                    <p class="prefOptionText">1 Month</p>
-                    <p class="prefOptionText">Never</p>
+                <div class="prefOptions">
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">1 Day</p>
+                    <P class="prefOptionText"  style="background-color:{{divColor 'header'}}">2 Days</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">1 Week</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">1 Month</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Never</p>
                 </div>
             </div>
             <div>
@@ -87,9 +87,9 @@
                 <p class="prefTitle">Hide Done:</p>
                 <span class="change radio" re="readonly" id="prefDone">{{pref 'done'}}</span>
                 </div>
-                <div class="prefOptions" style="background-color:{{divColor 'header'}}">
-                    <p class="prefOptionText">Yes</p>
-                    <p class="prefOptionText">No</p>
+                <div class="prefOptions">
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">Yes</p>
+                    <p class="prefOptionText"  style="background-color:{{divColor 'header'}}">No</p>
                 </div>
             </div>
         </div>
@@ -134,12 +134,12 @@
                             <span class="workTitle">Type:</span>
                             <span class="change radio req" re="readonly" id="workType">{{work 'type'}}</span>
                             </div>
-                            <div class="workOptions type" style="background-color:{{divColor 'header'}}">
-                                <p class="workOptionText">Normal</p>
-                                <p class="workOptionText">Quiz</p>
-                                <p class="workOptionText">Test</p>
-                                <p class="workOptionText">Project</p>
-                                <p class="workOptionText">Other</p>
+                            <div class="workOptions type">
+                                <p class="workOptionText"  style="background-color:{{divColor 'header'}}">Normal</p>
+                                <p class="workOptionText"  style="background-color:{{divColor 'header'}}">Quiz</p>
+                                <p class="workOptionText"  style="background-color:{{divColor 'header'}}">Test</p>
+                                <p class="workOptionText"  style="background-color:{{divColor 'header'}}">Project</p>
+                                <p class="workOptionText"  style="background-color:{{divColor 'header'}}">Other</p>
                             </div>
                         </div>
                         <!-- <div id="workAttach">Attach other files</div>
@@ -202,12 +202,12 @@
     </div>
 
     <div id="userDropdown" style="background-color:{{divColor 'dropdown'}}">
-        <div id="userTab" style="border-bottom: 3vh solid {{divColor 'header'}}"></div>
-        <div id="userDropdownAvatar">
+        <div id="userTab" style="border-bottom: 3vh solid {{divColor 'dropdown'}}"></div>
+        <div id="userDropdownAvatar" style="background-color:{{divColor 'dropdown'}}">
             <img src="{{avatar}}">
             <p>{{username}}</p>
         </div>
-        <div id="userFunctions">
+        <div id="userFunctions" style="background-color:{{divColor 'dropdown'}}">
             <div id="myprofile" class="userFunction" onclick="window.location='/profile';">
                 <i class="fa fa-user" aria-hidden="true"></i>
                 <p>My Profile</p>
@@ -219,9 +219,11 @@
                 </div>
             {{/if}}
         </div>
-        <div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'>
-            <i class="fa fa-sign-out" aria-hidden="true"></i>
-            <p>Sign out</p>
+        <div style="background-color:{{divColor 'dropdown'}}">
+            <div id="myprofile" class="userFunction" onclick='document.getElementById("login-buttons-logout").click();'>
+                <i class="fa fa-sign-out" aria-hidden="true"></i>
+                <p>Sign out</p>
+            </div>
         </div>
     </div>
     {{> loginButtons}}
@@ -269,7 +271,7 @@
 				<i class="fa fa-thumbs-up" aria-hidden="true"></i>	
 				<span>{{confirmationLength}} </span>
 				<i class="fa fa-thumbs-down" aria-hidden="true"></i> 
-				<span>{{reportLength}} </span> 
+				<span>{{reportLength}}</span> 
 			</div>
 		</div>
     </div>
diff --git a/hourglass/client/main/main.js b/hourglass/client/main/main.js
index 5e35d15..d51421d 100644
--- a/hourglass/client/main/main.js
+++ b/hourglass/client/main/main.js
@@ -57,6 +57,7 @@ Template.registerHelper('userProfile', () => {
 });
 
 Template.registerHelper('divColor', (div) => { // Reactive color changing based on preferences. Colors stored in themeColors.
+    console.log(div);console.log(themeColors[Session.get("user").preferences.theme][div]);
     return themeColors[Session.get("user").preferences.theme][div];
 });
 
@@ -647,11 +648,10 @@ Template.main.events({
         var p = event.target;
         var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
         input.value = p.childNodes[0].nodeValue;
+        closeDivFade(p.parentNode);
         try {
             closeInput(modifyingInput);
         } catch (err) {}
-
-        closeDivFade(p.parentNode);
         input.focus();
     },
     'click .prefOptionText' (event) { // Click each preferences setting.
@@ -659,11 +659,10 @@ Template.main.events({
         var p = event.target;
         var input = p.parentNode.parentNode.childNodes[1].childNodes[5];
         input.value = p.childNodes[0].nodeValue;
+        closeDivFade(p.parentNode);
         try {
             closeInput(modifyingInput);
         } catch (err) {}
-
-        closeDivFade(p.parentNode);
         input.focus();
     },
     'click #workComment' (event) {
@@ -823,7 +822,7 @@ function openDivFade(div) {
 function closeDivFade(div) {
     div.style.opacity = "0";
     setTimeout(function() {
-        div.style.display = "none";
+        div.style.display = "none";    
     }, 100);
 }
 
diff --git a/hourglass/client/profile/profile.html b/hourglass/client/profile/profile.html
index 0fedb86..6e78927 100644
--- a/hourglass/client/profile/profile.html
+++ b/hourglass/client/profile/profile.html
@@ -28,11 +28,11 @@
 								<p class="profTitle">Grade:</p>
 								<span class="change radio" re="readonly" id="grade">{{grade}}</span>
 								</div>
-					            <div class="profOptions" style="background-color:{{divColor 'header'}}">
-				                  	<p class="profOptionText">9th</p>
-					                <p class="profOptionText">10th</p>
-					                <p class="profOptionText">11th</p>
-					                <p class="profOptionText">12th</p>
+					            <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>
@@ -46,9 +46,9 @@
 				                <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 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>
@@ -57,9 +57,9 @@
 				                <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 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>
@@ -68,12 +68,12 @@
 				                <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 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>
@@ -82,9 +82,9 @@
 				                <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 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>
@@ -181,18 +181,18 @@
 						            <div class="formDiv">
 							            <p class="profTitle">Privacy:</p>
 						              	<input class="creInput radio op" type="text" name="privacy" readonly>
-						              	<div class="profOptions creOp" style="background-color:{{divColor 'header'}}">
-						                  	<p class="profOptionText cre">Public</p>
-						                  	<p class="profOptionText cre">Private</p>
+						              	<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" style="background-color:{{divColor 'header'}}">
-						                  	<p class="profOptionText cre">Class</p>
-						                  	<p class="profOptionText cre">Club</p>
-						                  	<p class="profOptionText cre">Other</p>
+						              	<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>
diff --git a/hourglass/lib/constants.js b/hourglass/lib/constants.js
index b5611cb..0af3d0f 100644
--- a/hourglass/lib/constants.js
+++ b/hourglass/lib/constants.js
@@ -3,7 +3,7 @@ themeColors =  {
         "background": "White.jpg",
         "header": "#EBEBEB",
         "sidebar": "#65839A",
-        "dropdown": "#D9D9D9",
+        "dropdown": "#E6E6E6",
         "adminButtons": "#C8C0C0",
         "funcButton": "#849CAE",
         "statusIcons": "#33ADFF",