diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 5dcb22ea73..7ecc0d48c4 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -188,7 +188,7 @@ font-weight: bold; } -.posterDetailViewItem { +.tileItem { background: #333; padding: 10px 10px 3px; margin: 3px 0; @@ -200,30 +200,38 @@ } - .posterDetailViewItem .itemProgress { + .tileItem .itemProgress { font-size: 14px; } - .posterDetailViewItem .starRating { + .tileItem .starRating { width: 15px; height: 13px; } -.posterDetailViewImage { - max-height: 90px; - max-width: 46.5%; +.tileImage { + height: 90px; + width: 45%; + display: inline-block; + background-size: contain; + background-repeat: no-repeat; + background-position: center top; } -.posterDetailViewItem p { +.defaultTileImage { + background-color: #999; +} + +.tileItem p { margin: .35em 0; } -.posterDetailViewItem .imgUserItemRating { +.tileItem .imgUserItemRating { height: 18px; width: 18px; } -.posterDetailViewContentContainer { +.tileContent { display: inline-block; width: 50%; padding-left: 10px; @@ -233,11 +241,11 @@ overflow: hidden; } -.posterDetailViewName { +.tileName { font-weight: bold; } -.posterDetailViewItem .userDataIcons img { +.tileItem .userDataIcons img { height: 14px; width: 14px; } @@ -262,33 +270,33 @@ } @media all and (min-width: 850px) { - .posterDetailViewItem { + .tileItem { width: 46%; display: inline-block; margin-left: 3px; margin-right: 3px; } - .posterDetailViewImage { - max-height: 140px; + .tileImage { + height: 140px; } - .posterDetailViewItem .userDataIcons img { + .tileItem .userDataIcons img { height: 18px; width: 18px; } - .posterDetailViewItem p { + .tileItem p { margin: .75em 0; } - .posterDetailViewItem .itemProgress { + .tileItem .itemProgress { font-size: 17px; } } @media all and (min-width: 1200px) { - .posterDetailViewItem { + .tileItem { width: 30.6%; } @@ -298,30 +306,56 @@ } @media all and (min-width: 1440px) { - .posterDetailViewImage { - max-height: 170px; + .tileImage { + height: 170px; } } @media all and (min-width: 1920px) { - .posterDetailViewItem { + .tileItem { width: 31.3%; } - .posterDetailViewImage { - max-height: 200px; + .tileImage { + height: 200px; } } @media all and (min-width: 2000px) { - .posterDetailViewItem { + .tileItem { width: 23%; } } @media all and (min-width: 2540px) { - .posterDetailViewItem { + .tileItem { width: 18.75%; } } + +.detailTable { + border-collapse: collapse; + border-spacing: 0; + min-width: 70%; +} + + .detailTable td { + border-spacing: 0; + border-top: 1px solid #444; + border-bottom: 1px solid #444; + padding: 3px 5px; + } + + .detailTable th { + border-spacing: 0; + border-bottom: 1px solid #444; + padding: 5px; + font-weight: normal; + text-align: left; + } + + .detailTable .imgUserItemRating { + width: 20px; + height: 20px; + } diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js index a8e700cdfc..41d8d78b74 100644 --- a/dashboard-ui/scripts/Itemdetailpage.js +++ b/dashboard-ui/scripts/Itemdetailpage.js @@ -205,12 +205,19 @@ }).done(function (result) { - var html = LibraryBrowser.getPosterDetailViewHtml({ - items: result.Items, - useAverageAspectRatio: true - }); + if (item.Type == "MusicAlbum") { - $('#childrenContent', page).html(html); + $('#childrenContent', page).html(LibraryBrowser.getSongTableHtml(result.Items)).trigger('create'); + + } else { + var html = LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true + }); + + $('#childrenContent', page).html(html); + + } }); if (item.Type == "Season") { @@ -223,7 +230,7 @@ $('#childrenTitle', page).html('Movies (' + item.ChildCount + ')'); } else if (item.Type == "MusicAlbum") { - $('#childrenTitle', page).html('Songs (' + item.ChildCount + ')'); + $('#childrenTitle', page).html('Tracks (' + item.ChildCount + ')'); } else { $('#childrenTitle', page).html('Items (' + item.ChildCount + ')'); diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js index e0bbb8cf15..95f17a38ed 100644 --- a/dashboard-ui/scripts/dashboardpage.js +++ b/dashboard-ui/scripts/dashboardpage.js @@ -224,7 +224,7 @@ ticks -= (minutes * ticksPerMinute); - if (minutes < 10) { + if (minutes < 10 && hours) { minutes = '0' + minutes; } parts.push(minutes); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 0842af6a2f..dc6f24fd81 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -24,76 +24,86 @@ var item = items[i]; - html += ''; + var imgUrl; + var isDefault = false; + + html += ''; if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; + }); } else if (options.preferBackdrop && item.ImageTags && item.ImageTags.Thumb) { - html += ""; + }); } else if (item.ImageTags && item.ImageTags.Primary) { var height = 300; var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; - html += ""; + }); } else if (item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; + }); } else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") { - html += ""; + imgUrl = "css/images/items/list/audio.png"; + isDefault = true; } else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") { - html += ""; + imgUrl = "css/images/items/list/video.png"; + isDefault = true; } else if (item.Type == "Person") { - html += ""; + imgUrl = "css/images/items/list/person.png"; + isDefault = true; } else if (item.Type == "Artist") { - html += ""; + imgUrl = "css/images/items/list/audiocollection.png"; + isDefault = true; } else if (item.MediaType == "Game") { - html += ""; + imgUrl = "css/images/items/list/game.png"; + isDefault = true; } else { - html += ""; + imgUrl = "css/images/items/list/collection.png"; + isDefault = true; } - html += '
'; + var cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage"; + + html += '
'; + + html += '
'; if (item.SeriesName || item.Album) { var seriesName = item.SeriesName || item.Album; - html += '
' + seriesName + '
'; + html += '
' + seriesName + '
'; } var name = item.Name; @@ -105,7 +115,7 @@ name = item.ParentIndexNumber + "." + name; } - html += '
' + name + '
'; + html += '
' + name + '
'; if (item.CommunityRating) { html += '

' + LibraryBrowser.getFiveStarRatingHtml(item) + '

'; @@ -152,6 +162,50 @@ return html; }, + getSongTableHtml: function (items) { + + var html = ''; + + html += ''; + + html += ''; + + html += ''; + html += ''; + html += ''; + html += ''; + + html += ''; + + for (var i = 0, length = items.length; i < length; i++) { + + var item = items[i]; + + html += ''; + + var num = item.IndexNumber; + + if (num && item.ParentIndexNumber) { + num = item.ParentIndexNumber + "." + num; + } + html += ''; + + html += ''; + + var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0); + + html += ''; + + html += ''; + + html += ''; + } + + html += '
TrackDuration
' + (num || "") + '' + (item.Name || "") + '' + time + '' + LibraryBrowser.getUserDataIconsHtml(item) + '
'; + + return html; + }, + getHref: function (item) { if (item.url) { @@ -995,11 +1049,16 @@ if (item.RunTimeTicks) { - var minutes = item.RunTimeTicks / 600000000; + if (item.Type == "Audio") { - minutes = minutes || 1; + miscInfo.push(DashboardPage.getDisplayText(item.RunTimeTicks)); + } else { + var minutes = item.RunTimeTicks / 600000000; - miscInfo.push(parseInt(minutes) + "min"); + minutes = minutes || 1; + + miscInfo.push(parseInt(minutes) + "min"); + } } if (item.MediaType && item.DisplayMediaType && item.DisplayMediaType != item.Type) {