From ffc2de173869050ce8943b6582d20b0f4ce6524a Mon Sep 17 00:00:00 2001
From: emagra <ema.grandem@gmail.com>
Date: Fri, 11 Jun 2021 18:03:33 +0200
Subject: [PATCH] Separate the song info box from playlist/library list and
 position fixed for song info box

---
 htdocs/css/mpd.css |  6 +++++-
 htdocs/index.html  | 19 +++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index dee2cbb..725eea9 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -36,13 +36,17 @@ button {
 
 #breadcrump {
   display: block;
-
   overflow: auto;
   white-space: nowrap;
 }
 
 #breadcrump > li > a{
   cursor: pointer;
+  color: #fff;
+}
+
+#breadcrump > .active{
+  color: #ddd;
 }
 
 #counter {
diff --git a/htdocs/index.html b/htdocs/index.html
index 44527ea..e3281b7 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -92,7 +92,7 @@
       <div class="col-md-10 col-xs-12">
         <div class="notifications top-right"></div>
 
-        <div class="panel panel-primary">
+        <div class="panel panel-primary" style="position: sticky;top: 55px; z-index: 99;">
           <!-- Default panel contents -->
           <div class="panel-heading"><b id="panel-heading">Queue</b>
                                      <b id="panel-heading-info" class="text pull-right"></b></div>
@@ -115,15 +115,11 @@
 
 
           </div><!-- /.panel-body -->
-
-          <ol id="breadcrump" class="breadcrumb">
-          </ol>
-
-          <div class="col-md-12" id="filter">
-          </div>
-
-
-          <!-- Table -->
+        </div><!-- /.panel -->
+        <!-- Table -->
+        <div class="panel panel-primary">
+          <div id="breadcrump" class="breadcrumb panel-heading"></div>
+          <div id="filter" class="col-md-12"></div>
           <table id="salamisandwich" class="table table-hover">
             <thead>
               <tr>
@@ -138,8 +134,7 @@
             <tbody>
             </tbody>
           </table>
-
-        </div><!-- /.panel -->
+        </div>
         <ul class="pager">
           <li id="prev" class="page-btn hide"><a href="">Previous</a></li>
           <li id="next" class="page-btn"><a href="">Next</a></li>