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

View File

@ -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;
}

View File

@ -104,8 +104,8 @@
<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 @@
<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>

View File

@ -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 );