diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 82a8fef6ca..c1c0f66e92 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -59,54 +59,11 @@ margin: 1em 0; } -.libraryItemsGrid th { - text-align: left; -} - -.libraryGridImage { - width: 110px; -} - -.thName, .tdName { - max-width: 300px; -} - -.libraryItemsGrid { - margin: 0 auto; - border-spacing: 0; - border-collapse: collapse; - max-width: 100%; -} - - .libraryItemsGrid a { - text-shadow: none; - } - - .libraryItemsGrid th, .libraryItemsGrid td { - vertical-align: top; - text-align: left; - padding: 10px 10px 5px; - } - - .libraryItemsGrid th { - padding-bottom: 10px; - border-bottom: 1px solid #555; - } - - .libraryItemsGrid td { - border-top: 1px solid #555; - border-bottom: 1px solid #555; - } - .listPaging { text-align: center; margin: .5em 0; } -.tabletColumn, .desktopColumn { - display: none!important; -} - @media all and (min-width: 650px) { .libraryPage .ui-content { padding: 10px 15px 100px; @@ -114,10 +71,6 @@ } @media all and (min-width: 750px) { - .tabletColumn { - display: table-cell!important; - } - .libraryViewNav .ui-btn-inner { padding-left: 20px; padding-right: 20px; @@ -139,10 +92,6 @@ .ehsContent { max-width: 850px; } - - .desktopColumn { - display: table-cell!important; - } } @media all and (min-width: 1440px) { @@ -299,16 +248,16 @@ .posterDetailViewImage { max-height: 140px; } + + .posterDetailViewItem .userDataIcons { + display: block; + } } @media all and (min-width: 1200px) { .posterDetailViewItem { width: 31%; } - - .posterDetailViewItem .userDataIcons { - display: block; - } } @media all and (min-width: 1440px) { diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index 3a33281ffa..79229831dd 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -21,7 +21,6 @@ diff --git a/dashboard-ui/scripts/boxsets.js b/dashboard-ui/scripts/boxsets.js index adbc6bd726..d0b15aef13 100644 --- a/dashboard-ui/scripts/boxsets.js +++ b/dashboard-ui/scripts/boxsets.js @@ -7,7 +7,9 @@ SortOrder: "Ascending", IncludeItemTypes: "BoxSet", Recursive: true, - Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated" + Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 }; @@ -17,14 +19,36 @@ ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { - $('#items', page).html(LibraryBrowser.getBoxsetPosterViewHtml({ + var html = ''; - items: result.Items, - useAverageAspectRatio: true + var showPaging = result.TotalRecordCount > query.Limit; - })); + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true); + } - Dashboard.hideLoadingMsg(); + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true + }); + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + } + + var elem = $('#items', page); + + // cleanup existing event handlers + $('select', elem).off('change'); + + elem.html(html).trigger('create'); + + $('select', elem).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); }); } diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 21ac1f8671..27842cd12d 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -103,8 +103,15 @@ if (item.CommunityRating) { html += '

' + LibraryBrowser.getFiveStarRatingHtml(item) + '

'; } + + if (item.Type == "BoxSet") { - html += '

' + LibraryBrowser.getMiscInfoHtml(item, false) + '

'; + var movies = item.ChildCount == 1 ? "1 Movie" : item.ChildCount + " Movies"; + + html += '

' + movies + '

'; + } else { + html += '

' + LibraryBrowser.getMiscInfoHtml(item, false) + '

'; + } html += '

' + LibraryBrowser.getUserDataIconsHtml(item) + '

'; @@ -294,75 +301,6 @@ return html; }, - getBoxsetPosterViewHtml: function (options) { - - var items = options.items; - - var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null; - - var html = ""; - - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; - - var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; - - var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer'); - - var cssClass = showText ? "posterViewItem posterViewItemWithDualText" : "posterViewItem posterViewItemWithNoText"; - - html += "
"; - - if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } else if (hasPrimaryImage) { - - var height = 300; - var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; - - html += ""; - - } else if (item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } else { - html += ""; - } - - if (showText) { - html += "
"; - html += item.Name; - html += "
"; - html += "
"; - html += item.ChildCount + " Movie"; - if (item.ChildCount > 1) html += "s"; - html += "
"; - } - - if (options.showNewIndicator !== false) { - html += LibraryBrowser.getNewIndicatorHtml(item); - } - - html += "
"; - } - - return html; - }, - getNewIndicatorHtml: function (item) { if (item.RecentlyAddedItemCount) { diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 52e1d42c3a..09e6c000bd 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -14,107 +14,6 @@ StartIndex: 0 }; - function getTableHtml(result) { - - var items = result.Items; - - var html = ''; - - html += ''; - html += ''; - - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - - html += ''; - - html += ''; - - for (var i = 0, length = items.length; i < length; i++) { - - html += getRowHtml(items[i]); - } - - html += ''; - - html += '
 NameTypeYearRatingRuntimeCommunity Rating
'; - - return html; - } - - function getRowHtml(item) { - - var html = ''; - - html += ''; - - var url = "itemdetails.html?id=" + item.Id; - - html += ''; - - if (item.BackdropImageTags && item.BackdropImageTags.length) { - - html += ''; - - } - else if (item.ImageTags && item.ImageTags.Thumb) { - html += ''; - } - else if (item.ImageTags && item.ImageTags.Primary) { - html += ''; - } - else { - html += ''; - } - - html += ''; - - html += '' + item.Name + ''; - - html += '' + (item.VideoType == "VideoFile" ? item.DisplayMediaType : item.VideoType) + ''; - - html += '' + (item.ProductionYear || "") + ''; - - html += '' + (item.OfficialRating || "") + ''; - - var minutes = (item.RunTimeTicks || 0) / 600000000; - - minutes = minutes || 1; - - html += '' + parseInt(minutes) + 'min'; - html += '' + (item.CommunityRating || "") + ''; - - html += ''; - - html += LibraryBrowser.getUserDataIconsHtml(item); - - html += ''; - - html += ''; - return html; - } - function reloadItems(page) { Dashboard.showLoadingMsg(); @@ -137,14 +36,11 @@ }); } else if (view == "Poster") { - html += LibraryBrowser.getPosterViewHtml({ + html += LibraryBrowser.getPosterDetailViewHtml({ items: result.Items, useAverageAspectRatio: true }); } - else if (view == "Grid") { - html += getTableHtml(result); - } if (showPaging) { html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js index d49fafc82c..e49a9060f2 100644 --- a/dashboard-ui/scripts/tvshows.js +++ b/dashboard-ui/scripts/tvshows.js @@ -36,14 +36,11 @@ }); } else if (view == "Poster") { - html += LibraryBrowser.getPosterViewHtml({ + html += LibraryBrowser.getPosterDetailViewHtml({ items: result.Items, useAverageAspectRatio: true }); } - else if (view == "Grid") { - html += getTableHtml(result); - } if (showPaging) { html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);