From ae3ee8ada5b9543b2c17b92636c8ca659557471b Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 29 Jan 2018 16:28:32 +0100
Subject: [PATCH] Music player styles

---
 .../backend/http/static/css/application.css   | 20 +++++++----
 platypush/backend/http/static/js/music.mpd.js |  2 +-
 .../http/templates/plugins/music.mpd.html     | 36 ++++++++++---------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/platypush/backend/http/static/css/application.css b/platypush/backend/http/static/css/application.css
index d6e80c2e..699b420e 100644
--- a/platypush/backend/http/static/css/application.css
+++ b/platypush/backend/http/static/css/application.css
@@ -24,24 +24,32 @@ main {
     margin: auto;
 }
 
+    ul.tab-nav {
+        padding-left: 0 !important;  /* Override skeleton-tabs default */
+    }
+
 .tab-content {
     border: 1px solid #bbb;
     border-top: 0;
     padding: 20px;
-    margin: -25px 0 auto 5px;
+    margin-top: -25px;
 }
 
     .playback-controls {
-        text-align: right;
+        text-align: center;
     }
 
     .button[disabled] {
         background: rgba(240,240,240,1)
     }
 
-
-    .now-playing > .artist {
-        font-weight: bold;
-        display: block;
+    .track-info {
+        text-align: center;
+        margin-bottom: 15px;
     }
 
+        .track-info > .artist {
+            font-weight: bold;
+            display: block;
+        }
+
diff --git a/platypush/backend/http/static/js/music.mpd.js b/platypush/backend/http/static/js/music.mpd.js
index 7dddd950..adec3d4a 100644
--- a/platypush/backend/http/static/js/music.mpd.js
+++ b/platypush/backend/http/static/js/music.mpd.js
@@ -27,7 +27,7 @@ $(document).ready(function() {
 
     var updateControls = function(status, track) {
         var $playbackControls = $('.playback-controls');
-        var $curTrack = $('.now-playing');
+        var $curTrack = $('.track-info');
 
         if (status) {
             switch (status.state.toLowerCase()) {
diff --git a/platypush/backend/http/templates/plugins/music.mpd.html b/platypush/backend/http/templates/plugins/music.mpd.html
index 64abdb72..6d5fba51 100644
--- a/platypush/backend/http/templates/plugins/music.mpd.html
+++ b/platypush/backend/http/templates/plugins/music.mpd.html
@@ -1,32 +1,34 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
 
 <div class="row">
-    <div class="six columns now-playing">
+    <div class="ten columns offset-by-one track-info">
         <span class="no-track">No media is being played</span>
         <span class="artist"></span>
         <span class="track"></span>
     </div>
 
-    <div class="six columns playback-controls">
-        <button data-action="previous">
-            <i class="fa fa-step-backward"></i>
-        </button>
+    <div class="row">
+        <div class="eight columns offset-by-two playback-controls">
+            <button data-action="previous">
+                <i class="fa fa-step-backward"></i>
+            </button>
 
-        <button data-action="play">
-            <i class="fa fa-play"></i>
-        </button>
+            <button data-action="play">
+                <i class="fa fa-play"></i>
+            </button>
 
-        <button data-action="pause">
-            <i class="fa fa-pause"></i>
-        </button>
+            <button data-action="pause">
+                <i class="fa fa-pause"></i>
+            </button>
 
-        <button data-action="stop">
-            <i class="fa fa-stop"></i>
-        </button>
+            <button data-action="stop">
+                <i class="fa fa-stop"></i>
+            </button>
 
-        <button data-action="next">
-            <i class="fa fa-step-forward"></i>
-        </button>
+            <button data-action="next">
+                <i class="fa fa-step-forward"></i>
+            </button>
+        </div>
     </div>
 </div>