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

41
webclient/index.html
View File

@ -32,30 +32,25 @@
<body> <body>
<div data-role="page" data-theme="c" id="page"> <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> <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<h5 id="modalname"></h5> <h3 id="modalname"></h3>
<div id="modalartist"></div> <h4 id="modalartist"></h4>
<br/> <h4 id="modalalbum"></h4>
<div id="modalalbum"></div> <p class="">
<div class=""> <a href="#" onclick="doRandom(); return false"><img src="images/icons/loop_alt2_16x14.png" alt="" id="randombt" /></a>
<p><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> &nbsp; <a href="#" onclick="doRepeat(); return false"><img src="images/icons/reload_12x14.png" id="repeatbt" alt="" /></a>
<br/> <div>
<br/> <a href="#" onclick="doMute(); return false;"><img id="mutebt" src="images/icons/volume_16x12.png" alt="" /></a>
<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>
<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);" />
<input id="volumeslider" name="volumeslider" data-mini="true" type="range" min="0" value="0" max="100" onchange="doVolume(this.value);" class="nobreak" /> </div>
</p> </p>
</div>
<div class="">
<a href="#" class="" >Close</a>
</div>
</div> </div>
<div data-role="popup" data-transition="pop" id="popupTracks"> <div data-role="popup" data-transition="pop" id="popupTracks">
<div data-role="collapsible-set"> <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"> <!-- <li data-role="divider">
Track Track
</li> --> </li> -->
@ -82,11 +77,11 @@
<div data-role="header" class="ui-grid-b header-breakpoint"> <div data-role="header" class="ui-grid-b header-breakpoint">
<div id="controldiv" class="ui-block-a"> <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="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 src="images/icons/first_16x16.png" alt="Previous Track" /></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="btplaypause"><a href="#" onclick="doPlayPause(); return false"><img src="images/icons/pause_18x24.png" alt="Play" id="playbt" /></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 src="images/icons/last_16x16.png" alt="Next Track" /></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" alt="More controls" class="breakafter" /></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>
<div id="songinfo" class=" ui-block-b" onclick="expandSonginfo();"> <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 */ /* Toggle state of play button */
function setPlayState(nwplay) { function setPlayState(nwplay) {
if (nwplay) { if (nwplay) {
$("#playbt").attr('src', 'images/icons/pause_32x32.png'); $("#playimg").attr('src', 'images/icons/pause_32x32.png');
} else { } else {
$("#playbt").attr('src', 'images/icons/play_alt_32x32.png'); $("#playimg").attr('src', 'images/icons/play_alt_32x32.png');
} }
play = nwplay; play = nwplay;
} }
//play or pause //play or pause
function doPlayPause() { function doPlay() {
if (!play) { if (!play) {
mopidy.playback.play().then(); mopidy.playback.play().then();
} else { } else {

6
webclient/js/gui.js
View File

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