mirror of
https://github.com/SuperBFG7/ympd
synced 2024-09-28 14:18:40 +00:00
Better UX
1. hide external player 2. move love in current track info and make it red 'cause love
This commit is contained in:
parent
acd545350f
commit
ab65153b9e
@ -9,6 +9,7 @@ body {
|
|||||||
|
|
||||||
#volumeslider {
|
#volumeslider {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#volumeslider .progress {
|
#volumeslider .progress {
|
||||||
@ -27,6 +28,12 @@ button {
|
|||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#volume-number {
|
||||||
|
float: right;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#breadcrump {
|
#breadcrump {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@ -108,14 +115,14 @@ td:nth-child(2), td:nth-child(3) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
td:nth-child(2), td:nth-child(3) {
|
td:nth-child(2), td:nth-child(3) {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
}
|
}
|
||||||
td:nth-child(4), th:nth-child(4) {
|
td:nth-child(4), th:nth-child(4) {
|
||||||
min-width: 10%;
|
min-width: 10%;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
|
@ -54,18 +54,18 @@
|
|||||||
<span class="glyphicon glyphicon-forward"></span>
|
<span class="glyphicon glyphicon-forward"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group" style="display: none;">
|
<!-- <div class="btn-group">
|
||||||
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
|
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
|
||||||
<span class="glyphicon glyphicon-heart"></span>
|
<span class="glyphicon glyphicon-heart"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<div class="btn btn-toolbar btn-default">
|
<div class="btn btn-toolbar btn-default">
|
||||||
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
|
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
|
||||||
<div id="volumeslider"></div>
|
<div id="volumeslider"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group" role="group" style="display: none;">
|
<!-- <div class="btn-group" role="group">
|
||||||
<audio id="player" preload="none"></audio>
|
<audio id="player" preload="none"></audio>
|
||||||
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
|
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
|
||||||
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
|
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
|
||||||
@ -73,7 +73,7 @@
|
|||||||
<button type="button" class="btn btn-default" onclick="window.open('/player.html');">
|
<button type="button" class="btn btn-default" onclick="window.open('/player.html');">
|
||||||
<span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
|
<span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="search" class="navbar-form navbar-right" role="search">
|
<form id="search" class="navbar-form navbar-right" role="search">
|
||||||
@ -99,6 +99,10 @@
|
|||||||
<h1>
|
<h1>
|
||||||
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
|
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
|
||||||
<span id="currenttrack"></span>
|
<span id="currenttrack"></span>
|
||||||
|
<span id="love" style="margin: auto;">
|
||||||
|
<button id="btnlove" type="button" class="btn btn-default" onclick="clickLove();">
|
||||||
|
<span class="glyphicon glyphicon-heart" style="color: red;"></span>
|
||||||
|
</button></span>
|
||||||
</h1>
|
</h1>
|
||||||
<h4>
|
<h4>
|
||||||
<span id="artist" class="text"></span>
|
<span id="artist" class="text"></span>
|
||||||
@ -127,8 +131,7 @@
|
|||||||
<th>Album</th>
|
<th>Album</th>
|
||||||
<th>Title</th>
|
<th>Title</th>
|
||||||
<th>Length</th>
|
<th>Length</th>
|
||||||
<th></th>
|
<th><div style="width: 15px;"></div></th>
|
||||||
<th> </th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
Loading…
Reference in New Issue
Block a user