mirrors
/
ympd
mirror of https://github.com/SuperBFG7/ympd
1
0
Fork 0
Code Issues Releases Wiki Activity

layout improvements

This commit is contained in:
SuperBFG7 2018-04-23 13:38:58 +02:00
parent ebd357a24a
commit e1cb953e94
3 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
htdocs/css/mpd.css
View File

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

10
htdocs/index.html
View File

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

18
htdocs/js/mpd.js
View File

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