improved tile styles

2025-03-30 19:56:21 +00:00 · 2013-04-25 20:52:55 -04:00 · 2013-04-25 20:52:55 -04:00 · 6510868c48
commit 6510868c48
parent 322cc9ebe9
9 changed files with 307 additions and 130 deletions
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@ -37,10 +37,6 @@
    margin-bottom: 5px;
 }

-.firstListHeader {
-    margin-top: .75em;
-}
-
 .libraryViewNav {
    text-align: center;
 }
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@ -18,10 +18,9 @@
    }

 .posterItemImage {
-    background-size: contain;
+    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
-    overflow: hidden;
 }

 .defaultPosterItemImage {
@ -38,17 +37,28 @@
    text-shadow: none;
 }

-    .posterItemText + .posterItemText {
+.posterItemTextCentered {
+    text-align: center;
+}
+
+.posterItemText + .posterItemText {
    padding-top: 2px;
-    }
+}
+
+.posterItemDefaultText {
+    position: absolute;
+    top: 30%;
+    left: 0;
+    right: 0;
+    text-align: center;
+}

 .squarePosterItem {
-    width: 200px;
+    width: 160px;
 }

    .squarePosterItem .posterItemImage {
-        height: 200px;
-        background-size: 200px auto;
+        height: 160px;
    }

 .backdropPosterItem {
@ -57,5 +67,123 @@

    .backdropPosterItem .posterItemImage {
        height: 90px;
-        background-size: 160px auto;
    }
+
+.portraitPosterItem {
+    width: 100px;
+}
+
+    .portraitPosterItem .posterItemImage {
+        height: 150px;
+    }
+
+
+@media all and (min-width: 750px) {
+
+    .backdropPosterItem {
+        width: 192px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 108px;
+        }
+
+    .squarePosterItem {
+        width: 160px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 160px;
+        }
+
+    .portraitPosterItem {
+        width: 110px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 165px;
+        }
+}
+
+@media all and (min-width: 1200px) {
+
+    .backdropPosterItem {
+        width: 272px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 153px;
+        }
+
+    .squarePosterItem {
+        width: 160px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 160px;
+        }
+
+    .portraitPosterItem {
+        width: 100px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 150px;
+        }
+
+    .posterItem {
+        font-size: 15px;
+    }
+}
+
+@media all and (min-width: 1440px) {
+
+
+
+    .squarePosterItem {
+        width: 170px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 170px;
+        }
+
+    .portraitPosterItem {
+        width: 112px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 168px;
+        }
+}
+
+@media all and (min-width: 1920px) {
+
+    .backdropPosterItem {
+        width: 304px;
+    }
+
+        .backdropPosterItem .posterItemImage {
+            height: 171px;
+        }
+
+    .squarePosterItem {
+        width: 185px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 185px;
+        }
+
+    .portraitPosterItem {
+        width: 126px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 189px;
+        }
+
+    .posterItem {
+        font-size: 16px;
+    }
+}
--- a/dashboard-ui/musicrecommended.html
+++ b/dashboard-ui/musicrecommended.html
@ -26,6 +26,20 @@

                <div id="recentlyAddedSongs">
                </div>
+
+                <div id="recentlyPlayed" style="display: none;">
+                    <h1 class="listHeader">Recently Played</h1>
+
+                    <div id="recentlyPlayedSongs">
+                    </div>
+                </div>
+
+                <div id="topPlayed" style="display: none;">
+                    <h1 class="listHeader">Most Frequently Played</h1>
+
+                    <div id="topPlayedSongs">
+                    </div>
+                </div>
            </div>
        </div>
    </div>
--- a/dashboard-ui/scripts/indexpage.js
+++ b/dashboard-ui/scripts/indexpage.js
@ -4,11 +4,11 @@

        var html = '';

-        html += '<div class="posterViewItem">';
-        html += '<a href="' + view.url + '">';
-        html += '<img style="background: ' + view.background + ';" src="' + view.img + '"><div class="posterViewItemText">' + view.name + '</div>';
+        html += '<a class="posterItem backdropPosterItem" href="' + view.url + '">';
+
+        html += '<div class="posterItemImage" style="background-color: ' + view.background + ';background-image:url(\'' + view.img + '\');"></div><div class="posterItemText posterItemTextCentered">' + view.name + '</div>';
+
        html += '</a>';
-        html += '</div>';

        return html;
    }
@ -32,7 +32,9 @@

            $('#divCollections', page).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
