new screenshots with cover art, better popups, playlists active marker

README.rst

@@ -2,7 +2,7 @@
 Mopidy Browser Client
 *********************
 
-This is a responsive html/js/css client for Mopidy. Responsive, so it works on desktop and mobile browsers.
+This is a responsive html/js/css client for Mopidy. Responsive, so it works on desktop and mobile browsers. You can browse, search and play albums, artists, playlists, and it has cover art from Last.fm.
 
 `Mopidy <http://www.mopidy.com/>`_ is a music server which can play music from `Spotify <http://www.spotify.com/>`_ or from your local hard drive. 
 

webclient/css/ws.css

@@ -36,18 +36,27 @@
         clear: left;
     }
     .srch-breakpoint.ui-grid-a .ui-block-b {
-        margin-left: 5px;
+        margin-left: .5em;
     }
     .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
-        width: 49.5%;
+        width: 49%;
     }
     #playlisttablediv {
         margin-left: 10px;
     }
+    #btcontrols {
+        display: none;
+    }
 }
 
 /* tablet etc */
-@media all and (max-width: 50em) and (min-width: 30.1em) {
+@media all and (max-width: 49.9em) and (min-width: 30.1em) {
+    .srch-breakpoint.ui-grid-a .ui-block-b {
+        margin-left: .2em;
+    }
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 49.5%;
+    }
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 39.95%;
     }
@@ -61,6 +70,9 @@
 
 /* phone */
 @media all and (max-width: 30em) {
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 100%;
+    }
     .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
         width: 100%;
     }
@@ -74,6 +86,10 @@
     .header-breakpoint.ui-grid-b .ui-block-b {
         display: none;
     }
+    #btcontrols {
+        display: block;
+    }
+        
 }
 
 /************************
@@ -265,7 +281,7 @@ a {
     font-style: oblique;
 }
 
-#controlsmodal {
+#controlsmodal, #artistpopup, #coverpopup {
     max-width: 500px;
     min-width: 300px;
 }
@@ -292,5 +308,9 @@ a {
 #buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage {
     display: block;
     margin-left: auto;
-    margin-right: auto 
+    margin-right: auto;
+    margin-bottom: 5px;
 }
+.playlistactive {
+    background-color: #ccc;
+}

webclient/index.html

@@ -101,11 +101,12 @@
                     <span id="btprev"><a href="#" onclick="doPrevious(); return false"><img id="previmg" src="images/icons/first_24x24.png" alt="Previous Track" /></a></span>
                     <span id="btplay"><a href="#" onclick="doPlay(); return false"><img src="images/icons/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_24x24.png" alt="Next Track" /></a></span>
-                    <span id="btcontrols"><a href="#controlsmodal" data-rel="popup"><img src="images/icons/new_window_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
+                    <span id="btcontrols"><a href="#controlsmodal" data-position-to="window" data-rel="popup"><img src="images/icons/new_window_24x24.png" id="controlsimg" alt="More controls" class="breakafter" /></a></span>
                 </div>
 
                 <div id="songinfo" class=" ui-block-b">
-                    <a href="#controlsmodal" data-rel="popup"> <img id="infocover" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a>
+                    <a href="#controlsmodal" data-position-to="window" data-rel="popup"> 
+                        <img id="infocover" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a>
                 </div>
 
                 <div id="slidercontainer" class="ui-block-c">
@@ -135,7 +136,7 @@
             </div>
 
             <div data-role="content" class="pane" id="albumspane">
-                <a href="#coverpopup" data-rel="popup"><img height="90" src="" id="albumviewcover" /></a>
+                <a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" /></a>
                 <h3 id="h_albumname"></h3>
                 <h5 id="h_albumartist"></h5>
                 <ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul>
@@ -144,7 +145,7 @@
 
             <div data-role="content" class="pane" id="artistspane">
                 <!--                            <h4>Artist</h4> -->
-                <a href="#artistpopup" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
+                <a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
                 <h3 id="h_artistname"></h3>
                 <ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul>
                 <img src="images/loader.gif" id="artistsloader" class="loader" />

webclient/js/gui.js

@@ -43,7 +43,7 @@ function resizeSonginfo() {
         });
         $("#infoartist").html('<a href="#controlsmodal" data-rel="popup">' + $("#infoartist").html() + '</a>');
     } else {
-        $("#infoartist").html(artistshtml);
+        $("#infoartist").html(artiststext);
     }
 }
 

webclient/js/library.js

@@ -110,7 +110,6 @@ function getCurrentPlaylist() {
 function showTracklist(uri) {
     $(PLAYLIST_TABLE).empty();
     $('#playlisttablediv').show();
-    //    $('#playlistloader').show();
     showLoading(true);
 
     var pl = getPlaylistFromUri(uri);
@@ -118,6 +117,14 @@ function showTracklist(uri) {
     if (pl) {
         playlisttotable(pl.tracks, PLAYLIST_TABLE, uri);
     }
+
+    $('#playlistslist li a').each(function() {
+        $(this).removeClass("playlistactive");
+        if (this.id == uri) {
+            $(this).addClass('playlistactive');
+        }
+    });
+
     scrollToTracklist();
     //lookup recent tracklist
     mopidy.playlists.lookup(uri).then(processGetTracklist, console.error);