diff --git a/README b/README index 96a16c7..51e6a6f 100644 --- a/README +++ b/README @@ -20,6 +20,7 @@ External Subsonic Music Player 1/9/2012 .018 added media keyboard bindings from @itchy 1/18/2012 .019 rating support, random playlist, new preferences added 1/25/2012 .020 table layout for songs, bug fixes, display tweaks +2/22/2012 .021 added sidebar for chat and now playing, bug fixes TO DO: (In no particular order...) - Jukebox Control diff --git a/images/arrow_left_gl_12x12.png b/images/arrow_left_gl_12x12.png new file mode 100644 index 0000000..5619aab Binary files /dev/null and b/images/arrow_left_gl_12x12.png differ diff --git a/images/arrow_right_gl_12x12.png b/images/arrow_right_gl_12x12.png new file mode 100644 index 0000000..fae3d98 Binary files /dev/null and b/images/arrow_right_gl_12x12.png differ diff --git a/images/comment_stroke_gl_12x11.png b/images/comment_stroke_gl_12x11.png new file mode 100644 index 0000000..9bcac04 Binary files /dev/null and b/images/comment_stroke_gl_12x11.png differ diff --git a/index.html b/index.html index 30e7f8d..3888813 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@ $('#AutoAlbumContainer li').removeClass('selected'); $('#ArtistContainer li').removeClass('selected'); $(this).addClass('selected'); - getAlbums($(this).attr("id"), '#AlbumRows'); + getAlbums($(this).attr("id"), '', '#AlbumRows'); }); $('#BottomIndex li a').live('click', function () { var el = '#index_' + $(this).text(); @@ -116,13 +116,13 @@ $('tr.album a.play').live('click', function (e) { var albumid = $(this).parent().parent().attr('childid'); var artistid = $(this).parent().parent().attr('parentid'); - getSongs(albumid, artistid, 'autoplay', '#CurrentPlaylistContainer'); + getAlbums(albumid, 'autoplay', '#CurrentPlaylistContainer'); return false; }); $('tr.album a.add').live('click', function (e) { var albumid = $(this).parent().parent().attr('childid'); var artistid = $(this).parent().parent().attr('parentid'); - getSongs(albumid, artistid, 'add', '#CurrentPlaylistContainer'); + getAlbums(albumid, 'add', '#CurrentPlaylistContainer'); return false; }); $('tr.album a.rate').live('click', function (event) { @@ -138,7 +138,7 @@ $('tr.album').live('click', function (e) { var albumid = $(this).attr('childid'); var artistid = $(this).attr('parentid'); - getSongs(albumid, artistid, '', '#AlbumRows'); + getAlbums(albumid, '', '#AlbumRows'); return false; }); // Track - Click Events @@ -379,49 +379,37 @@ changeTrack(prev); return false; }); - $('a#Chat').click(function () { - var submenu = $('div#submenu_Chat'); - if (submenu.is(":visible")) { - submenu.fadeOut(); - updater.cancel(); - } else { - //loadChatMessages(); - updateChatMessages(); - $('div#submenu_NowPlaying').fadeOut(); - submenu.fadeIn(400); - } - $('input#ChatMsg').focus(); + $("a#coverartimage").fancybox({ + 'hideOnContentClick': true, + 'type': 'image' }); - $('#action_AddChatMsg').click(function () { - var msg = $('#ChatMsg').val(); - if (msg != '') { - addChatMessage(msg); + + // Side Bar Click Events + $('#action_ToggleSideBar').live('click', function () { + if ($.cookie('sidebar')) { + $.cookie('sidebar', null); + $('#SideBar').hide(); + stopUpdateChatMessages(); + stopUpdateNowPlaying(); + } else { + $.cookie('sidebar', true, { expires: 365 }); + $('#SideBar').show(); + updateChatMessages(); + updateNowPlaying(); } - $('#ChatMsg').val(""); + resizeContent(); return false; }); $('input#ChatMsg').keydown(function (e) { var unicode = e.charCode ? e.charCode : e.keyCode; if (unicode == 13) { - $('#action_AddChatMsg').click(); + var msg = $('#ChatMsg').val(); + if (msg != '') { + addChatMessage(msg); + } + $('#ChatMsg').val(""); } }); - $('a#NowPlaying').click(function () { - var submenu = $('div#submenu_NowPlaying'); - if (submenu.is(":visible")) { - submenu.fadeOut(); - updaterNowPlaying.cancel(); - } else { - //loadChatMessages(); - updateNowPlaying(); - $('div#submenu_Chat').fadeOut(); - submenu.fadeIn(400); - } - }); - $("a#coverartimage").fancybox({ - 'hideOnContentClick': true, - 'type': 'image' - }); // Preferences Click Events $('#SavePreferences').live('click', function () { @@ -433,6 +421,14 @@ var AutoPlaylistSize = $('#AutoPlaylistSize').val(); $.cookie('AutoAlbumSize', AutoAlbumSize, { expires: 365 }); $.cookie('AutoPlaylistSize', AutoPlaylistSize, { expires: 365 }); + var subdirectory = $('#SubDirectory').val(); + if (subdirectory != "") { + $.cookie('subdirectory', subdirectory, { expires: 365 }); + } + var applicationname = $('#ApplicationName').val(); + if (applicationname != "") { + $.cookie('applicationname', applicationname, { expires: 365 }); + } location.reload(true); }); $('input#Password').keydown(function (e) { @@ -446,14 +442,9 @@ $.cookie('password', null); $.cookie('AutoAlbumSize', null); $.cookie('AutoPlaylistSize', null); - }); - $('#SaveSubDirectory').live('click', function () { - var subdirectory = $('#SubDirectory').val(); - if (subdirectory != "") { - $.cookie('subdirectory', subdirectory, { expires: 365 }); - location.reload(true); - } - return false; + $.cookie('SubDirectory', null); + $.cookie('ApplicationName', null); + location.reload(true); }); $('#StyleSwitcher').live('change', function () { var style = $(this).val(); @@ -461,7 +452,7 @@ $.cookie('css', style, { expires: 365, path: '/' }); location.reload(true); }); - }); // End document.ready + }); // End document.ready $(window).load(function () { if ($.cookie('defaultsmwidth')) { @@ -473,21 +464,40 @@ $('#AlbumContainer').css({ 'margin-left': ulwidth + 'px' }); $('#TrackContainer').css({ 'margin-left': ulwidth + 'px' }); } + if ($.cookie('sidebar') && $.cookie('username') && $.cookie('password')) { + $('#SideBar').show(); + updateChatMessages(); + updateNowPlaying(); + } resizeContent(); }); $(window).resize(function () { - resizeContent(); + resizeContent(); }); function resizeContent() { + var screenwidth = $(window).width(); $('.tabcontent').css({ 'height': (($(window).height() - 160)) + 'px' }); $('.smsection').css({ 'height': (($(window).height() - 200)) + 'px' }); var smheight = $('.smsection').height(); var smwidth = $('.smsection').width(); $('#BottomContainer').css({ 'top': smheight + 75 + 'px' }); - var screenwidth = $(window).width(); - $('#AlbumContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' }); - $('#TrackContainer').css({ 'width': (screenwidth - smwidth - 35) + 'px' }); - $('#CurrentPlaylistContainer').css({ 'width': (screenwidth - 35) + 'px' }); + if ($.cookie('sidebar')) { + var tabwidth = $(window).width() - 218; + if (tabwidth >= 700) { + $('.tabcontent').css({ 'width': tabwidth + 'px' }); + } + var sbheight = $(window).height() - 160; + $('#SideBar').css({ 'height': sbheight + 'px' }); + $('#ChatMsgs').css({ 'height': (sbheight - 270) + 'px' }); + } else { + var tabwidth = $(window).width() - 11; + if (tabwidth >= 700) { + $('.tabcontent').css({ 'width': tabwidth + 'px' }); + } + } + var tabwidth = $('.tabcontent').width(); + $('#AlbumContainer, #TrackContainer, #CurrentPlaylistContainer').css({ 'width': (tabwidth - smwidth - 30) + 'px' }); + $('#CurrentPlaylistContainer').css({ 'width': (tabwidth - 30) + 'px' }); } function resizeSMSection(x) { var smwidth = $('.smsection').width(); @@ -644,31 +654,21 @@ $('#AutoAlbumSize').val($.cookie('AutoAlbumSize')); $('#AutoPlaylistSize').val($.cookie('AutoPlaylistSize')); $('#SubDirectory').val($.cookie('subdirectory')); + $('#ApplicationName').val($.cookie('applicationname')); }); -
+
+ Reset + Save +
-
+





-
-
-
-
- Save - Reset
-
-
-
- *For custom installations
-
- Save -
-
  • Keyboard Shortcuts
    • @@ -679,10 +679,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -701,19 +726,7 @@
- - -
- Chat - Now Playing - -
- +
diff --git a/js/app.js b/js/app.js index a7ea6fd..f345145 100644 --- a/js/app.js +++ b/js/app.js @@ -6,6 +6,12 @@ if ($.cookie('subdirectory')) { } else { baseURL = location.protocol + '//' + location.host + '/rest'; } +var applicationName; +if ($.cookie('applicationname')) { + applicationName = $.cookie('applicationname'); +} else { + applicationName = 'MiniSub'; +} var username = $.cookie('username'); var password = $.cookie('password'); var auth = makeBaseAuth(username, password); @@ -38,7 +44,7 @@ function loadArtists(refresh) { if (content == "") { // Load Artist List $.ajax({ - url: baseURL + '/getIndexes.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getIndexes.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -86,58 +92,20 @@ function loadArtists(refresh) { }); } } -function getAlbums(id, appendto) { +function getAlbums(id, action, appendto) { $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, success: function (data) { - $("#AlbumRows").empty(); - if (data["subsonic-response"].directory.child != undefined) { - // There is a bug in the API that doesn't return a JSON array for one artist - var children = []; - if (data["subsonic-response"].directory.child.length > 0) { - children = data["subsonic-response"].directory.child; - } else { - children[0] = data["subsonic-response"].directory.child; - } - - var rowcolor; - var albumhtml; - $.each(children, function (i, child) { - if (i % 2 == 0) { - rowcolor = 'even'; - } else { - rowcolor = 'odd'; - } - albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating); - $(albumhtml).appendTo("#AlbumRows"); - }); - var header = generateAlbumHeaderHTML(); - $("#AlbumHeader").html(header); - } - } - }); -} -function getSongs(id, artistid, action, appendto) { - $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + id, - method: 'GET', - dataType: 'json', - beforeSend: function (req) { - req.setRequestHeader('Authorization', auth); - }, - success: function (data) { - if (appendto == '#AlbumRows' && action == '') { + if (action == '') { $('#AlbumRows').empty(); - var header = generateSongHeaderHTML(); - $("#AlbumHeader").html(header); } if (action == 'autoplay') { - $('#CurrentPlaylistContainer').empty(); + $('#CurrentPlaylistContainer tbody').empty(); } if (data["subsonic-response"].directory.child != undefined) { // There is a bug in the API that doesn't return a JSON array for one artist @@ -150,27 +118,31 @@ function getSongs(id, artistid, action, appendto) { var rowcolor; var albumhtml; + var isDir; $.each(children, function (i, child) { if (i % 2 == 0) { rowcolor = 'even'; } else { rowcolor = 'odd'; } - var track; - if (child.track === undefined) { track = " "; } else { track = child.track; } - var time = secondsToTime(child.duration); - albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']); - /* - if (appendto == '#AlbumRows') { - if (i == 0) { - //var backhtml = '« Back to ' + child.artist + ''; - var backhtml = '' + child.artist + ''; - $("#BreadCrumb").html($(backhtml)); - } + isDir = child.isDir; + if (isDir == true) { + albumhtml = generateAlbumHTML(rowcolor, child.id, child.parent, child.coverArt, child.title, child.artist, child.userRating); + } else { + var track; + if (child.track === undefined) { track = " "; } else { track = child.track; } + var time = secondsToTime(child.duration); + albumhtml = generateSongHTML(rowcolor, child.id, child.parent, track, child.title, child.artist, child.album, child.coverArt, child.userRating, time['m'], time['s']); } - */ $(albumhtml).appendTo(appendto); }); + if (appendto == '#AlbumRows' && isDir == true) { + var header = generateAlbumHeaderHTML(); + } + if (appendto == '#AlbumRows' && isDir == false) { + var header = generateSongHeaderHTML(); + } + $("#AlbumHeader").html(header); if (action == 'autoplay') { autoPlay(); } @@ -186,7 +158,7 @@ function getAlbumListBy(id) { size = $.cookie('AutoAlbumSize'); } $.ajax({ - url: baseURL + '/getAlbumList.view?v=1.6.0&c=subweb&f=json&size=' + size + '&type=' + id, + url: baseURL + '/getAlbumList.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size + '&type=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -234,7 +206,7 @@ function getRandomSongList(action, appendto) { size = $.cookie('AutoPlaylistSize'); } $.ajax({ - url: baseURL + '/getRandomSongs.view?v=1.5.0&c=subweb&f=json&size=' + size, + url: baseURL + '/getRandomSongs.view?v=1.6.0&c=' + applicationName + '&f=json&size=' + size, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -295,7 +267,7 @@ function generateAlbumHTML(rowcolor, childid, parentid, coverart, title, artist, html += ''; } html += ''; - html += ''; + html += ''; html += '' + title + ''; html += '' + artist + ''; html += ''; @@ -321,7 +293,7 @@ function generateSongHTML(rowcolor, childid, parentid, track, title, artist, alb html += '' + track + ''; html += '' + title + ''; html += '' + artist + ''; - html += '' + album + ''; + html += '' + album + ''; html += '' + m + ':' + s + ''; html += ''; return html; @@ -342,7 +314,7 @@ function refreshRowColor() { var scrobbled = false; function playSong(el, songid, albumid) { $.ajax({ - url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=subweb&f=json&id=' + albumid, + url: baseURL + '/getMusicDirectory.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + albumid, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -365,10 +337,9 @@ function playSong(el, songid, albumid) { $('#songdetails_song').attr('parentid', albumid); $('#songdetails_song').attr('childid', songid); $('#songdetails_artist').html(artist + ' - ' + album); - //$('#songdetails_artist').html('« Back to ' + artist + ''); - $('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&id=' + songid); - $('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=subweb&f=json&size=56&id=' + songid); - audio.load(baseURL + '/stream.view?v=1.6.0&c=subweb&f=json&id=' + songid); + $('#coverartimage').attr('href', baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid); + $('#coverartimage img').attr('src', baseURL + '/getCoverArt.view?v=1.6.0&c=' + applicationName + '&f=json&size=56&id=' + songid); + audio.load(baseURL + '/stream.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid); audio.play(); $('table.songlist tr.song').removeClass('playing'); $(el).addClass('playing'); @@ -382,7 +353,7 @@ function playSong(el, songid, albumid) { function scrobbleSong(submission) { var songid = $('#songdetails_song').attr('childid'); $.ajax({ - url: baseURL + '/scrobble.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&submission=" + submission, + url: baseURL + '/scrobble.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&submission=" + submission, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -397,7 +368,7 @@ function scrobbleSong(submission) { } function rateSong(songid, rating) { $.ajax({ - url: baseURL + '/setRating.view?v=1.6.0&c=subweb&f=json&id=' + songid + "&rating=" + rating, + url: baseURL + '/setRating.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + songid + "&rating=" + rating, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -452,7 +423,7 @@ function autoPlay() { } function search(type, query) { $.ajax({ - url: baseURL + '/search2.view?v=1.6.0&c=subweb&f=json&query=' + query, + url: baseURL + '/search2.view?v=1.6.0&c=' + applicationName + '&f=json&query=' + query, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -493,7 +464,7 @@ function search(type, query) { var starttime; function loadChatMessages() { $.ajax({ - url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -520,10 +491,10 @@ function loadChatMessages() { } var updater; function updateChatMessages() { - updater = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { + updater = $.periodic({ period: 1000, decay: 1.5, max_period: 1800000 }, function () { $.ajax({ periodic: this, - url: baseURL + '/getChatMessages.view?v=1.6.0&c=subweb&f=json&since=' + starttime, + url: baseURL + '/getChatMessages.view?v=1.6.0&c=' + applicationName + '&f=json&since=' + starttime, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -554,16 +525,20 @@ function updateChatMessages() { starttime = msg.time; } }); + $("#ChatMsgs").attr({ scrollTop: $("#ChatMsgs").attr("scrollHeight") }); } } }); }); } +function stopUpdateChatMessages() { + updater.cancel(); +} function addChatMessage(msg) { $.ajax({ type: 'POST', url: baseURL + '/addChatMessage.view', - data: { v: "1.5.0", c: "subweb", f: "json", message: msg }, + data: { v: "1.6.0", c: applicationName, f: "json", message: msg }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -577,10 +552,10 @@ function addChatMessage(msg) { var updaterNowPlaying; var updaterNowPlayingData; function updateNowPlaying() { - updaterNowPlaying = $.periodic({ period: 2000, decay: 1.5, max_period: 1800000 }, function () { + updaterNowPlaying = $.periodic({ period: 4000, decay: 1.5, max_period: 1800000 }, function () { $.ajax({ periodic: this, - url: baseURL + '/getNowPlaying.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getNowPlaying.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -622,6 +597,9 @@ function updateNowPlaying() { }); }); } +function stopUpdateNowPlaying() { + updaterNowPlaying.cancel(); +} function loadPlaylists(refresh) { if (refresh) { @@ -631,7 +609,7 @@ function loadPlaylists(refresh) { if (content == "") { // Load Playlists $.ajax({ - url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -654,7 +632,7 @@ function loadPlaylists(refresh) { function loadPlaylistsForMenu(menu) { $('#' + menu).empty(); $.ajax({ - url: baseURL + '/getPlaylists.view?v=1.6.0&c=subweb&f=json', + url: baseURL + '/getPlaylists.view?v=1.6.0&c=' + applicationName + '&f=json', method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -676,7 +654,7 @@ function newPlaylist() { var reply = prompt("Choose a name for your new playlist.", ""); if (reply) { $.ajax({ - url: baseURL + '/createPlaylist.view?v=1.6.0&c=subweb&f=json&name=' + reply, + url: baseURL + '/createPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&name=' + reply, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -690,7 +668,7 @@ function newPlaylist() { } function deletePlaylist(id) { $.ajax({ - url: baseURL + '/deletePlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/deletePlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -718,7 +696,7 @@ function addToPlaylist(playlistid, from) { // Get songs from playlist var currentsongs = []; $.ajax({ - url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + playlistid, + url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + playlistid, method: 'GET', dataType: 'json', beforeSend: function (req) { @@ -749,7 +727,7 @@ function addToPlaylist(playlistid, from) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: currentsongs }, + data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: currentsongs }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -768,7 +746,7 @@ function addToPlaylist(playlistid, from) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", name: 'New Playlist', songId: selected }, + data: { v: "1.6.0", c: applicationName, f: "json", name: 'New Playlist', songId: selected }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -799,7 +777,7 @@ function savePlaylist(playlistid) { $.ajax({ type: 'POST', url: baseURL + '/createPlaylist.view', - data: { v: "1.5.0", c: "subweb", f: "json", playlistId: playlistid, songId: songs }, + data: { v: "1.6.0", c: applicationName, f: "json", playlistId: playlistid, songId: songs }, beforeSend: function (req) { req.setRequestHeader('Authorization', auth); }, @@ -813,7 +791,7 @@ function savePlaylist(playlistid) { } function getPlaylist(id, action, appendto) { $.ajax({ - url: baseURL + '/getPlaylist.view?v=1.6.0&c=subweb&f=json&id=' + id, + url: baseURL + '/getPlaylist.view?v=1.6.0&c=' + applicationName + '&f=json&id=' + id, method: 'GET', dataType: 'json', beforeSend: function (req) { diff --git a/style/Style.css b/style/Style.css index b6678ae..cb7b98b 100644 --- a/style/Style.css +++ b/style/Style.css @@ -89,11 +89,13 @@ img } .tabcontent { + min-height: 400px; + min-width: 700px; } .smsection { width: 200px; - min-height: 200px; + min-height: 360px; padding: 0 0 40px 0; float: left; overflow-y: auto; @@ -108,7 +110,7 @@ img { height: 100%; width: 100%; - min-height: 200px; + min-height: 400px; overflow: auto; background: #fff; border: 1px solid #cbcbcb; @@ -119,7 +121,7 @@ img height: 100%; width: 100%; min-width: 450px; - min-height: 200px; + min-height: 400px; overflow: auto; background: #fff; border: 1px solid #cbcbcb; @@ -129,14 +131,9 @@ img { padding: 5px; } -.nosection -{ - height: 100%; - margin: 5px 5px 0 5px; -} .subsection { - margin: 5px 10px; + margin: 15px 20px; } .subsection small { @@ -311,7 +308,7 @@ table.songlist tr.album td.albumart img { margin: 5px 10px 0 10px; padding: 2px; - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; } table.songlist tr.album a.play { @@ -395,7 +392,7 @@ table.songlist tr.song td.album } table.songlist tr.song td.album img { - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; display: block; float: left; margin: 0 5px; @@ -458,14 +455,21 @@ table.songlist tr.song a.favorite } table.songlist tr.playing { - background: url('../images/play_alt_16x16.png') 6px 10px no-repeat #DEEBFA; + background-color: #DEEBFA; +} +table.songlist tr.playing td:first-child +{ + background: url('../images/play_alt_16x16.png') 6px 10px no-repeat; } table.songlist tr.selected { color: #f2f2f2; - background: url('../images/check_8x7.png') 10px 16px no-repeat; - background-color: #4B95E5; border-bottom: 1px solid #73ABE7; + background-color: #4B95E5; +} +table.songlist tr.selected td:first-child +{ + background: url('../images/check_8x7.png') 10px 16px no-repeat; } /* tablesorter style */ table.tablesorter { @@ -507,12 +511,17 @@ table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSo background-color: #8dbdd8; } +#ArtistContainer +{ + min-height: 360px; +} #BottomContainer { border-top: 1px solid #F2F2F2; background: #fff; position: fixed; height: 43px; + width: 184px; } #BottomContainer ul { @@ -571,10 +580,33 @@ background-color: #8dbdd8; width: 220px; text-align: right; } -#ChatMsgs +#SideBar +{ + display: none; + width: 200px; + position: fixed; + top: 78px; + right: 4px; + background: none repeat scroll 0 0 #FFFFFF; + border: 1px solid #CBCBCB; + min-height: 400px; +} +#SideBar .header { padding: 5px; + font-size: 12px; + color: #545454; + font-variant: small-caps; + font-weight: bold; +} +#ChatMsgs +{ + border-bottom: 1px solid #F2F2F2; + padding: 5px; + margin: 0 0 2px; text-align: right; + overflow-y: auto; + overflow-x: hidden; } #ChatMsgs .msg { @@ -594,6 +626,10 @@ background-color: #8dbdd8; font-size: 9px; color: #CAD0D7; } +#Chat .submit +{ + padding: 0 2px; +} #submenu_NowPlaying { left: 605px; @@ -603,10 +639,18 @@ background-color: #8dbdd8; width: 220px; text-align: right; } +#NowPlaying +{ + border-bottom: 1px solid #F2F2F2; + margin: 2px 0; +} #NowPlayingList { + height: 150px; padding: 5px; text-align: right; + overflow-y: auto; + overflow-x: hidden; } #NowPlayingList .msg { @@ -679,7 +723,7 @@ background-color: #8dbdd8; margin: 2px 0 2px 0; float: left; padding: 2px; - border: 1px solid #F0F0F0; + border: 1px solid #DEDEDE; } #songdetails { @@ -710,7 +754,7 @@ ul.preferences { list-style-type: none; padding: 0; - margin: 5px; + margin: 0 5px; } ul.preferences li { @@ -723,6 +767,7 @@ ul.preferences li.title font-weight: bold; font-size: 14px; font-variant: small-caps; + padding: 0; } ul.preferences li span { @@ -800,6 +845,12 @@ input.large width: 180px; margin: 5px; } +input.chat +{ + border: 1px solid #ffffff; + width: 150px; + margin: 5px; +} select { font-family: Calibri, Arial, Verdana;