Merge pull request #156 from jcass77/fix/155_long_track_names

Prevent song information text from overlapping the 'Play' button.

mopidy_musicbox_webclient/static/css/webclient.css

@@ -481,7 +481,12 @@ a {
 #infocover {
     height: 50px;
     width: 50px;
-    position: absolute;
+}
+
+.playicon {
+    width: 10%;
+    float: right;
+    text-align: right;
 }
 
 #btplay {
@@ -490,17 +495,16 @@ a {
 
 .songinfo {
     height: 100%;
+    width: 90%;
+    float: left;
 }
 
 .songinfo-text {
     text-align: left;
     line-height: 22px;
-    display:inline-block;
-    padding: 6px;
     color: white;
-    position: absolute;
-    padding-left: 55px;
-    padding-right: 55px;
+    overflow: hidden;
+    padding: 3px;
 }
 
 #nowPlayingpane{

mopidy_musicbox_webclient/static/index.html

@@ -438,14 +438,14 @@
 
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
     <div class="footerControls">
-        <div id="songinfo" style="float: left">
-            <a href="#"><div><img id="infocover" src="images/default_cover.png"/></div></a>
+        <div class="songinfo" id="songinfo">
+            <a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png"/></div></a>
             <div class="songinfo-text">
                 <div id="infoname"></div>
                 <div id="infoartist"></div>
             </div>
         </div>
-        <div style="float: right;">
+        <div class="playicon">
             <a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
         </div>
     </div>

mopidy_musicbox_webclient/static/js/gui.js

@@ -24,7 +24,9 @@ function resetSong() {
 
 function resizeMb() {
     $("#infoname").html(songdata.track.name);
+    $("#infoname").truncate();
     $("#infoartist").html(artiststext);
+    $("#infoartist").truncate();
 
     if ($(window).width() <= 960) {
 //        $('#playlisttracksdiv').hide();

mopidy_musicbox_webclient/static/mb.manifest

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-02-4:v1
+# 2016-02-4:v2
 
 NETWORK:
 *