From 6a3851a765fc843471ec0e3b9b033d7985ea7e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Tue, 24 Apr 2018 14:48:31 +0200
Subject: [PATCH] Fixed issues with sidenav accordion

---
 server/public/assets/css/style.css            |  9 +++
 .../public/partials/channel/panel.handlebars  | 74 ++++++-------------
 2 files changed, 33 insertions(+), 50 deletions(-)

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 179fc1d4..3e196d83 100755
--- a/server/public/assets/css/style.css
+++ b/server/public/assets/css/style.css
@@ -653,6 +653,15 @@ nav, .tabs .tab a,
     background-color: #2D2D2D;
 }
 
+.sidenav .collapsible-header, .sidenav.fixed .collapsible-header {
+    outline: none !important;
+}
+
+.sidenav .collapsible li, .sidenav.fixed .collapsible li {
+    color: #2d2d2d;
+}
+
+
 .tabs .tab a{
     padding: 0px;
 }
diff --git a/server/public/partials/channel/panel.handlebars b/server/public/partials/channel/panel.handlebars
index b7ab9085..4acae8ec 100755
--- a/server/public/partials/channel/panel.handlebars
+++ b/server/public/partials/channel/panel.handlebars
@@ -1,13 +1,13 @@
-<li class="no-padding">
+
     <div class="nav-btn close-settings clickable" title="Close" id="closeSettings">
         <i class="material-icons auto-margin">close</i>
     </div>
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="col s9 collapsible-header bold waves-effect admin-settings">
+    <ul class="collapsible collapsible-accordion settings-collapsible">
+        <li class="no-padding">
+            <div class="col s9 collapsible-header bold waves-effect admin-settings">
                 Channel Settings
                 <i class="material-icons">tune</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <form action="#" id="adminForm" onsubmit="return false;">
                     <ul>
@@ -143,14 +143,10 @@
                 </form>
             </div>
         </li>
-    </ul>
-</li>
-<li class="no-padding">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect">Channel Info
+        <li class="no-padding">
+            <div class="collapsible-header bold waves-effect">Channel Info
                 <i class="material-icons">info_outline</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul>
                     <li>
@@ -177,15 +173,11 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
-{{#unless client}}
-<li class="no-padding remote-panel hide-on-small-only">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect">Remote Control
+    {{#unless client}}
+        <li class="no-padding remote-panel hide-on-small-only">
+            <div class="collapsible-header bold waves-effect">Remote Control
                 <i class="material-icons">settings_remote</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul>
                     <li>
@@ -211,14 +203,10 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
-<li class="no-padding offline-panel">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect">Local Mode
+        <li class="no-padding offline-panel">
+            <div class="collapsible-header bold waves-effect">Local Mode
                 <i class="material-icons">visibility_off</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul>
                     <li>
@@ -239,15 +227,11 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
 
-<li class="no-padding show-only-mobile mobile-remote-panel">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect import-a">Remote Controller
+        <li class="no-padding show-only-mobile mobile-remote-panel">
+            <div class="collapsible-header bold waves-effect import-a">Remote Controller
                 <i class="material-icons">settings_remote</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul id="remote-mobile-container">
                     <li class="white-bg">
@@ -284,15 +268,11 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
 
-<li class="no-padding import-panel">
-    <ul class="collapsible collapsible-accordion">
-        <li>
-            <a class="collapsible-header bold waves-effect import-a">Import Playlist
+        <li class="no-padding import-panel">
+            <div class="collapsible-header bold waves-effect import-a">Import Playlist
                 <i class="material-icons">keyboard_arrow_down</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul>
                     <li class="white-bg">
@@ -364,15 +344,11 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
 
-<li class="no-padding export-panel">
-    <ul class="collapsible collapsible-accordion white-bg">
-        <li>
-            <a class="collapsible-header bold waves-effect export-a">Export Playlist
+        <li class="no-padding export-panel">
+            <div class="collapsible-header bold waves-effect export-a">Export Playlist
                 <i class="material-icons">keyboard_arrow_up</i>
-            </a>
+            </div>
             <div class="collapsible-body">
                 <ul>
                     <li class="white-bg">
@@ -421,6 +397,4 @@
                 </ul>
             </div>
         </li>
-    </ul>
-</li>
 {{/unless}}