andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove pause/play images in favor of standardising on fontawesome icons.

Browse Source 
Ensure proper alignment of 'normalFooter' and 'nowPlayingFooter' when switching layouts.
This commit is contained in:
jcass 2016-01-24 18:29:02 +02:00
parent 01b4bce7d9
commit d1fbeef5ea
8 changed files with 62 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
mopidy_musicbox_webclient/static/css/webclient.css
View File

@ -121,12 +121,6 @@
}
/**headers and controls**/
#playimg {
margin-top: 2px;
}
#nextimg, #previmg, #backimg, #controlsimg {
margin-top: 6px;
}
@ -339,24 +333,30 @@
/*******************
* Now Playing area
*******************/
.nowPlayingControls {
font-size: 25px;
#nowPlayingFooter{
height: 50px;
line-height: 48px;
padding-left: 10px;
text-align: center;
}
.footerControls {
height: 100%;
font-size: 25px;
padding-right: 10px;
}
.nowPlayingControls span span {
.footerControls div span {
padding-left: 3px;
padding-right: 3px;
height=100%;
vertical-align: middle;
}
.nowPlayingControls #btplayNowPlaying {
font-size: 190%;
margin-left: 15px;
margin-right: 15px;
.footerControls #btplayNowPlaying {
font-size: 42px;
margin-left: 10px;
margin-right: 10px;
}
@ -398,10 +398,6 @@
margin-bottom: 15px;
}
#btplayNowPlaying {
padding-top: 15px;
}
#popupTracksLv li, #popupQueueLv li {
border-bottom: 1px solid #aaa;
}
@ -460,14 +456,14 @@ a {
.ui-footer{
border: 0px;
}
#normalFooter{
height: 48px;
}
#nowPlayingFooter{
height: 48px;
height: 50px;
line-height: 48px;
text-align: center;
color: white;
}
#infoname {
overflow: hidden;
white-space: nowrap;
@ -482,52 +478,35 @@ a {
}
#infocover {
height: 48px;
width: 48px;
height: 50px;
width: 50px;
position: absolute;
}
#btplay {
color: white;
}
.songinfo-text{
.songinfo {
height: 100%;
}
.songinfo-text {
text-align: left;
line-height: 22px;
display:inline-block;
padding: 6px;
color: white;
position: absolute;
padding-left: 50px;
padding-right: 50px;
padding-left: 55px;
padding-right: 55px;
}
.playPausebtn{
padding-right: 10px;
position: absolute;
right: 0px;
}
#controldiv{
background: none repeat scroll 0% 0% rgb(44, 62, 80);
height: 48px;
padding: 8px 8px 8px 8px;
}
#controldiv img {
margin-left: auto;
margin-right: auto;
display: block;
}
#nowPlayingpane{
text-align: center;
}
.footer {
position: fixed;
z-index: 1000;
bottom: 0;
width: 100%;
}
/*helper*/
.hidden{
@ -597,7 +576,8 @@ a {
.nowPlayingControls{
font-size: 1.3em;
line-height: 50px;
height: 50px;
line-height: 48px;
}
}

BIN
mopidy_musicbox_webclient/static/images/icons/pause_32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 179 B

BIN
mopidy_musicbox_webclient/static/images/icons/play_alt_12x12.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 275 B

BIN
mopidy_musicbox_webclient/static/images/icons/play_alt_16x16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 B

BIN
mopidy_musicbox_webclient/static/images/icons/play_alt_32x32.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 461 B

49
mopidy_musicbox_webclient/static/index.html
View File

@ -439,35 +439,34 @@
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div id="songinfo" class="">
<a href="#"><img id="infocover" src="images/default_cover.png" width="36" height="36"/></a>
<div class="songinfo-text">
<div id="infoname"></div>
<div id="infoartist"></div>
<div class="footerControls">
<div id="songinfo" style="float: left">
<a href="#"><div><img id="infocover" src="images/default_cover.png"/></div></a>
<div class="songinfo-text">
<div id="infoname"></div>
<div id="infoartist"></div>
</div>
</div>
<div style="float: right;">
<a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
</div>
</div>
<div id="controldiv" class="playPausebtn">
<a href="#" onclick="doPlay(); return false"><span id="btplay"><img src="images/icons/pause_32x32.png"
alt="Play" id="playimg" title="Play"/></span></a>
</div>
</div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
<div class="nowPlayingControls">
<span style="float: left;">
<a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
<a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
<a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
</span>
<span style="float: right; margin-right: 10px;">
<a href="#" onclick="doRandom(); return false"><span id="randombt" title="Random"><i class="fa fa-random"></i></span></a>
<a href="#" onclick="doRepeat(); return false"><span id="repeatbt" title="Repeat"><i class="fa fa-repeat"></i></span></a>
<a href="#" onclick="doConsume(); return false"><span id="consumebt" title="Consume"><i class="fa fa-cutlery"></i></span></a>
<a href="#" onclick="doSingle(); return false"><span id="singlebt" title="Single"><i class="fa fa-dot-circle-o"></i></span></a>
<a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
</span>
</div>
<div class="footerControls" style="padding-left: 10px;">
<div style="float: left;">
<a href="#" onclick="doPrevious(); return false"><span id="btprev" title="Previous"><i class="fa fa-fast-backward"></i></span></a>
<a href="#" onclick="doPlay(); return false"><span id="btplayNowPlaying" title="Play"><i class="fa fa-play"></i></span></a>
<a href="#" onclick="doNext(); return false"><span id="btnext" title="Next"><i class="fa fa-fast-forward"></i></span></a>
</div>
<div style="float: right; margin-right: 10px;">
<a href="#" onclick="doRandom(); return false"><span id="randombt" title="Random"><i class="fa fa-random"></i></span></a>
<a href="#" onclick="doRepeat(); return false"><span id="repeatbt" title="Repeat"><i class="fa fa-repeat"></i></span></a>
<a href="#" onclick="doConsume(); return false"><span id="consumebt" title="Consume"><i class="fa fa-cutlery"></i></span></a>
<a href="#" onclick="doSingle(); return false"><span id="singlebt" title="Single"><i class="fa fa-dot-circle-o"></i></span></a>
<a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
</div>
</div>
</div>
<!-- /footer -->

8
mopidy_musicbox_webclient/static/js/controls.js vendored
View File

@ -260,15 +260,15 @@ function doShuffle() {
/* Toggle state of play button */
function setPlayState(nwplay) {
if (nwplay) {
$("#playimg").attr('src', 'images/icons/pause_32x32.png');
$("#playimg").attr('title', 'Pause');
$("#btplayNowPlaying >i").removeClass('fa-play').addClass('fa-pause');
$("#btplayNowPlaying").attr('title', 'Pause');
$("#btplay >i").removeClass('fa-play').addClass('fa-pause');
$("#btplay").attr('title', 'Pause');
} else {
$("#playimg").attr('src', 'images/icons/play_alt_32x32.png');
$("#playimg").attr('title', 'Play');
$("#btplayNowPlaying >i").removeClass('fa-pause').addClass('fa-play');
$("#btplayNowPlaying").attr('title', 'Play');
$("#btplay >i").removeClass('fa-pause').addClass('fa-play');
$("#btplay").attr('title', 'Play');
}
play = nwplay;
}

4
mopidy_musicbox_webclient/static/mb.manifest
View File

@ -41,10 +41,6 @@ images/icons/musicbox32.png
images/icons/musicbox57.png
images/icons/musicbox72.png
images/icons/musicbox114.png
images/icons/pause_32x32.png
images/icons/play_alt_12x12.png
images/icons/play_alt_16x16.png
images/icons/play_alt_32x32.png
images/default_cover.png
images/empty.png