mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-11-10 16:19:54 +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; text-overflow: ellipsis;
} }
td:nth-child(4), th:nth-child(4) { @media only screen and (max-width: 576px) {
/* This *has* to be placed before /* .tbllength, .tblnum, .tblalbum {
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 {
visibility:collapse; visibility:collapse;
} }
.tbltitle, .tblartist {
min-width:calc(50% - 15px);
}
*/
.header-logo { .header-logo {
display:none !important; display:none !important;
} }
@ -94,7 +70,7 @@ tbody {
cursor: pointer; cursor: pointer;
} }
td:last-child, td:first-child { .tblnum, .tblaction {
width: 30px; width: 30px;
} }

33
htdocs/index.html
View File

@ -144,27 +144,28 @@
</form> </form>
</div> </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="tblnum"/>
<col class="tbltitle"/>
<col class="tblartist"/> <col class="tblartist"/>
<col class="tblalbum"/> <col class="tblalbum"/>
<col class="tbltitle"/>
<col class="tbllength"/> <col class="tbllength"/>
<col class="tblaction"/> <col class="tblaction"/>
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Title</th>
<th>Artist</th> <th>Artist</th>
<th>Album</th> <th>Album</th>
<th>Title</th> <th>Duration</th>
<th>Length</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div>
<ul id="queuePagination" class="pagination justify-content-center hide"> <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="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> <li id="queueNext" class="page-item disabled"><a class="page-link text-secondary" href="">Next</a></li>
@ -185,27 +186,28 @@
</div> </div>
</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="tblnum"/>
<col class="tbltitle"/>
<col class="tblartist"/> <col class="tblartist"/>
<col class="tblalbum"/> <col class="tblalbum"/>
<col class="tbltitle"/>
<col class="tbllength"/> <col class="tbllength"/>
<col class="tblaction"/> <col class="tblaction"/>
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th>Title</th>
<th>Artist</th> <th>Artist</th>
<th>Album</th> <th>Album</th>
<th>Title</th> <th>Duration</th>
<th>Length</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div>
<ul id="browsePagination" class="pagination justify-content-center hide"> <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="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> <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 hide" id="cardSearch">
<div class="card-header" id="pnael-heading-search">Search</div> <div class="card-header" id="pnael-heading-search">Search</div>
<div class="card-body"> <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="tblnum"/>
<col class="tbltitle"/>
<col class="tblartist"/> <col class="tblartist"/>
<col class="tblalbum"/> <col class="tblalbum"/>
<col class="tbltitle"/>
<col class="tbllength"/> <col class="tbllength"/>
<col class="tblaction"/> <col class="tblaction"/>
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th>Title</th>
<th>Artist</th> <th>Artist</th>
<th>Album</th> <th>Album</th>
<th>Title</th> <th>Duration</th>
<th>Length</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
@ -238,6 +241,7 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<footer class="footer"> <footer class="footer">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark"> <nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
@ -249,6 +253,7 @@
</nav> </nav>
</footer> </footer>
<!-- Modal -->
<div class="modal" id="modalConnectionError" role="dialog"> <div class="modal" id="modalConnectionError" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">

7
htdocs/js/mpd.js
View File

@ -199,7 +199,7 @@ function webSocketConnect() {
try { try {
var obj = JSON.parse(msg.data); var obj = JSON.parse(msg.data);
} catch(e) { } catch(e) {
showNotification('Invalid JSON data received', msg.data, msg.data,'success'); console.log('Invalid JSON data received: '+ msg.data);
} }
switch (obj.type) { switch (obj.type) {
@ -243,9 +243,9 @@ function webSocketConnect() {
$('#queueList > tbody').append( $('#queueList > 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].artist +"</td>" + "<td>"+ obj.data[song].artist +"</td>" +
"<td>"+ obj.data[song].album +"</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>");
} }
@ -312,7 +312,6 @@ function webSocketConnect() {
break; break;
case 'search': case 'search':
$('#searchList').find("tr:gt(0)").remove(); $('#searchList').find("tr:gt(0)").remove();
break;
case 'browse': case 'browse':
if(current_app !== 'browse' && current_app !== 'search') if(current_app !== 'browse' && current_app !== 'search')
break; break;
@ -370,9 +369,9 @@ function webSocketConnect() {
$('#'+current_app+'List > tbody').append( $('#'+current_app+'List > tbody').append(
"<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" + "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
"<td><span class=\"material-icons\">music_note</span></td>" + "<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].artist + "</td>" +
"<td>" + obj.data[item].album + "</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>"
); );