diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 45427826e0..cd8a0567ec 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -113,11 +113,21 @@
width: 70%;
max-width: 1200px;
}
+
+ .ehsContent {
+ max-width: 1070px;
+ }
}
@media all and (min-width: 1920px) {
.ehsContent {
- max-width: 1000px;
+ max-width: 1200px;
+ }
+}
+
+@media all and (min-width: 2300px) {
+ .ehsContent {
+ max-width: 1500px;
}
}
@@ -230,6 +240,9 @@
border: 0;
margin: 0;
height: 14px;
+ border: 1px solid #666;
+ border-radius: 0;
+ width: 100px;
}
/* Polyfill */
@@ -281,7 +294,6 @@
position: relative;
top: 3px;
margin-right: 1em;
- width: 50px;
}
.tileItem .itemProgressBar {
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index c59ba3ece0..8e3eb65179 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -9,6 +9,7 @@
text-decoration: none;
text-align: left;
overflow: hidden;
+ border: 1px solid #555;
}
.posterItem:hover {
@@ -37,7 +38,7 @@
overflow: hidden;
text-wrap: none;
white-space: nowrap;
- padding: 4px;
+ padding: 5px 4px 4px;
background: #181818;
text-shadow: none;
}
@@ -48,6 +49,7 @@
.posterItemText + .posterItemText {
padding-top: 2px;
+ border-top: 0;
}
.posterItemDefaultText {
@@ -84,13 +86,41 @@
.portraitPosterItem {
width: 100px;
+ border-color: #555;
}
- .portraitPosterItem .posterItemImage {
- height: 150px;
+.smallBackdropPosterItem {
+ border-color: #555;
+}
+
+.portraitPosterItem .posterItemImage {
+ height: 150px;
+}
+
+
+.posterItemProgress {
+ font-size: 12px;
+ color: #bbb;
+ vertical-align: middle;
+}
+
+ .posterItemProgress .itemProgressBar {
+ height: 12px;
+ width: 35%;
}
+.portraitPosterItem .itemProgressText {
+ display: none;
+}
+.portraitPosterItem .itemProgressBar {
+ width: 100%;
+}
+
+.posterItem .itemProgressText {
+ margin-left: 5px;
+ vertical-align: middle;
+}
@media all and (min-width: 650px) {
@@ -124,6 +154,10 @@
height: 126px;
}
+ .backdropPosterItem .itemProgressBar {
+ width: 55%;
+ }
+
.portraitPosterItem {
width: 108px;
}
@@ -144,33 +178,57 @@
}
.portraitPosterItem {
- width: 120px;
+ width: 134px;
}
.portraitPosterItem .posterItemImage {
- height: 180px;
+ height: 201px;
}
+
+ .backdropPosterItem {
+ width: 256px;
+ }
+
+ .backdropPosterItem .posterItemImage {
+ height: 144px;
+ }
+
+ .portraitPosterItem .itemProgressText {
+ display: inline;
+ }
+
+ .portraitPosterItem .itemProgressBar {
+ width: 20%;
+ }
}
@media all and (min-width: 1920px) {
.squarePosterItem {
- width: 185px;
+ width: 200px;
}
.squarePosterItem .posterItemImage {
- height: 185px;
+ height: 200px;
}
.portraitPosterItem {
- width: 136px;
+ width: 160px;
}
.portraitPosterItem .posterItemImage {
- height: 204px;
+ height: 240px;
}
- .posterItem {
- font-size: 16px;
+ .backdropPosterItem {
+ width: 288px;
+ }
+
+ .backdropPosterItem .posterItemImage {
+ height: 162px;
+ }
+
+ .portraitPosterItem .itemProgressBar {
+ width: 30%;
}
}
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 0f47410a49..4fae189e14 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -534,6 +534,13 @@
html += "";
}
+ if (options.showProgressBar) {
+
+ html += "
";
+ html += LibraryBrowser.getItemProgressBarHtml(item, true) || " ";
+ html += "
";
+ }
+
if (options.showNewIndicator !== false) {
html += LibraryBrowser.getNewIndicatorHtml(item);
}
@@ -785,7 +792,7 @@
return html;
},
- getUserDataIconsHtml: function (item) {
+ getItemProgressBarHtml: function (item, showProgressText) {
var html = '';
@@ -795,7 +802,7 @@
if (item.PlayedPercentage) {
tooltip = Math.round(item.PlayedPercentage) + '% played';
-
+
pct = item.PlayedPercentage;
}
else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
@@ -809,8 +816,21 @@
html += '';
+
+ if (showProgressText) {
+ html += '' + tooltip + '';
+ }
}
+ return html;
+ },
+
+ getUserDataIconsHtml: function (item) {
+
+ var html = '';
+
+ html += LibraryBrowser.getItemProgressBarHtml(item);
+
var userData = item.UserData || {};
var itemId = item.Id;
@@ -1277,7 +1297,7 @@
html += ' / ';
}
- html += '' + item.Studios[i] + '';
+ html += '' + item.Studios[i].Name + '';
}
elem.show().html(html).trigger('create');
diff --git a/dashboard-ui/scripts/moviesrecommended.js b/dashboard-ui/scripts/moviesrecommended.js
index a79a1ecbec..2997e6cfd2 100644
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@@ -11,7 +11,7 @@
IncludeItemTypes: "Movie",
Limit: 7,
Recursive: true,
- Fields: "PrimaryImageAspectRatio",
+ Fields: "PrimaryImageAspectRatio,DateCreated,UserData",
Filters: "IsUnplayed"
};
@@ -34,7 +34,7 @@
Filters: "IsResumable",
Limit: 7,
Recursive: true,
- Fields: "PrimaryImageAspectRatio"
+ Fields: "PrimaryImageAspectRatio,DateCreated,UserData"
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -47,7 +47,8 @@
$('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
- useAverageAspectRatio: true
+ useAverageAspectRatio: true,
+ showProgressBar: true
}));
});
@@ -60,7 +61,7 @@
IncludeItemTypes: "Trailer",
Limit: 7,
Recursive: true,
- Fields: "PrimaryImageAspectRatio,DateCreated",
+ Fields: "PrimaryImageAspectRatio,DateCreated,UserData",
Filters: "IsUnplayed"
};
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index a96b679269..04da738a58 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -37,7 +37,7 @@
var html = '';
var plugin = availablePlugins[i];
- html += "";
+ html += "";
if (plugin.thumbImage) {
html += '';
diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js
index 05b06f990d..309ec69d17 100644
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@@ -9,9 +9,9 @@
SortBy: "DateCreated",
SortOrder: "Descending",
IncludeItemTypes: "Episode",
- Limit: 6,
+ Limit: 8,
Recursive: true,
- Fields: "PrimaryImageAspectRatio,SeriesInfo",
+ Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData",
Filters: "IsUnplayed"
};
@@ -34,9 +34,9 @@
SortOrder: "Descending",
IncludeItemTypes: "Episode",
Filters: "IsResumable",
- Limit: 6,
+ Limit: 8,
Recursive: true,
- Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated"
+ Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData",
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@@ -52,7 +52,8 @@
useAverageAspectRatio: true,
shape: "backdrop",
showTitle: true,
- showParentTitle: true
+ showParentTitle: true,
+ showProgressBar: true
}));
});