mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-25 02:20:27 +00:00
Code Issues Releases Wiki Activity

Fixed search and optimized table views for small devices

Browse Source
This commit is contained in:
jcorporation 2018-05-27 16:30:36 +01:00
parent 0a1bbfbcd5
commit 29a0992555
3 changed files with 77 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
htdocs/css/mpd.css
View File

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

33
htdocs/index.html
View File

@ -144,27 +144,28 @@
</form>
</div>
<table id="queueList" class="table table-hover">
<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="tbltitle"/>
<col class="tbllength"/>
<col class="tblaction"/>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
<th>Length</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">
<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="tbltitle"/>
<col class="tbllength"/>
<col class="tblaction"/>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
<th>Length</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,20 +218,21 @@
<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">
<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="tbltitle"/>
<col class="tbllength"/>
<col class="tblaction"/>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
<th>Length</th>
<th>Duration</th>
<th></th>
</tr>
</thead>
@ -238,6 +241,7 @@
</table>
</div>
</div>
</div>
<footer class="footer">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
@ -249,6 +253,7 @@
</nav>
</footer>
<!-- Modal -->
<div class="modal" id="modalConnectionError" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">

7
htdocs/js/mpd.js
View File

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