layout improvements

jcorporation · Apr 23, 2018 · e1cb953 · e1cb953
1 parent ebd357a
commit e1cb953
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
@@ -76,7 +76,7 @@ h1 {
   white-space: nowrap;
 }
 
-td:nth-child(2), th:nth-child(2) {
+td:nth-child(4), th:nth-child(4) {
   /* This *has* to be placed before
      any t[dh]:nth-last-child(2) for
      the override to work. */
@@ -85,25 +85,36 @@ td:nth-child(2), th:nth-child(2) {
 
 td:nth-last-child(2), th:nth-last-child(2) {
   text-align: right;
-  width: 6em;
+  width: 4em;
 }
 
-#salamisandwich td:nth-child(2) span {
+#salamisandwich td:nth-child(4) span {
   font-style: italic;
   font-size: 90%;
 
   display: block;
 }
 
-td:nth-child(3), td:nth-last-child(3) {
+td:nth-child(2), td:nth-child(3) {
   min-width: 25%;
-  max-width: 0;
+  max-width: 10em;
 
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+@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;
+	}
+}
+
 tbody {
   cursor: pointer;
 }

diff --git a/htdocs/index.html b/htdocs/index.html
@@ -104,8 +104,8 @@ <h1>
               <span id="currenttrack"></span>
             </h1>
             <h4>
-              <span id="album" class="text"></span>
-              <span id="artist" class="text pull-right"></span>
+              <span id="artist" class="text"></span>
+              <span id="album" class="text pull-right"></span>
             </h4>
             <p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
 
@@ -127,10 +127,10 @@ <h4>
             <thead>
               <tr>
                 <th>#</th>
-                <th>Title</th>
-                <th>Album</th>
                 <th>Artist</th>
-                <th>Duration</th>
+                <th>Album</th>
+                <th>Title</th>
+                <th>Length</th>
                 <th></th>
               </tr>
             </thead>

diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
@@ -317,9 +317,9 @@ function webSocketConnect() {
 
                         $('#salamisandwich > tbody').append(
                             "<tr trackid=\"" + obj.data[song].id + "\"><td>" + (obj.data[song].pos + 1) + "</td>" +
-                                "<td>"+ obj.data[song].title +"</td>" +
-                                "<td>"+ obj.data[song].album +"</td>" +
                                 "<td>"+ obj.data[song].artist +"</td>" + 
+                                "<td>"+ obj.data[song].album +"</td>" +
+                                "<td>"+ obj.data[song].title +"</td>" +
                                 "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                         "</td><td></td></tr>");
                     }
@@ -445,9 +445,9 @@ function webSocketConnect() {
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
                                     "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + 
-                                    "<td>" + obj.data[item].title  + "</td>" +
-                                    "<td>" + obj.data[item].album  + "</td>" +
                                     "<td>" + obj.data[item].artist + "</td>" + 
+                                    "<td>" + obj.data[item].album  + "</td>" +
+                                    "<td>" + obj.data[item].title  + "</td>" +
                                     "<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                                     "</td><td></td></tr>"
                                 );
@@ -586,7 +586,7 @@ function webSocketConnect() {
                     break;
                 case 'outputnames':
                     $('#btn-outputs-block button').remove();
-                    if (obj.data.length > 1) {
+                    if ( Object.keys(obj.data).length ) {
 		        $.each(obj.data, function(id, name){
                             var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
                             btn.appendTo($('#btn-outputs-block'));
@@ -630,14 +630,14 @@ function webSocketConnect() {
                     $('#currenttrack').text(" " + obj.data.title);
                     var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
 
-                    if(obj.data.album) {
-                        $('#album').text(obj.data.album);
-                        notification += obj.data.album + "<br />";
-                    }
                     if(obj.data.artist) {
                         $('#artist').text(obj.data.artist);
                         notification += obj.data.artist + "<br />";
                     }
+                    if(obj.data.album) {
+                        $('#album').text(obj.data.album);
+                        notification += obj.data.album + "<br />";
+                    }
 
                     if ($.cookie("notification") === "true")
                         songNotify(obj.data.title, obj.data.artist, obj.data.album );