Made filter parts openable, added slim scroll

hourglass/.meteor/packages

@@ -43,3 +43,4 @@ yogiben:admin-edit
 mfactory:admin-lte
 mrt:jquery-ui
 standard-minifier-css@1.2.0_1
+rochal:slimscroll

hourglass/.meteor/versions

@@ -102,6 +102,7 @@ reactive-var@1.0.10
 reload@1.1.10
 retry@1.0.8
 reywood:publish-composite@1.4.2
+rochal:slimscroll@1.3.3
 routepolicy@1.0.11
 rzymek:fullcalendar@2.7.2
 service-configuration@1.0.10

hourglass/client/main/main.css

@@ -328,15 +328,10 @@ a
 #classListHolder {
 	max-height: 48%;
 	width: 100%;
-	padding-right: 50%;
 
 	overflow-y: auto;
 }
 
-#sideClassWrapper {
-	max-height: 20vh;
-}
-
 .sideClass, .sideFilter {
 	width: 100%;
 
@@ -367,12 +362,12 @@ a
 }
 
 .sideClassName {
-	width: 65%;
+	width: 50%;
 	padding-left: 5%;
 }
 
 .sideClassHour {
-	width: 30%;
+	width: 50%;
 	color: #CCC;
 }
 
@@ -394,7 +389,7 @@ a
 	white-space: nowrap;
 }
 
-#filterHead {
+#filterHead, #filterWrapper .sectionTitle {
 	font-weight: 200;
 	padding: 0;
 
@@ -406,18 +401,18 @@ a
 	transition: background-color 0.4s ease; 
 }
 
-#filterHead:hover {
+#filterHead:hover, #filterWrapper .sectionTitle:hover {
 	background-color: rgba(255,255,255,0.2);
 }
 
-#filterHead h3:first-child {
+#filterHead h3:first-child, #filterWrapper .sectionTitle h3:first-child {
 	font-weight: 200;
 	padding: 5%;
 	display: inline-block;
 	pointer-events: none;
 }
 
-#filterHead .fa {
+#filterHead .fa, #filterWrapper .sectionTitle .fa {
 	font-size: 120%;
 	padding: 5%;
 	float: right;

hourglass/client/main/main.html

@@ -40,19 +40,23 @@
                             <i class="fa fa-angle-down" aria-hidden="true"></i>
                         </div>
                         <div id="filterWrapper">
-                            <h3 class="sectionTitle">By Type</h3>
+                            <div id="typeFilterWrapper" class="sectionTitle">
+                                <h3>By Type</h3>
+                                <i class="fa fa-angle-down" aria-hidden="true"></i>
+                            </div>
                             <div id="classFilterHolder">
                                 {{#each types}}
                                     {{> sideTypeFilter}}
                                 {{/each}}
                             </div>
-                            <div id="classListHolder">
+                            <div id="classFilterWrapper" class="sectionTitle">
-                                <h3 class="sectionTitle">By Class</h3>    
+                                    <h3>By Class</h3>
-                                <div id="sideClassWrapper">
+                                    <i class="fa fa-angle-down" aria-hidden="true"></i>
-                                    {{#each myClasses}}
+                            </div> 
-                                        {{> sidebarClasses}}
+                            <div id="classListHolder">    
-                                    {{/each}}
+                                {{#each myClasses}}
-                                </div>
+                                    {{> sidebarClasses}}
+                                {{/each}}
                             </div>
                         </div>
                     </div>

hourglass/client/main/main.js

@@ -10,7 +10,7 @@ var calWorkOpen = null;
 var calWorkDate = null;
 modifyingInput = null;
 dropOpen = null;
-var filterOpen =  false;
+var filterOpen =  [false,true,true];
 var sidebarMode = [null,null]
 
 var openValues = {
@@ -66,6 +66,13 @@ Template.main.rendered = function() {
         }
     );
     $("#menuContainer").toggle();
+    $("#classListHolder").slimScroll({
+        height: '30vh',
+        size: '5px',
+        railVisible: true,
+        railColor: '#222',
+        railOpacity: 0.1,
+    })
 };
 
 Template.profile.rendered = function() {
@@ -543,12 +550,28 @@ Template.main.events({
     },
     'click #filterHead' (event) {
         if(event.target.id === "disableFilter") return;
-        if(!filterOpen) {
+        if(!filterOpen[0]) {
             $("#filterWrapper").slideDown(300);
         } else {
             $("#filterWrapper").slideUp(300);
         }
-        filterOpen = !filterOpen;
+        filterOpen[0] = !filterOpen[0];
+    },
+    'click #typeFilterWrapper' () {
+        if(!filterOpen[1]) {
+            $("#classFilterHolder").slideDown(300);
+        } else {
+            $("#classFilterHolder").slideUp(300);
+        }
+        filterOpen[1] = !filterOpen[1];
+    },
+    'click #classFilterWrapper' () {
+        if(!filterOpen[2]) {
+            $("#classListHolder").slideDown(300);
+        } else {
+            $("#classListHolder").slideUp(300);
+        }
+        filterOpen[2] = !filterOpen[2];
     },
     'click #requests .fa-question' () {
         Session.set("requests", !Session.get("requests"));