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');
});