lists updated, better style, better responsive

webclient/css/jquery.mobile-1.3.0-rc.1.css

@@ -2496,7 +2496,7 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
 .ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
 .ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
 .ui-li-static { background-image: none; }
-.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
+.ui-li-divider { padding: 1em 10px; font-size: 14px; font-weight: bold; }
 ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
 ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
 .ui-listview > .ui-li.ui-first-child,
@@ -2532,7 +2532,7 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
 	border-bottom-left-radius: inherit;	
 }
 .ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
-.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .4em 10px; display: block; }
+.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .6em 15px; display: block; }
 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb  { min-height: 59px; padding-left: 100px; }
 .ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
 .ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }

webclient/css/ws.css

@@ -13,7 +13,18 @@
  *    portr 48
  ****************************/
 
-@media all and (min-width: 50.1em) {
+@media all and (min-width: 40.1em) {
+    /*header*/
+    .header-breakpoint.ui-grid-b .ui-block-a {
+        width: 30%;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
+        width: 30%;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 30.1%;
+    }
+    /*playlists*/
     .pl-breakpoint.ui-grid-a .ui-block-a {
         width: 32.95%;
     }
@@ -23,122 +34,86 @@
     .pl-breakpoint.ui-grid-a .ui-block-a {
         clear: left;
     }
-    .header-breakpoint.ui-grid-b .ui-block-a {
-        width: 21%;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-b {
-        width: 37%;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 35.1%;
-    }
     .pl-breakpoint.ui-grid-a .ui-block-a {
         clear: left;
     }
+    #playlisttablediv {
+        margin-left: 10px;
+    }
+    /*search*/
     .srch-breakpoint.ui-grid-a .ui-block-b {
         margin-left: .5em;
     }
     .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
         width: 49%;
     }
-    #playlisttablediv {
+    /*controls*/
-        margin-left: 10px;
-    }
     #btcontrols {
         display: none;
     }
 }
 
 /* tablet etc */
-@media all and (max-width: 49.9em) and (min-width: 30.1em) {
+@media all and (min-width: 30.1em) and (max-width: 40em) {
+    /*header*/
+    .header-breakpoint.ui-grid-b .ui-block-a {
+        width: 45.95%;
+        clear: left;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-b {
+        display: none;
+        width: 0;
+    }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 40%;
+    }
+    /*search*/
     .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%;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 50%;
-    }
-    .header-breakpoint.ui-grid-b .ui-block-b {
-        display: none;
-    }
 }
 
 /* phone */
 @media all and (max-width: 30em) {
-    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+    /*header*/
-        width: 100%;
-    }
-    .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
-        width: 100%;
-    }
     .header-breakpoint.ui-grid-b .ui-block-a {
         width: 35%;
         clear: left;
     }
-    .header-breakpoint.ui-grid-b .ui-block-c {
-        width: 40%;
-    }
     .header-breakpoint.ui-grid-b .ui-block-b {
         display: none;
     }
+    .header-breakpoint.ui-grid-b .ui-block-c {
+        width: 35%;
+    }
+    /*playlists*/
+    .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
+        width: 100%;
+    }
+    /*search*/
+    .srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b {
+        width: 100%;
+    }
+    /*controls*/
     #btcontrols {
         display: block;
     }
         
 }
 
-/************************
+/***********
- *  Volume Slider
+ * Header & controls
- ***********************/
+ */
-#mutebt {
+#header {
-    float: left;
+    height: 50px !important;
-    margin-left: 8px;
-    margin-top: 8px;
 }
 
-#volumeslider {
-    display: inline;
-}
-
-/***********************
- *  Track Slider
- ***********************/
-
-#trackslider {
-    display: inline;
-    width: 100%;
-}
-
-#slidercontainer {
-    margin-top: 7px;
-    margin-bottom: 5px;
-}
-
-.ui-slider-track {
-    margin-left: 38px;
-    margin-right: 35px;
-}
-
-.ui-mobile .ui-page .ui-slider-input, .ui-mobile .ui-dialog .ui-slider-input {
-    display: none !important;
-}
-
-#songelapsed, #songlength {
-    font-size: 10px;
-    margin-top: 12px;
-}
-
-/***********************************
- * Controls
- * *********************************/
 #controldiv {
     height: 30px;
-    width: 230px;
+    width: 245px;
     margin-top: -3px;
     margin-left: -5px;
     display: inline;
