From ed0db217c929d02f5283f98b330cf6979fbf5458 Mon Sep 17 00:00:00 2001 From: Wouter van Wijk Date: Wed, 20 Feb 2013 10:19:07 +0100 Subject: [PATCH] lists updated, better style, better responsive --- webclient/css/jquery.mobile-1.3.0-rc.1.css | 4 +- webclient/css/ws.css | 391 +++++++++++---------- webclient/index.html | 4 +- webclient/js/controls.js | 7 +- webclient/js/functionsvars.js | 84 +++-- webclient/js/gui.js | 10 +- webclient/js/library.js | 10 +- 7 files changed, 291 insertions(+), 219 deletions(-) diff --git a/webclient/css/jquery.mobile-1.3.0-rc.1.css b/webclient/css/jquery.mobile-1.3.0-rc.1.css index bf083a3..104fa32 100644 --- a/webclient/css/jquery.mobile-1.3.0-rc.1.css +++ b/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; } diff --git a/webclient/css/ws.css b/webclient/css/ws.css index 88449f2..0bb6967 100755 --- a/webclient/css/ws.css +++ b/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 { - margin-left: 10px; - } + /*controls*/ #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 { - width: 100%; - } - .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b { - width: 100%; - } + /*header*/ .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 - ***********************/ -#mutebt { - float: left; - margin-left: 8px; - margin-top: 8px; +/*********** + * Header & controls + */ +#header { + height: 50px !important; } -#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; -} \ No newline at end of file diff --git a/webclient/index.html b/webclient/index.html index ec9d19f..31a0835 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -174,10 +174,10 @@ -
+

Tracks

    diff --git a/webclient/js/controls.js b/webclient/js/controls.js index 1ae495d..99fa89d 100644 --- a/webclient/js/controls.js +++ b/webclient/js/controls.js @@ -74,12 +74,7 @@ function doPlay() { } function doPrevious() { - // if position > 2 seconds -> go to begin, else go to previous track - if (currentposition > 2000) { - doSeekPos(0); - } else { - mopidy.playback.previous(); - } + mopidy.playback.previous(); } function doNext() { diff --git a/webclient/js/functionsvars.js b/webclient/js/functionsvars.js index c1c6bd1..36a1f0c 100755 --- a/webclient/js/functionsvars.js +++ b/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 += '
  • '; - html += ''; - html += '

    ' + results[i].album.name + '

    '; - 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; + //render differently if only one track in the album + if (newalbum.length == 1) { + html += '

  • '; + html += '
  • '; + html += '

    ' + newalbum[0].name + "

    "; + html += '

    '; + html += '' + timeFromSeconds(newalbum[0].length / 1000) + ''; + for ( j = 0; j < newalbum[0].artists.length; j++) { + html += newalbum[0].artists[j].name; + html += (j == newalbum[0].artists.length - 1) ? '' : ' / '; + //stop after 3 + if (j > 2) { + html += '...'; + break; + } } + html += ' / ' + newalbum[0].album.name + '

    '; + html += '
    • '; + newalbum = []; + + } else { + html += '
  • '; + html += ''; + html += '

    ' + results[i].album.name + '

    '; + 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 += '

    • '; + // html += ''; + for ( j = 0; j < newalbum.length; j++) { + popupData[newalbum[j].uri] = newalbum[j]; + html += '
  • '; + html += '

    ' + timeFromSeconds(newalbum[j].length / 1000) + '

    ' + newalbum[j].name + '

    • '; + }; + artistname = results[i].artists[0].name; + getCover(artistname, results[i].album.name, target + '-cover-' + i, 'small'); + // customTracklists[results[i].album.uri] = newalbum; + newalbum = []; } - html += '

    '; - // html += ''; - for (j = 0; j < newalbum.length; j++) { - popupData[newalbum[j].uri] = newalbum[j]; - html += '
  • '; - html += '

    ' + timeFromSeconds(newalbum[j].length / 1000) + '

    ' + newalbum[j].name + '

    • '; - }; - 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; diff --git a/webclient/js/gui.js b/webclient/js/gui.js index 2c8b540..2087fe0 100755 --- a/webclient/js/gui.js +++ b/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); }); diff --git a/webclient/js/library.js b/webclient/js/library.js index 2c384d1..6ef6e89 100644 --- a/webclient/js/library.js +++ b/webclient/js/library.js @@ -56,8 +56,9 @@ function processSearchResults(resultArr) { var child = ''; for (var i = 0; i < artists.length; i++) { child += '
  • 9) { + break; + //child += " hidden"; } child += '">' + artists[i].name + "
    • "; } @@ -68,8 +69,9 @@ function processSearchResults(resultArr) { for (var i = 0; i < albums.length; i++) { child += '
  • 9) { + break; + //child += " hidden"; } child += '">'; child += "

    " + albums[i].name + "

    ";