From ef9f908add6d670636c3f59c518a096f79ffc09b Mon Sep 17 00:00:00 2001
From: jcass <john.cass77@gmail.com>
Date: Sun, 24 Jan 2016 12:03:54 +0200
Subject: [PATCH] Fix vertical alignment of playback control buttons.

---
 README.rst                                    |  1 +
 .../static/css/webclient.css                  | 15 ++++++----
 mopidy_musicbox_webclient/static/index.html   | 30 ++++++++++---------
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/README.rst b/README.rst
index 5bfc86f..affb5e4 100644
--- a/README.rst
+++ b/README.rst
@@ -62,6 +62,7 @@ v2.0.1 (UNRELEASED)
 - Added ability to manually initiate refresh of Playlists.
 - Increase volume slider handle by 30% to make it easier to use on mobile devices
 - Add application cache manifest file for quicker loads and to allow client devices to detect changes.
+- Fix vertical alignment of playback control buttons in footer.
 
 v2.0.0 (26-3-2015)
 ------------------
diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
index 6862608..f03c4a2 100644
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -341,13 +341,18 @@
  *******************/
 .nowPlayingControls {
     font-size: 20px;
-    line-height: 45px;
-    padding-left: 10px;
+    line-height: 40px;
+    width: 100%;
 }
-.nowPlayingControls .fa{
-    vertical-align: -webkit-baseline-middle;
+
+.nowPlayingControls span span {
+    padding-left: 2px;
+    padding-right: 2px;
+	height=100%;
+	vertical-align: middle;
 }
-.nowPlayingControls #btplayNowPlaying{
+
+.nowPlayingControls #btplayNowPlaying {
     font-size: 190%;
     margin-left: 15px;
     margin-right: 15px;
diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
index 338bdac..7234256 100644
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@@ -409,9 +409,9 @@
     <h4>Streams</h4>
 
     <div>
-        <form>
         <div class="ui-grid-a pl-breakpoint">
         <div class="ui-block-a" style="padding: 5px">
+        <form>
             <p>Play a specific stream/track and optionally save it to your favourites.
             <button class="btn" type="button" onclick="return getCurrentlyPlaying();">
                 Get currently playing
@@ -428,7 +428,7 @@
                 Save
             </button>
                 <br/>
-            </form>
+        </form>
         </div>
         <div class="ui-block-b" style="padding: 5px">
             <ul id="streamuristable" class="table"></ul>
@@ -454,19 +454,21 @@
 </div>
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
 
-    <p id="buttons" style="float:right; margin-top: 20px; margin-right: 5px;">
-                   <a href="#" onclick="doRandom(); return false" title="Random"><i class="fa fa-random" id="randombt"></i></a>
-            &nbsp; <a href="#" onclick="doRepeat(); return false" title="Repeat"><i class="fa fa-repeat" id="repeatbt"></i></a>
-            &nbsp; <a href="#" onclick="doConsume(); return false" title="Consume"><i class="fa fa-cutlery" id="consumebt"></i></a>
-            &nbsp; <a href="#" onclick="doSingle(); return false" title="Single"><i class="fa fa-dot-circle-o" id="singlebt"></i></a>
-            &nbsp; <a href="#" onclick="doShuffle(); return false" title="Shuffle"><i class="fa fa-arrows-v" id="shufflebt"></i></a>
-    </p>
+    <div class="nowPlayingControls">
+        <span style="float: left;">
+            <a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
+            <a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
+            <a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
+        </span>
+        <span style="float: right; margin-right: 10px;">
+            <a href="#" onclick="doRandom(); return false"><span id="randombt" title="Random"><i class="fa fa-random"></i></span></a>
+            <a href="#" onclick="doRepeat(); return false"><span id="repeatbt" title="Repeat"><i class="fa fa-repeat"></i></span></a>
+            <a href="#" onclick="doConsume(); return false"><span id="consumebt" title="Consume"><i class="fa fa-cutlery"></i></span></a>
+            <a href="#" onclick="doSingle(); return false"><span id="singlebt" title="Single"><i class="fa fa-dot-circle-o"></i></span></a>
+            <a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
+        </span>
+    </div>
 
-        <div class="nowPlayingControls" style="float:left; margin-left: 5px;">
-                   <a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
-            &nbsp; <a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
-            &nbsp; <a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
-        </div>
 </div>
 <!-- /footer -->