@@ -165,7 +140,9 @@
     margin-top: 16px;
 }
 
-/* Song information */
+/**********************
+ *  Song information 
+ **********************/
 
 #infoname {
     overflow: hidden;
@@ -189,7 +166,167 @@
     margin: 2px;
 }
 
-/* div */
+#songinfo a {
+    text-decoration: none;
+}
+
+#infoartist a {
+    color: #eee;
+}
+
+#infocover {
+    float: left;
+    width: 36px;
+    heigth: 36px;
+    margin-right: 5px;
+    /*    border: 1px solid #666; */
+    margin-top: -3px;
+}
+
+/***********************
+ *  Track Slider
+ ***********************/
+
+#trackslider {
+    display: inline;
+    width: 100%;
+}
+
+#slidercontainer {
+    margin-top: 7px;
+    margin-bottom: 5px;
+    margin-right: 10px; 
+    float: right;
+}
+
+.ui-slider-track {
+    margin-left: 38px;
+    margin-right: 35px;
+}
+
+.ui-mobile .ui-page .ui-slider-input, .ui-mobile .ui-dialog .ui-slider-input {
+    display: none !important;
+}
+
+#songelapsed, #songlength {
+    font-size: 10px;
+    margin-top: 12px;
+}
+
+/************************
+ *  Volume Slider
+ ***********************/
+#mutebt {
+    float: left;
+    margin-left: 8px;
+    margin-top: 8px;
+}
+
+#volumeslider {
+    display: inline;
+}
+
+/***********
+ * pages, content
+ */
+
+#searchresults {
+    display: none;
+}
+
+#currentpane, #searchpane, #albumspane, #artistspane {
+    display: none;
+}
+
+#artistviewimage, #albumviewcover {
+    float: right;
+    heigth: 90px;
+}
+
+
+/*********************
+ * listviews
+ ********************/
+.ui-li-divider {
+    padding: 2px;
+    padding-top: 10px;
+    padding-left: 5px;
+}
+
+.ui-li-divider a {
+    height: 30px !important;
+}
+
+.ui-li-divider a p {
+    color: #555 !important;
+    font-size: 100% !important;
+}
+
+.albumli {
+  padding-left: 5px;
+} 
+
+.playlistactive {
+    background-color: #ccc;
+}
+
+.smalldivider {
+    heigth: 5px !important;
+}
+
+.artistcover {
+    float: right;
+    width: 30px;
+    heigth: 30px;
+    margin-right: 3px;
+}
+
+.currenttrack {
+    background-image: url('../images/icons/play_alt_16x16.png');
+    background-repeat: no-repeat;
+    background-color: #eee;
+    background-position: 4px center;
+}
+
+.currenttrack a {
+    margin-left: 14px;
+}
+
+
+/*******************
+ * Popups
+ *******************/
+#modalalbum a, #modalartist a {
+    color: #444;
+    text-decoration: none;
+}
+
+#popupTrackName, #popupAlbumName, .popupArtistName {
+    font-style: oblique;
+}
+
+#controlsmodal, #artistpopup, #coverpopup {
+    max-width: 500px;
+    min-width: 300px;
+}
+
+#h_artistname {
+    margin-bottom: 65px;
+    margin-top: 10px;
+}
+#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 5px;
+}
+
+/***************
+ *  common use 
+ ***************/
+a {
+    text-decoration: none !important;
+}
 
 .nobreak, .btsquare {
     display: inline !important;
@@ -207,110 +344,12 @@
     display: none;
 }
 
-#searchresults {
-    display: none;
-}
-
 .breakafter {
     margin-right: 15px;
 }
 
-#currentpane, #searchpane, #albumspane, #artistspane {
-    display: none;
-}
-
-.currenttrack {
-    background-image: url('../images/icons/play_alt_16x16.png');
-    background-repeat: no-repeat;
-    background-color: #eee;
-    background-position: 4px center;
-}
-
-.currenttrack a {
-    margin-left: 14px;
-}
-
-#modalalbum a, #modalartist a {
-    color: #444;
-    text-decoration: none;
-}
-
-#songinfo a {
-    text-decoration: none;
-}
-
-#infoartist a {
-    color: #eee;
-}
-
-a {
-    text-decoration: none !important;
-}
-
-.ui-li-divider {
-    height: 37px;
-}
-
-.ui-li-divider a p {
-    color: #555 !important;
-    font-size: 120% !important;
-}
-
-#artistviewimage, #albumviewcover {
-    float: right;
-    heigth: 90px;
-}
-
-#infocover {
-    float: left;
-    width: 36px;
-    heigth: 36px;
-    margin-right: 5px;
-    /*    border: 1px solid #666; */
-    margin-top: -3px;
-}
-
-.artistcover {
-    float: right;
-    width: 40px;
-    heigth: 40px;
-    margin-right: 3px;
-}
-
-#popupTrackName, #popupAlbumName, .popupArtistName {
-    font-style: oblique;
-}
-
-#controlsmodal, #artistpopup, #coverpopup {
-    max-width: 500px;
-    min-width: 300px;
-}
-
 .pright {
     display: inline;
     margin-top: 4px;
     float: right;
 }