-                showTitle: true
+                showTitle: true,
+                shape: "backdrop",
+                centerText: true
            }));

        });
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -349,66 +349,109 @@

            var items = options.items;

+            options.shape = options.shape || "portrait";
+
            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;
-
-                var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
-
-                html += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item) + "'>";
+                var imgUrl = null;
+                var background;

                if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                        type: "Backdrop",
                        height: 198,
                        width: 352,
                        tag: item.BackdropImageTags[0]
+                    });

-                    }) + "' />";
-                } else if (hasPrimaryImage) {
+                } else if (item.ImageTags && item.ImageTags.Primary) {

                    var height = 300;
                    var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;

-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                        type: "Primary",
                        height: height,
                        width: width,
                        tag: item.ImageTags.Primary
-
-                    }) + "' />";
+                    });

                } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
                        type: "Backdrop",
                        height: 198,
                        width: 352,
                        tag: item.BackdropImageTags[0]
+                    });

-                    }) + "' />";
                }
                else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {

-                    html += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/audio.png' />";
+                    if (item.Name && options.showTitle) {
+                        imgUrl = 'css/images/items/list/audio.png';
+                        background = defaultBackground;
+                    } else {
+                        background = '#555';
+                    }
                }
                else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {

-                    html += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/video.png' />";
+                    if (item.Name && options.showTitle) {
+                        imgUrl = 'css/images/items/list/video.png';
+                        background = defaultBackground;
+                    } else {
+                        background = '#555';
+                    }
                }
                else {
-
-                    html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />";
+                    if (item.Name && options.showTitle) {
+                        imgUrl = 'css/images/items/list/collection.png';
+                        background = LibraryBrowser.getMetroColor(item.Id);
+                    } else {
+                        background = '#555';
+                    }
                }

-                if (showText) {
-                    html += "<div class='posterViewItemText'>";
+                html += '<a class="posterItem ' + options.shape + 'PosterItem" href="' + LibraryBrowser.getHref(item, options.context) + '">';
+
+                var style = "";
+
+                if (imgUrl) {
+                    style += 'background-image:url(\'' + imgUrl + '\');';
+                }
+
+                if (background) {
+                    style += "background-color:" + background + ";";
+                }
+
+                html += '<div class="posterItemImage" style="' + style + '"></div>';
+
+                if (!imgUrl && !options.showTitle) {
+                    html += "<div class='posterItemDefaultText'>";
+                    html += item.Name;
+                    html += "</div>";
+                }
+
+                var cssclass = options.centerText ? "posterItemText posterItemTextCentered" : "posterItemText";
+
+                if (options.showParentTitle) {
+
+                    html += "<div class='" + cssclass + "'>";
+                    html += item.SeriesName || item.Album || item.Artist || "&nbsp;";
+                    html += "</div>";
+                }
+
+                if (options.showTitle) {
+
+                    html += "<div class='" + cssclass + "'>";
                    html += item.Name;
                    html += "</div>";
                }
@ -417,84 +460,8 @@
                    html += LibraryBrowser.getNewIndicatorHtml(item);
                }

-                html += "</a></div>";
-            }
+                html += "</a>";

-            return html;
-        },
-
-        getEpisodePosterViewHtml: 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 += "<div class='" + cssClass + "'><a href='" + LibraryBrowser.getHref(item, "tv") + "'>";
-
-                if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Backdrop",
-                        height: 198,
-                        width: 352,
-                        tag: item.BackdropImageTags[0]
-                    }) + "' />";
-                } else if (hasPrimaryImage) {
-
-                    var height = 300;
-                    var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
-
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Primary",
-                        height: height,
-                        width: width,
-                        tag: item.ImageTags.Primary
-                    }) + "' />";
-
-                } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-                    html += "<img src='" + ApiClient.getImageUrl(item.Id, {
-                        type: "Backdrop",
-                        height: 198,
-                        width: 352,
-                        tag: item.BackdropImageTags[0]
-                    }) + "' />";
-                } else {
-                    html += "<img style='background:" + defaultBackground + ";' src='css/images/items/list/collection.png' />";
-                }
-
-                if (showText) {
-                    html += "<div class='posterViewItemText posterViewItemPrimaryText'>";
-                    if (item.SeriesName != null) {
-                        html += item.SeriesName;
-                        html += "</div>";
-                        html += "<div class='posterViewItemText'>";
-                    }
-                    if (item.ParentIndexNumber != null) {
-                        html += item.ParentIndexNumber + ".";
-                    }
-                    if (item.IndexNumber != null) {
-                        html += item.IndexNumber + " -";
-                    }
-
-                    html += " " + item.Name;
-                    html += "</div>";
-                }
-
-                if (options.showNewIndicator !== false) {
-                    html += LibraryBrowser.getNewIndicatorHtml(item);
-                }
-
-                html += "</a></div>";
            }

            return html;
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@ -9,7 +9,7 @@
            SortBy: "DateCreated",
            SortOrder: "Descending",
            IncludeItemTypes: "Movie",
