CSS fixes, adding slimScroll

hourglass/client/main/main.css

@@ -328,14 +328,17 @@ input {
 }
 
 #exportDiv {
+	background-color: rgba(255,255,255,0.1);
 	position: absolute;
     bottom: 0;
 }
 
-#classListHolder {
-	max-height: 48%;
-	width: 100%;
+#exportDiv:hover {
+	background-color: rgba(255,255,255,0.2);
+}
 
+#classListHolder {
+	width: 100%;
 	overflow-y: auto;
 }
 
@@ -549,8 +552,11 @@ input.clickModify, textarea.clickModify {
 	width: 100%;
 	font-size: 2.2vh;
 	font-weight: 200;
+	padding: 1%;
+
 	background-color: rgba(0,0,0,0);
 	border-color: rgba(0,0,0,0);
+	outline:none;
 	cursor: pointer;
 
 	-webkit-transition: background-color 0.4s ease, border-color 0.4s ease;  
@@ -560,8 +566,7 @@ input.clickModify, textarea.clickModify {
 }
 
 input.clickModify:hover, textarea.clickModify:hover {
-	background-color: rgba(0,0,0,0.1);
-	
+	background-color: rgba(0,0,0,0.1) !important;
 }
 
 textarea.clickModify {
@@ -581,6 +586,8 @@ textarea.clickModify {
 	width: 100%;
 	height: 100%;
 
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.12);
+
 	position: relative;
 	display: table;
 }
@@ -650,6 +657,7 @@ textarea.clickModify {
 .clickModify.dropdown {
 	font-size: 2.1vh;
 	width: calc(100% - 2px);
+	padding: none;
 
 	background-color: rgba(0,0,0,0.07);
 	cursor: pointer;
@@ -1032,7 +1040,6 @@ textarea.clickModify {
 
 .commentBox {
 	margin: 0 !important;
-	height: 50%;
 	padding: 2%;
 	background-color: rgba(255,255,255,0.1);
 	border-bottom: solid 1px #CCC;
@@ -1122,7 +1129,7 @@ textarea.clickModify {
 	background-color: rgba(0,0,0,0.1);
 
 	position: relative;
-	cursor: pointer;
+	cursor: default;
 
 	-webkit-transition: background-color 0.4s ease;  
 	-moz-transition: background-color 0.4s ease; 
@@ -1139,8 +1146,6 @@ textarea.clickModify {
 }
 
 .doneUser img {
-	margin-bottom: 0.3vw;
-
 	display: inline-block;
 	vertical-align: middle;
 	line-height: normal;

hourglass/client/main/main.html

@@ -116,7 +116,7 @@
                                     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                                     <p>{{work 'reports'}}</p>
                                 </div>
-                                <div class="workCreator doneUser" onclick="window.location='/user/{{work 'email'}}'">
+                                <div class="workCreator doneUser">
                                     <div style="display:inline-block;width:{{screen '3' '140'}}">
                                         <img src="{{work 'avatar'}}" style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
                                     </div>
@@ -237,14 +237,14 @@
         </div>
         <div class="commentInfo">
             <span class="commentComment">{{comment}}</span><br>
-            <span class="commentUser" onclick="window.location='/user/{{email}}'">{{user}}</span>
+            <span class="commentUser">{{user}}</span>
             <span class="commentDate">{{date}}</span>
         </div>
     </div>
 </template>
 
 <template name="doneUsers">
-    <div class="doneUser" onclick="window.location='/user/{{email}}'">
+    <div class="doneUser">
         <div style="display:inline-block">
             <img src='{{avatar}}' style="width:{{screen '3' '140'}};height:{{screen '3' '140'}}">
         </div>

hourglass/client/main/main.js

@@ -46,6 +46,15 @@ Template.main.rendered = function() {
     Accounts._loginButtonsSession.set('dropdownVisible', true);
     setTimeout(startDragula, 300);
     $("#menuContainer").toggle();
+    $("#doneUsers").slimScroll({
+        height: '34vh',
+        touchScrollStep: 90
+    });
+    $("#comment").slimScroll({
+        width: '100%',
+        height: '20vh',
+        touchScrollStep: 90
+    });
     /*$("#classListHolder").slimScroll({
         height: '30vh',
         size: '5px',
@@ -53,6 +62,7 @@ Template.main.rendered = function() {
         railColor: '#222',
         railOpacity: 0.1,
     });*/
+
     document.getElementsByTagName("body")[0].style.color = Session.get("user").preferences.theme.textColor;
 };
 
@@ -457,6 +467,7 @@ Template.main.events({
         if(!$("#"+modifyingInput)[0].className.includes("dropdown")) {
             event.target.select();
             event.target.style.cursor = "text";
+            event.target.style.backgroundColor = "rgba(0,0,0,0.1)";
         }
     },
     'keydown .dropdown' (event) {
@@ -664,6 +675,7 @@ function closeInput() { // Close a changeable input and change it back to span.
     Session.set("currentWork", data);
     Session.set("restrictText", {});
     $("#"+modifyingInput).css('cursor','pointer');
+    $("#"+modifyingInput).css('background-color', 'rgba(0,0,0,0)');
     if(!Session.get("newWork")) {
         serverData = Session.get("currentWork");
         if(checkMissing()) return;

hourglass/client/menus/menus.css

@@ -73,6 +73,7 @@
 
 #filterWrapper {
 	display: none;
+	max-height: 64vh;
 }
 
 #backgroundOverlay {

hourglass/client/menus/menus.js

@@ -10,6 +10,11 @@ var sidebarMode = [null, null];
 
 Template.sidebarMenuPlate.rendered = function() {
     $(".menuWrapper").slideDown(300);
+     $("#classListHolder").slimScroll({
+        width: '100%',
+        height: 'auto',
+        touchScrollStep: 90
+    });
 };
 Template.sidebarOptionPlate.rendered = function() {
     $(".menuWrapper").slideDown(300);
@@ -57,7 +62,7 @@ Template.sidebarMenuPlate.events({
     'click #filterHead' (event) {
         if (event.target.id === "disableFilter") return;
         if (!filterOpen[0]) {
-            $("#filterWrapper").slideDown(300);
+            $("#filterWrapper").slideDown(300, function(){recalcHeightScroll();});
         } else {
             $("#filterWrapper").slideUp(300);
         }
@@ -65,8 +70,9 @@ Template.sidebarMenuPlate.events({
     },
     'click #typeFilterWrapper' () {
         if (!filterOpen[1]) {
-            $("#classFilterHolder").slideDown(300);
+            $("#classFilterHolder").slideDown(300, function(){recalcHeightScroll();});
         } else {
+            recalcHeightScroll();
             $("#classFilterHolder").slideUp(300);
         }
         filterOpen[1] = !filterOpen[1];
@@ -655,3 +661,9 @@ toggleToClassInfoMode = function(mode) {
         $(this).fadeIn(250);
     });
 };
+
+function recalcHeightScroll() {
+    var height = (94-100*$("#classListHolder").offset().top / window.innerHeight) + "vh";
+    $("#classListHolder").css("height", height);
+    $("#classListHolder").parent().css("height", height);
+}

hourglass/lib/constants.js

@@ -1,8 +1,8 @@
 themeColors =  {
     "lux": {
         "background": "White.jpg",
-        "mainColor": "#4D82AC",
-        "secondaryColor": "#4C75A2",
+        "mainColor": "#58758B",
+        "secondaryColor": "#456487",
         "sidebarColor": "#5E88A8",
         "userDropdownColor": "#427EB4",
         "iconHighlight": "#39CAFF",
@@ -27,7 +27,7 @@ themeColors =  {
         "secondaryColor": "#B93A3A",
         "sidebarColor": "#327C5A",
         "userDropdownColor": "#CC3333", 
-        "iconHighlight": "#327C5A",
+        "iconHighlight": "#CBDF58",
         "modeHighlight": "#C9FE62",
         "classCardColor":"#302C36",
         "textColor": "#FCF0F0"