From 264cde5e0772581f99ee8f3b7366b578ee660c93 Mon Sep 17 00:00:00 2001 From: Wouter van Wijk Date: Mon, 11 Feb 2013 10:21:03 +0100 Subject: [PATCH] nicer design of controls --- webclient/css/ws.css | 44 ++++++++++++++++++++++++---------------- webclient/index.html | 41 ++++++++++++++++--------------------- webclient/js/controls.js | 6 +++--- webclient/js/gui.js | 6 +++--- 4 files changed, 51 insertions(+), 46 deletions(-) diff --git a/webclient/css/ws.css b/webclient/css/ws.css index 2d14868..52c7883 100755 --- a/webclient/css/ws.css +++ b/webclient/css/ws.css @@ -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; } diff --git a/webclient/index.html b/webclient/index.html index b9591c4..5957e35 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -32,30 +32,25 @@
-
+
Close -
-
-
-
-
-

+

+

+

+

+   -
-
- - - -

-
-
- Close -
+
+ + + +
+

-
    +
      @@ -82,11 +77,11 @@
      - - Previous Track - Play - Next Track - More controls + + Previous Track + Play + Next Track + More controls
      diff --git a/webclient/js/controls.js b/webclient/js/controls.js index 900e9df..9411c39 100644 --- a/webclient/js/controls.js +++ b/webclient/js/controls.js @@ -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 { diff --git a/webclient/js/gui.js b/webclient/js/gui.js index 10c6eca..5055bbb 100755 --- a/webclient/js/gui.js +++ b/webclient/js/gui.js @@ -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;