diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 34e58b25cd..6eaf1c086b 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -32,7 +32,6 @@ .listHeader { margin-top: 1em; margin-bottom: 5px; - font-weight: normal; } .firstListHeader { @@ -54,7 +53,7 @@ .viewSettings { text-align: center; - margin: 1.5em 0; + margin: 1em 0; } .libraryItemsGrid th { @@ -62,7 +61,7 @@ } .libraryGridImage { - width: 120px; + width: 110px; } .thName, .tdName { @@ -87,14 +86,19 @@ } .libraryItemsGrid th { - padding-bottom: 1em; - padding-top: 0; + padding-bottom: 10px; } - .libraryItemsGrid td { + .libraryItemsGrid td, .libraryItemsGrid th { border-top: 1px solid #555; + border-bottom: 1px solid #555; } +.listPaging { + text-align: center; + margin: .5em 0 .75em; +} + .tabletColumn, .desktopColumn { display: none!important; } @@ -111,6 +115,12 @@ } } +/*@media all and (min-width: 1000px) { + .libraryPage > .ui-content, .libraryPage > .ui-panel-content-wrap { + margin-top: -20px!important; + } +}*/ + @media all and (min-width: 1200px) { .libraryPage .ui-content { diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index fef47a16d3..ff957bb8b2 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -419,7 +419,7 @@ form, .readOnlyContent { .posterViewItem img { max-width: 155px; - max-height: 125px; + max-height: 110px; vertical-align: bottom; } diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 7a97f5156e..1cf2449410 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -1,7 +1,7 @@ (function ($, document) { var view = "Poster"; - + // The base query options var query = { @@ -9,13 +9,18 @@ SortOrder: "Ascending", IncludeItemTypes: "Movie", Recursive: true, - Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType" + Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType", + Limit: 100, + StartIndex: 0 }; - function getTableHtml(items) { + function getTableHtml(result) { - var html = ''; + var items = result.Items; + var html = ''; + + html += '
'; html += ''; html += ''; @@ -59,7 +64,7 @@ html += ''; @@ -68,14 +73,14 @@ else if (item.ImageTags && item.ImageTags.Thumb) { html += ''; } else if (item.ImageTags && item.ImageTags.Primary) { html += ''; } @@ -133,22 +138,71 @@ return html; } + function getPagingHtml(result) { + + var html = ''; + + var pageCount = Math.round(result.TotalRecordCount / query.Limit); + var pageNumber = (query.StartIndex / query.Limit) + 1; + + var dropdownHtml = ''; + + html += '
'; + html += 'Results ' + (query.StartIndex + 1) + '-' + (query.StartIndex + query.Limit) + ' of ' + result.TotalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount; + html += '
'; + + return html; + } + function reloadItems(page) { Dashboard.showLoadingMsg(); - + ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { + var html = ''; + + var showPaging = result.TotalRecordCount > query.Limit; + + if (showPaging) { + html += getPagingHtml(result); + } + if (view == "Poster") { - $('#items', page).html(LibraryBrowser.getPosterViewHtml({ + html += LibraryBrowser.getPosterViewHtml({ items: result.Items, useAverageAspectRatio: true - })); + }); } else if (view == "Grid") { - $('#items', page).html(getTableHtml(result.Items)).trigger('create'); + html += getTableHtml(result); } + if (showPaging) { + html += getPagingHtml(result); + } + + 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(); }); } @@ -158,11 +212,13 @@ var page = this; $('.radioSortBy', this).on('click', function () { + query.StartIndex = 0; query.SortBy = this.getAttribute('data-sortby'); reloadItems(page); }); $('.radioSortOrder', this).on('click', function () { + query.StartIndex = 0; query.SortOrder = this.getAttribute('data-sortorder'); reloadItems(page); }); @@ -178,6 +234,7 @@ filters = filters ? (filters + ',' + filterName) : filterName; } + query.StartIndex = 0; query.Filters = filters; reloadItems(page); @@ -195,11 +252,12 @@ filters = filters ? (filters + ',' + filterName) : filterName; } + query.StartIndex = 0; query.VideoTypes = filters; reloadItems(page); }); - + $('#selectView', this).on('change', function () { view = this.value; @@ -209,15 +267,16 @@ $('#chk3D', this).on('change', function () { + query.StartIndex = 0; query.VideoFormats = this.checked ? this.getAttribute('data-filter') : null; reloadItems(page); }); - }).on('pagebeforeshow', "#moviesPage", function() { - + }).on('pagebeforeshow', "#moviesPage", function () { + reloadItems(this); - + }).on('pageshow', "#moviesPage", function () { @@ -253,7 +312,7 @@ }).checkboxradio('refresh'); $('#selectView', this).val(view).selectmenu('refresh'); - + $('#chk3D', this).checked(query.VideoFormats == "Digital3D,Sbs3D").checkboxradio('refresh'); });