From 6a29211f9ec6724796f749f18c0fe002e95a89d9 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 21:43:31 +0200
Subject: [PATCH] correct hover behavior

---
 rowers/templates/redesign.html |   2 +-
 static/css/styles2.css         | 117 ++++++++++++++++++++++-----------
 static/js/menu.js              |  16 +++++
 templates/newbase.html         |  23 +++++++
 4 files changed, 117 insertions(+), 41 deletions(-)
 create mode 100644 static/js/menu.js

diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html
index 4b3498e3..48e496e5 100644
--- a/rowers/templates/redesign.html
+++ b/rowers/templates/redesign.html
@@ -12,6 +12,7 @@
 
 {% block sidebar %}
 <ul class="cd-accordion-menu animated">
+  <li><a href="#0">Link</a></li>
   <li class="has-children">
     <input type="checkbox" name ="group-1" id="group-1" checked>
     <label for="group-1">Group 1</label>
@@ -24,7 +25,6 @@
 	<ul>
 	  <li><a href="#0">Link</a></li>
 	  <li><a href="#0">Link</a></li>
-	  <li><a href="#0">Link</a></li>
 	</ul>
       </li>
       <li class="has-children">
diff --git a/static/css/styles2.css b/static/css/styles2.css
index ec3087b6..74acb81a 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -8,8 +8,9 @@
 
     
     .wrapper > * {
-    /*    border: 2px solid #f08c00; */
-        padding: 5px;
+        /*    border: 2px solid #f08c00; */
+        border 0;
+        padding: 5px; 
     }
 
     a {
@@ -20,8 +21,8 @@
     nav ul {
         list-style: none;
         margin: 0;
-      display: flex;
-      justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         padding: 0.2em 0.2em 0.2em 0.2em;
     }
 
@@ -32,31 +33,69 @@
     }
 
     aside ul {
+        margin-bottom: 0;
+        left: 15px;
+    }
+
+    aside ul label,
+    aside ul a {
+        padding-left: 15px;
+    }
+
+    aside ul ul label,
+    aside ul ul a {
+        padding-left: 30px;
+    }
+    
+    aside ul ul ul label,
+    aside ul ul ul a {
+        padding-left: 45px;
+    }
+
+    aside ul ul ul ul label,
+    aside ul ul ul ul a {
+        padding-left: 60px;
+    }
+    
+    aside li,
+    aside a,
+    aside ul label,
+    aside ul li,
+    aside ul a,
+    aside ul ul label,
+    aside ul ul li,
+    aside ul ul a,
+    aside ul ul ul label,
+    aside ul ul ul li,
+    aside ul ul ul a {
         list-style: none;
-        margin: 5px;
-        padding: 0;
-
-
+        margin: 0;
+        background: #35383d;   
     }
 
-    aside li {
-        margin-left: 0;
+
+    aside ul label:hover,
+    aside ul a:hover,
+    aside ul ul label:hover,
+    aside ul ul a:hover,
+    aside ul ul ul label:hover,
+    aside ul ul ul a:hover {
+        background: #4d5158; 
     }
 
-    aside li li {
-        margin-left: 30px;
-    }
 
     aside a {
         color: #a0f6aa;
         text-decoration: none;
     }
+
+
+
+        
     aside .cd-accordion-menu {
         width: 100%;
-        max-width: 600px; 
-        background: #4d5158;
-/*        margin: 4em auto;  */
-/*        box-shadow: 0 4px 40px #70ac76; */
+        max-width: 600px;        
+        background: #35383d;   
     }
     
     aside .cd-accordion-menu ul {
@@ -81,38 +120,42 @@
     aside .cd-accordion-menu a {
         position: relative;
         display: block;
-        background: #4d5158;
         color: #ffffff;
-/*        font-size: 1.6rem; */
+        font-size: 1.2em; 
     }
 
     aside .cd-accordion-menu label::before
     {
         /* icons */
-        content: 'V';
+        font:  normal normal normal 1.2em/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        content: '\f0da';
         display: inline-block;
         width: 16px;
         height: 16px;
-        -webkit-transform: translateY(-50%)  rotate(-90deg);
-        -moz-transform: translateY(-50%) rotate(-90deg);
-        -ms-transform: translateY(-50%) rotate(-90deg);
-        -o-transform: translateY(-50%) rotate(-90deg);
-        transform: translateY(-50%) rotate(-90deg); 
         
+        -webkit-transform: translateY(0%);
+        -moz-transform: translateY(0%);
+        -ms-transform:  translateY(0%);
+        -o-transform: translateY(0%);
+        transform: translateY(0%); 
     }
 
     aside .cd-accordion-menu label {
         cursor: pointer;
+        background: #35383d;
     }
 
 
     aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
         /* rotate arrow */
-        -webkit-transform: translateY(0%) ;
-        -moz-transform: translateY(0%) ;
-        -ms-transform: translateY(0%) ;
-        -o-transform: translateY(0%) ;
-        transform: translateY(0%) ;
+        -webkit-transform: translateY(20%) rotate(90deg);
+        -moz-transform: translateY(20%) rotate(90deg);
+        -ms-transform:  translateY(20%) rotate(90deg);
+        -o-transform: translateY(20%) rotate(90deg);
+        transform: translateY(20%) rotate(90deg); 
+
     }
     
     
@@ -123,12 +166,8 @@
         display: block;
     }
     
-    aside .cd-accordion-menu ul label,
-    aside .cd-accordion-menu ul a {
-        background: #35383d; 
-        padding-left: 30px;
-    }
-        
+
+    
     user ul {
         list-style: none;
         margin: 0;
@@ -170,10 +209,8 @@
 }
 .side {
   grid-area: sidebar;
-  background: #4d5158;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
+  background: #35383d;
+  padding: 0;
 }
 
 .ad {
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 00000000..e39f0702
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,16 @@
+$(document).ready(function(){
+    var accordionsMenu = $('.cd-accordion-menu');
+    
+    if( accordionsMenu.length > 0 ) {
+	
+	accordionsMenu.each(function(){
+	    var accordion = $(this);
+	    //detect change in the input[type="checkbox"] value
+	    accordion.on('change', 'input[type="checkbox"]', function(){
+		var checkbox = $(this);
+		console.log(checkbox.prop('checked'));
+		( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
+	    });
+	});
+    }
+});
diff --git a/templates/newbase.html b/templates/newbase.html
index 965e1248..0b0e2e94 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -91,6 +91,29 @@
       
       return t;
       }(document, "script", "twitter-wjs"));</script>
+
+    <script type='text/javascript'
+            src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+    </script>
+    <script>
+      $(document).ready(function(){
+    var accordionsMenu = $('.cd-accordion-menu');
+    
+    if( accordionsMenu.length > 0 ) {
+	
+	accordionsMenu.each(function(){
+	    var accordion = $(this);
+	    //detect change in the input[type="checkbox"] value
+	    accordion.on('change', 'input[type="checkbox"]', function(){
+		var checkbox = $(this);
+		console.log(checkbox.prop('checked'));
+		( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
+	    });
+	});
+    }
+});
+
+    </script> <!-- Resource jQuery -->
     {% analytical_head_bottom %}
   </head>