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

nicer design of controls

Browse Source
This commit is contained in:
Wouter van Wijk 2013-02-11 10:21:03 +01:00
parent df64ded11c
commit 264cde5e07
4 changed files with 51 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webclient/css/ws.css
View File

@ -41,8 +41,18 @@
float: none;
}
}
/* Volume Slider */
#mutebt {
float: left;
margin-left: 8px;
margin-top: 8px;
}
/* Slider */
#volumeslider {
display: inline;
}
/* Track Slider */
#trackslider {
display: inline;
@ -68,28 +78,33 @@
}
/* Controls */
#controldiv {
height: 30px;
width: 175px;
margin-left: 10px;
width: 180px;
margin-left: 2px;
display: inline;
}
#controldiv img {
margin-left: 5px;
margin-left: 10px;
float: left;
}
#previmg {
margin-top: -100px;
#playimg {
margin-top: 12px;
}
#btplaypause a img {
margin-top: 5px;
#nextimg, #previmg {
margin-top: 20px;
}
#btback {
margin-right: 5px;
#backimg {
margin-top: 16px;
margin-right: 2px;
}
#controlsimg {
margin-top: 16px;
}
/* Song information */
@ -161,12 +176,7 @@ body {
padding-left: 10px;
}
#modalartist {
color: #444;
font-size: 14px;
}
#modalartist a {
#modalalbum a, #modalartist a {
color: #444;
text-decoration: none;
}

41
webclient/index.html
View File

@ -32,30 +32,25 @@
<body>
<div data-role="page" data-theme="c" id="page">
<div id="controlsmodal" data-role="popup">
<div id="controlsmodal" data-role="popup" style="min-width:250px;">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<h5 id="modalname"></h5>
<div id="modalartist"></div>
<br/>
<div id="modalalbum"></div>
<div class="">
<p><a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
<h3 id="modalname"></h3>
<h4 id="modalartist"></h4>
<h4 id="modalalbum"></h4>
<p class="">
<a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
&nbsp; <a href="#" onclick="doRepeat(); return false"><img src="images/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
<br/>
<br/>
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
<label for="volumeslider" class="ui-hidden-accessible">Volume</label>
<input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" class="nobreak" />
</p>
</div>
<div class="">
<a href="#" class="" >Close</a>
</div>
<div>
<a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
<label for="volumeslider" class="ui-hidden-accessible">Volume</label>
<input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" />
</div>
</p>
</div>
<div data-role="popup" data-transition="pop" id="popupTracks">
<div data-role="collapsible-set">
<ul data-role="listview" data-inset="true" data-icon="false" id="popupTracksLv" style="min-width:210px;">
<ul data-role="listview" data-icon="false" id="popupTracksLv">
<!-- <li data-role="divider">
Track
</li> -->
@ -82,11 +77,11 @@
<div data-role="header" class="ui-grid-b header-breakpoint">
<div id="controldiv" class="ui-block-a">
<span id="btback"><a href="#" onclick="return backbt();"> <img src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
<span id="btprev"><a href="#" onclick="doPrevious(); return false"><img src="images/icons/first_16x16.png" alt="Previous Track" /></a></span>
<span id="btplaypause"><a href="#" onclick="doPlayPause(); return false"><img src="images/icons/pause_18x24.png" alt="Play" id="playbt" /></a></span>
<span id="btnext"><a href="#" onclick="doNext(); return false"><img src="images/icons/last_16x16.png" alt="Next Track" /></a></span>
<span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/cog_24x24.png" alt="More controls" class="breakafter" /></a></span>
<span id="btback"><a href="#" onclick="return backbt();"> <img id="backimg"src="images/icons/arrow_left_alt1_24x24.png" /></a></span>
<span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_16x16.png" alt="Previous Track" /></a></span>
<span id="btplay"><a href="#" onclick="doPlay(); return false"><img src="pause_32x32.png" alt="Play" id="playimg" /></a></span>
<span id="btnext"><a href="#" onclick="doNext(); return false"><img id="nextimg" src="images/icons/last_16x16.png" alt="Next Track" /></a></span>
<span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/cog_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
</div>
<div id="songinfo" class=" ui-block-b" onclick="expandSonginfo();">

6
webclient/js/controls.js vendored
View File

@ -41,15 +41,15 @@ function playTrack() {
/* Toggle state of play button */
function setPlayState(nwplay) {
if (nwplay) {
$("#playbt").attr('src', 'images/icons/pause_32x32.png');
$("#playimg").attr('src', 'images/icons/pause_32x32.png');
} else {
$("#playbt").attr('src', 'images/icons/play_alt_32x32.png');
$("#playimg").attr('src', 'images/icons/play_alt_32x32.png');
}
play = nwplay;
}
//play or pause
function doPlayPause() {
function doPlay() {
if (!play) {
mopidy.playback.play().then();
} else {

6
webclient/js/gui.js
View File

@ -278,7 +278,7 @@ $(document).bind("pageinit", function() {
}
break;
}
showLoading(false);
// Set the page title based on the hash.
//document.title = PROGRAM_NAME;
$('.pane').hide();
@ -306,12 +306,12 @@ $(document).bind("pageinit", function() {
}
//only show backbutton if in UIWebview
if (window.navigator.standalone) {
/* if (window.navigator.standalone) {
$("#btback").show();
} else {
$("#btback").hide();
}
*/
// $("#songinfo").resize(resizeSonginfo());
initgui = false;