-
-.artistname {
-    font: bold;
-}
-
-#h_artistname {
-    margin-bottom: 65px;
-    margin-top: 10px;
-}
-
-#header {
-    height: 50px !important;
-}
-
-#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 5px;
-}
-.playlistactive {
-    background-color: #ccc;
-}

webclient/index.html

@@ -174,10 +174,10 @@
                     </div>
                     <!-- grid a -->
 
-                    <div class="" style="text-align: center" id="expandsearch">
+<!--                    <div class="" style="text-align: center" id="expandsearch">
                         <a href="#" onclick="toggleSearch(); return false;"><img src="images/icons/arrow_down_16x16.png"></a>
                     </div>
-                    <div class="" id="searchtracks">
+-->                    <div class="" id="searchtracks">
                         <h4>Tracks</h4>
                         <ul id="trackresulttable" data-icon="false" data-inset="true" data-role="listview"></ul>
                     </div>

webclient/js/controls.js

@@ -74,12 +74,7 @@ function doPlay() {
 }
 
 function doPrevious() {
-    // if position > 2 seconds -> go to begin, else go to previous track
+    mopidy.playback.previous();
-    if (currentposition > 2000) {
-        doSeekPos(0);
-    } else {
-        mopidy.playback.previous();
-    }
 }
 
 function doNext() {

webclient/js/functionsvars.js

@@ -122,17 +122,31 @@ function albumTracksToTable(pl, table, uri) {
 }
 
 function resultsToTables(results, target, uri) {
+    var newalbum = [];
+    var nexturi = '';
+    var count = 0;
+    //check if there are too many different albums in the list
+    /*    for (var i = 1; i < results.length; i++) {
+     if (results[i].album.uri != results[i - 1].album.uri)
+     count++;
+     }
+     console.log(count);
+     //don't do the fancy rendering if there are more than X albums in the list
+     if (count > 8) {
+     playlisttotable(results, target, uri);
+     return;
+     }
+     */
+    newalbum = [];
     $(target).html('');
 
     //break into albums and put in tables
-    var newalbum = [];
     var html = '';
-    var nexturi = '';
     var tableid, j, artistname, alburi;
     var targetmin = target.substr(1);
     $(target).attr('data', uri);
 
-    for (var i = 0; i < results.length; i++) {
+    for ( i = 0; i < results.length; i++) {
         newalbum.push(results[i]);
         nexturi = '';
         if (i < results.length - 1) {
@@ -140,29 +154,51 @@ function resultsToTables(results, target, uri) {
         }
         if (results[i].album.uri != nexturi) {
             tableid = 'art' + i;
-            html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">';
+            //render differently if only one track in the album
-            html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="40" height="40" />';
+            if (newalbum.length == 1) {
-            html += '<p class="artistname">' + results[i].album.name + '</p><p>';
+                html += '<li data-role="list-divider" data-theme="d" class="smalldivider"></li>';
-            for (j = 0; j < results[i].album.artists.length; j++) {
+                html += '<li id="' + targetmin + '-' + newalbum[0].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[0].uri + '\');">';
-                html += results[i].album.artists[j].name;
+                html += '<h1>' + newalbum[0].name + "</h1>";
-                html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
+                html += '<p>';
-                //stop after 3
+                html += '<span style="float: right;">' + timeFromSeconds(newalbum[0].length / 1000) + '</span>';
-                if (j > 2) {
+                for ( j = 0; j < newalbum[0].artists.length; j++) {
-                    child += '...';
+                    html += newalbum[0].artists[j].name;
-                    break;
+                    html += (j == newalbum[0].artists.length - 1) ? '' : ' / ';
+                    //stop after 3
+                    if (j > 2) {
+                        html += '...';
+                        break;
+                    }
                 }
+                html += ' / <em>' + newalbum[0].album.name + '</em></p>';
+                html += '</a></li>';
+                newalbum = [];
+
+            } else {
+                html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">';
+                html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" />';
+                html += '<p>' + results[i].album.name + '</p><p>';
+                for ( j = 0; j < results[i].album.artists.length; j++) {
+                    html += results[i].album.artists[j].name;
+                    html += (j == results[i].album.artists.length - 1) ? '' : ' / ';
+                    //stop after 3
+                    if (j > 2) {
+                        child += '...';
+                        break;
+                    }
+                }
+                html += '</p></a></li>';
+                //            html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
+                for ( j = 0; j < newalbum.length; j++) {
+                    popupData[newalbum[j].uri] = newalbum[j];
+                    html += '<li class="albumli" id="' + targetmin + '-' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
+                    html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';
+                };
+                artistname = results[i].artists[0].name;
+                getCover(artistname, results[i].album.name, target + '-cover-' + i, 'small');
+                //            customTracklists[results[i].album.uri] = newalbum;
+                newalbum = [];
             }
-            html += '</p></a></li>';
-            //            html += '<ul data-role="listview" data-inset="true" data-icon="false" class="" id="' + tableid + '"></ul>';
-            for (j = 0; j < newalbum.length; j++) {
-                popupData[newalbum[j].uri] = newalbum[j];
-                html += '<li id="' + newalbum[j].uri + '"><a href="#" onclick="return popupTracks(event, \'' + uri + '\',\'' + newalbum[j].uri + '\');">';
-                html += '<p class="pright">' + timeFromSeconds(newalbum[j].length / 1000) + '</p><h1>' + newalbum[j].name + '</h1></a></li>';
-            };
-            artistname = results[i].artists[0].name;
-            getCover(artistname, results[i].album.name, target + '-cover-' + i, 'small');
-            //            customTracklists[results[i].album.uri] = newalbum;
-            newalbum = [];
         }
     }
     tableid = "#" + tableid;

webclient/js/gui.js

@@ -25,10 +25,10 @@ function expandSonginfo() {
 
 function resizeSonginfo() {
     $("#infoname").html(songname);
-    if ((artiststext.length > 90) || (songname.length > 50)) {
+    if ((artiststext.length > 83) || (songname.length > 43)) {
         $("#infoartist").html(artiststext);
         //bug in truncate?
-        var spanwidth = $("#infoartist").width() - 1;
+        var spanwidth = $("#infoartist").width() - 38;
         $("#infoname").truncate({
             width : spanwidth,
             token : '…',
@@ -52,7 +52,7 @@ function setSongInfo(data) {
     artiststext = '';
     songname = data.name;
     if (songname == '') {
-        return
+        return;
     };
 
     for (var j = 0; j < data.artists.length; j++) {
@@ -85,7 +85,7 @@ function setSongInfo(data) {
     resizeSonginfo();
     $('#currenttable li').each(function() {
         $(this).removeClass("currenttrack");
-        if (this.id == data.uri) {
+        if (this.id == 'currenttable-' + data.uri) {
             $(this).addClass('currenttrack');
         }
     });
@@ -208,7 +208,7 @@ function initSocketevents() {
     });
 
     mopidy.on("event:trackPlaybackPaused", function(data) {
-        setSongInfo(data.tl_track.track);
+        //setSongInfo(data.tl_track.track);
         pauseTimer();
         setPlayState(false);
     });

webclient/js/library.js

@@ -56,8 +56,9 @@ function processSearchResults(resultArr) {
     var child = '';
     for (var i = 0; i < artists.length; i++) {
         child += '<li class="resultrow';
-        if (i > 4) {
+        if (i > 9) {
-            child += " hidden";
+            break;
+            //child += " hidden";
         }
         child += '"><a href="#" onclick="return showArtist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></li>";
     }
@@ -68,8 +69,9 @@ function processSearchResults(resultArr) {
 
     for (var i = 0; i < albums.length; i++) {
         child += '<li class="resultrow';
-        if (i > 4) {
+        if (i > 9) {
-            child += " hidden";
+            break;
+            //child += " hidden";
         }
         child += '"><a href="#" onclick="return showAlbum(this.id)" id="' + albums[i].uri + '">';
         child += "<h1>" + albums[i].name + "</h1><p>";