mirror of
https://github.com/SuperBFG7/ympd
synced 2024-06-25 22:23:16 +00:00
Fixed search and optimized table views for small devices
This commit is contained in:
jcorporation
parent
0a1bbfbcd5
commit
29a0992555
|
|
@ -53,38 +53,14 @@ h1 {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
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. */
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
td:nth-last-child(2), th:nth-last-child(2) {
|
||||
text-align: right;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
td:nth-child(2), td:nth-child(3) {
|
||||
min-width: 25%;
|
||||
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;
|
||||
}
|
||||
.tbllength, .tblnum {
|
||||
@media only screen and (max-width: 576px) {
|
||||
/* .tbllength, .tblnum, .tblalbum {
|
||||
visibility:collapse;
|
||||
}
|
||||
.tbltitle, .tblartist {
|
||||
min-width:calc(50% - 15px);
|
||||
}
|
||||
*/
|
||||
.header-logo {
|
||||
display:none !important;
|
||||
}
|
||||
|
|
@ -94,7 +70,7 @@ tbody {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
td:last-child, td:first-child {
|
||||
.tblnum, .tblaction {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -144,27 +144,28 @@
|
|||
</form>
|
||||
</div>
|
||||
|
||||
<table id="queueList" class="table table-hover">
|
||||
<col class="tblnum"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Title</th>
|
||||
<th>Length</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="table-responsive-md">
|
||||
<table id="queueList" class="table table-hover table-sm">
|
||||
<col class="tblnum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Duration</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul id="queuePagination" class="pagination justify-content-center hide">
|
||||
<li id="queuePrev" class="page-item disabled"><a class="page-link text-secondary" href="">Previous</a></li>
|
||||
<li id="queueNext" class="page-item disabled"><a class="page-link text-secondary" href="">Next</a></li>
|
||||
|
|
@ -185,27 +186,28 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<table id="browseList" class="table table-hover">
|
||||
<col class="tblnum"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Title</th>
|
||||
<th>Length</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="table-responsive-md">
|
||||
<table id="browseList" class="table table-hover table-sm">
|
||||
<col class="tblnum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Duration</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul id="browsePagination" class="pagination justify-content-center hide">
|
||||
<li id="browsePrev" class="page-item disabled"><a class="page-link text-secondary" href="">Previous</a></li>
|
||||
<li id="browseNext" class="page-item disabled"><a class="page-link text-secondary" href="">Next</a></li>
|
||||
|
|
@ -216,26 +218,28 @@
|
|||
<div class="card hide" id="cardSearch">
|
||||
<div class="card-header" id="pnael-heading-search">Search</div>
|
||||
<div class="card-body">
|
||||
<table id="searchList" class="table table-hover">
|
||||
<col class="tblnum"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Title</th>
|
||||
<th>Length</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-responsive-md">
|
||||
<table id="searchList" class="table table-hover table-sm">
|
||||
<col class="tblnum"/>
|
||||
<col class="tbltitle"/>
|
||||
<col class="tblartist"/>
|
||||
<col class="tblalbum"/>
|
||||
<col class="tbllength"/>
|
||||
<col class="tblaction"/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title</th>
|
||||
<th>Artist</th>
|
||||
<th>Album</th>
|
||||
<th>Duration</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -249,6 +253,7 @@
|
|||
</nav>
|
||||
</footer>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal" id="modalConnectionError" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ function webSocketConnect() {
|
|||
try {
|
||||
var obj = JSON.parse(msg.data);
|
||||
} catch(e) {
|
||||
showNotification('Invalid JSON data received', msg.data, msg.data,'success');
|
||||
console.log('Invalid JSON data received: '+ msg.data);
|
||||
}
|
||||
|
||||
switch (obj.type) {
|
||||
|
|
@ -243,9 +243,9 @@ function webSocketConnect() {
|
|||
|
||||
$('#queueList > 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].artist +"</td>" +
|
||||
"<td>"+ obj.data[song].album +"</td>" +
|
||||
"<td>"+ obj.data[song].title +"</td>" +
|
||||
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
|
||||
"</td><td></td></tr>");
|
||||
}
|
||||
|
|
@ -312,7 +312,6 @@ function webSocketConnect() {
|
|||
break;
|
||||
case 'search':
|
||||
$('#searchList').find("tr:gt(0)").remove();
|
||||
break;
|
||||
case 'browse':
|
||||
if(current_app !== 'browse' && current_app !== 'search')
|
||||
break;
|
||||
|
|
@ -370,9 +369,9 @@ function webSocketConnect() {
|
|||
$('#'+current_app+'List > tbody').append(
|
||||
"<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
|
||||
"<td><span class=\"material-icons\">music_note</span></td>" +
|
||||
"<td>" + obj.data[item].title + "</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>"
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user