From ab65153b9e6a2de3efa573fe828174766fa46d68 Mon Sep 17 00:00:00 2001
From: Emanuele Grande <ema.grandem@gmail.com>
Date: Tue, 8 Jun 2021 19:17:08 +0200
Subject: [PATCH] Better UX 1. hide external player 2. move love in current
 track info and make it red 'cause love

---
 htdocs/css/mpd.css | 23 +++++++++++++++--------
 htdocs/index.html  | 15 +++++++++------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index a5c6acc..dee2cbb 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -9,6 +9,7 @@ body {
 
 #volumeslider {
   width: 150px;
+  float: left;
 }
 
 #volumeslider .progress {
@@ -27,6 +28,12 @@ button {
   margin-top: 2px;
 }
 
+#volume-number {
+  float: right;
+  margin-top: 2px;
+  margin-left: 10px;
+}
+
 #breadcrump {
   display: block;
 
@@ -108,14 +115,14 @@ td:nth-child(2), td:nth-child(3) {
 }
 
 @media only screen and (max-width: 600px) {
-	td:nth-child(2), td:nth-child(3) {
-	  min-width: 0;
-	  max-width: 0;
-	}
-	td:nth-child(4), th:nth-child(4) {
-	  min-width: 10%;
-	  white-space: normal;
-	}
+  td:nth-child(2), td:nth-child(3) {
+    min-width: 0;
+    max-width: 0;
+  }
+  td:nth-child(4), th:nth-child(4) {
+    min-width: 10%;
+    white-space: normal;
+  }
 }
 
 tbody {
diff --git a/htdocs/index.html b/htdocs/index.html
index ca3df12..caf8a22 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -54,18 +54,18 @@
               <span class="glyphicon glyphicon-forward"></span>
             </button>
           </div>
-          <div class="btn-group" style="display: none;">
+          <!-- <div class="btn-group">
             <button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
               <span class="glyphicon glyphicon-heart"></span>
             </button>
-          </div>
+          </div> -->
           <div class="btn-group">
             <div class="btn btn-toolbar btn-default">
               <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
               <div id="volumeslider"></div>
             </div>
           </div>
-           <div class="btn-group" role="group" style="display: none;">
+           <!-- <div class="btn-group" role="group">
             <audio id="player" preload="none"></audio>
             <button type="button" class="btn btn-default" onclick="clickLocalPlay()">
               <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
@@ -73,7 +73,7 @@
             <button type="button" class="btn btn-default" onclick="window.open('/player.html');">
               <span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
             </button>
-          </div>
+          </div> -->
        </div>
           
         <form id="search" class="navbar-form navbar-right" role="search">
@@ -99,6 +99,10 @@
             <h1>
               <span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
               <span id="currenttrack"></span>
+              <span id="love" style="margin: auto;">
+                <button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
+                <span class="glyphicon glyphicon-heart" style="color: red;"></span>
+            </button></span>
             </h1>
             <h4>
               <span id="artist" class="text"></span>
@@ -127,8 +131,7 @@
                 <th>Album</th>
                 <th>Title</th>
                 <th>Length</th>
-                <th></th>
-                <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+                <th><div style="width: 15px;"></div></th>
               </tr>
             </thead>
             <tbody>