Separate song info box and queue list

Fix position of song info box and control buttons (don't scroll out of screen)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index c1e9d46..21fe414 100644 (file)
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -27,7 +27,6 @@ button {
 
 #breadcrump {
   display: block;
-
   overflow: auto;
   white-space: nowrap;
 }
@@ -165,3 +164,8 @@ button {
   text-decoration: none;
   color: black;
 }
+
+.sticky {
+  position: sticky;
+  top: 55px;
+}

diff --git a/htdocs/index.html b/htdocs/index.html
index d9825ca..0fed0d4 100644 (file)
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -142,7 +142,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 sticky">
             <!-- Default panel contents -->
             <div class="panel-heading">
               <b id="panel-heading">Queue</b>
@@ -165,8 +165,10 @@
 
               <div id="progressbar"></div>
             </div>
-            <!-- /.panel-body -->
-
+          </div>
+          <!-- /.panel -->
+          <!-- /.panel-body -->
+          <div class="panel panel-primary">
             <ol id="breadcrump" class="breadcrumb"></ol>
 
             <div class="col-md-12" id="filter"></div>
@@ -180,7 +182,7 @@
                   <th>Album</th>
                   <th>Title</th>
                   <th>Length</th>
-                  <th></th>
+                  <th><div style="width: 15px"></div></th>
                 </tr>
               </thead>
               <tbody></tbody>
@@ -194,7 +196,7 @@
         </div>
         <!-- /.col-md-10 -->
 
-        <div class="col-md-2 col-xs-12">
+        <div class="col-md-2 col-xs-12 sticky">
           <div class="btn-toolbar">
             <div
               class="btn-group-vertical btn-block btn-group-lg"