-            Limit: 5,
+            Limit: 7,
            Recursive: true,
            Fields: "PrimaryImageAspectRatio",
            Filters: "IsUnplayed"
@ -32,7 +32,7 @@
            SortOrder: "Descending",
            IncludeItemTypes: "Movie",
            Filters: "IsResumable",
-            Limit: 5,
+            Limit: 7,
            Recursive: true,
            Fields: "PrimaryImageAspectRatio"
        };
@ -58,7 +58,7 @@
            SortBy: "DateCreated",
            SortOrder: "Descending",
            IncludeItemTypes: "Trailer",
-            Limit: 5,
+            Limit: 7,
            Recursive: true,
            Fields: "PrimaryImageAspectRatio,DateCreated",
            Filters: "IsUnplayed"
--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@ -19,7 +19,8 @@
            $('#recentlyAddedAlbums', page).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
                useAverageAspectRatio: true,
-                showNewIndicator: false
+                showNewIndicator: false,
+                shape: "square"
            }));

        });
@ -31,7 +32,7 @@
            IncludeItemTypes: "Audio",
            Limit: 5,
            Recursive: true,
-            Fields: "PrimaryImageAspectRatio"
+            Fields: "PrimaryImageAspectRatio,AudioInfo"
        };

        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@ -39,7 +40,70 @@
            $('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({
                items: result.Items,
                useAverageAspectRatio: true,
-                showNewIndicator: false
+                showNewIndicator: false,
+                shape: "square",
+                showTitle: true,
+                showParentTitle: true
+            }));
+
+        });
+
+        options = {
+
+            SortBy: "DatePlayed",
+            SortOrder: "Descending",
+            IncludeItemTypes: "Audio",
+            Limit: 5,
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio,AudioInfo",
+            Filters: "IsPlayed"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            if (result.Items.length) {
+                $('#recentlyPlayed', page).show();
+            } else {
+                $('#recentlyPlayed', page).hide();
+            }
+
+            $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                useAverageAspectRatio: true,
+                showNewIndicator: false,
+                shape: "square",
+                showTitle: true,
+                showParentTitle: true
+            }));
+
+        });
+
+        options = {
+
+            SortBy: "PlayCount",
+            SortOrder: "Descending",
+            IncludeItemTypes: "Audio",
+            Limit: 5,
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio,AudioInfo",
+            Filters: "IsPlayed"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            if (result.Items.length) {
+                $('#topPlayed', page).show();
+            } else {
+                $('#topPlayed', page).hide();
+            }
+
+            $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                useAverageAspectRatio: true,
+                showNewIndicator: false,
+                shape: "square",
+                showTitle: true,
+                showParentTitle: true
            }));

        });
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@ -55,7 +55,7 @@

            var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name);

-            html += "<div class='posterItemText' style='background:" + color + "'>";
+            html += "<div class='posterItemText posterItemTextCentered' style='background:" + color + "'>";

            var installedPlugin = installedPlugins.filter(function (ip) {
                return ip.Name == plugin.name;
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@ -17,10 +17,13 @@

 		ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {

-			$('#recentlyAddedItems', page).html(LibraryBrowser.getEpisodePosterViewHtml({
+		    $('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({
 				items: result.Items,
 				useAverageAspectRatio: true,
-			    showNewIndicator: false
+				showNewIndicator: false,
+				shape: "backdrop",
+				showTitle: true,
+				showParentTitle: true
 			}));

 		});
@ -45,9 +48,12 @@
 				$('#resumableSection', page).hide();
 			}

-			$('#resumableItems', page).html(LibraryBrowser.getEpisodePosterViewHtml({
+			$('#resumableItems', page).html(LibraryBrowser.getPosterViewHtml({
 				items: result.Items,
-				useAverageAspectRatio: true
+				useAverageAspectRatio: true,
+				shape: "backdrop",
+				showTitle: true,
+				showParentTitle: true
 			}));

 		});