improve cd and poster views

2024-11-17 10:58:20 -07:00 · 2013-04-23 22:50:43 -04:00 · 2013-04-23 22:50:43 -04:00 · 0595f24311
commit 0595f24311
parent afbda20cad
6 changed files with 209 additions and 23 deletions
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@ -20,7 +20,7 @@
 }

 .libraryPage, .itemListContent {
-    background: #262626!important;
+    background: #494949 url(images/bgflip.png) repeat-x!important;
    background-attachment: fixed!important;
 }

@ -211,8 +211,6 @@
    }

 .tileImage {
-    height: 90px;
-    width: 45%;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
@ -234,7 +232,6 @@

 .tileContent {
    display: inline-block;
-    width: 50%;
    padding-left: 10px;
    color: #fff;
    text-align: left;
@ -242,6 +239,33 @@
    overflow: hidden;
 }

+.backdropTileItem .tileImage {
+    height: 90px;
+    width: 45%;
+}
+
+.backdropTileItem .tileContent {
+    width: 50%;
+}
+
+.posterTileItem .tileImage {
+    height: 120px;
+    width: 30%;
+}
+
+.posterTileItem .tileContent {
+    width: 65%;
+}
+
+.cdTileItem .tileImage {
+    height: 100px;
+    width: 35%;
+}
+
+.cdTileItem .tileContent {
+    width: 60%;
+}
+
 .tileName {
    font-weight: bold;
    white-space: nowrap;
@ -281,17 +305,33 @@
        margin-right: 3px;
    }

-    .tileImage {
+    .backdropTileItem .tileImage {
        height: 88px;
    }
+
+    .posterTileItem .tileImage {
+        height: 120px;
+    }
+
+    .cdTileItem .tileImage {
+        height: 115px;
+    }
 }

@media all and (min-width: 850px) {

-    .tileImage {
+    .backdropTileItem .tileImage {
        height: 105px;
    }

+    .posterTileItem .tileImage {
+        height: 120px;
+    }
+
+    .posterTileItem {
+        width: 31%;
+    }
+
    .tileItem .userDataIcons img {
        height: 18px;
        width: 18px;
@ -311,18 +351,42 @@
        width: 47.5%;
    }

-    .tileImage {
+    .posterTileItem {
+        width: 31%;
+    }
+
+    .backdropTileItem .tileImage {
        height: 110px;
    }
+
+    .posterTileItem .tileImage {
+        height: 136px;
+    }
+
+    .cdTileItem {
+        width: 31%;
+    }
+
+        .cdTileItem .tileImage {
+            height: 105px;
+        }
 }

@media all and (min-width: 1200px) {
-    .tileImage {
+    .backdropTileItem .tileImage {
        height: 100px;
    }

+    .posterTileItem .tileImage {
+        height: 160px;
+    }
+
    .tileItem {
-        width: 31%;
+        width: 31.5%;
+    }
+
+    .cdTileItem .tileImage {
+        height: 130px;
    }

    .scenePosterViewItem img {
@ -331,24 +395,52 @@
 }

@media all and (min-width: 1440px) {
-    .tileImage {
+    .backdropTileItem .tileImage {
        height: 110px;
    }

+    .posterTileItem .tileImage {
+        height: 150px;
+    }
+
    .tileItem {
        width: 31.5%;
    }
+
+    .cdTileItem .tileImage {
+        height: 155px;
+    }
+
+    .posterTileItem {
+        width: 23.5%;
+    }
 }

@media all and (min-width: 1700px) {

-    .tileImage {
+    .backdropTileItem .tileImage {
        height: 132px;
    }

+    .posterTileItem .tileImage {
+        height: 170px;
+    }
+
    .tileItem {
        width: 32%;
    }
+
+    .posterTileItem {
+        width: 23.5%;
+    }
+
+    .cdTileItem {
+        width: 23.5%;
+    }
+
+    .cdTileItem .tileImage {
+        height: 140px;
+    }
 }


@ -360,6 +452,22 @@
    .tileImage {
        height: 155px;
    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 160px;
+        }
+
+    .cdTileItem {
+        width: 18.8%;
+    }
+
+        .cdTileItem .tileImage {
+            height: 120px;
+        }
 }

@media all and (min-width: 2000px) {
@ -370,6 +478,22 @@
    .tileImage {
        height: 117px;
    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 160px;
+        }
+
+    .cdTileItem {
+        width: 18.8%;
+    }
+
+        .cdTileItem .tileImage {
+            height: 130px;
+        }
 }

@media all and (min-width: 2200px) {
@ -380,6 +504,22 @@
    .tileImage {
        height: 145px;
    }
+
+    .posterTileItem {
+        width: 18.8%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 185px;
+        }
+
+    .cdTileItem {
+        width: 18.8%;
+    }
+
+        .cdTileItem .tileImage {
+            height: 140px;
+        }
 }

@media all and (min-width: 2540px) {
@ -390,6 +530,22 @@
    .tileImage {
        height: 120px;
    }
+
+    .posterTileItem {
+        width: 15.9%;
+    }
+
+        .posterTileItem .tileImage {
+            height: 180px;
+        }
+
+    .cdTileItem {
+        width: 15.8%;
+    }
+
+        .cdTileItem .tileImage {
+            height: 140px;
+        }
 }

 .itemsContainer {
--- a/dashboard-ui/itembynamedetails.html
+++ b/dashboard-ui/itembynamedetails.html
@ -82,6 +82,15 @@
                    <a href="musicgenres.html" data-role="button" class="ui-btn-active">Genres</a>
                </div>
            </div>
+            <div id="artistTabs" class="itemTabs" style="display: none;">
+                <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
+                    <a href="musicrecommended.html" data-role="button">Suggested</a>
+                    <a href="songs.html" data-role="button">Songs</a>
+                    <a href="musicalbums.html" data-role="button">Albums</a>
+                    <a href="musicartists.html" data-role="button" class="ui-btn-active">Artists</a>
+                    <a href="musicgenres.html" data-role="button">Genres</a>
+                </div>
+            </div>
            <div class="detailPageContent">
                <div class="detailPagePrimaryInfo">
                    <div class="itemImageBlock">
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@ -122,6 +122,9 @@
        if (context == "music" && item.Type == "Genre") {
            $('#musicGenreTabs', page).show();
        }
+        if (context == "music" && item.Type == "Artist") {
+            $('#artistTabs', page).show();
+        }
    }

    function renderTabs(page, item) {
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@ -1,5 +1,10 @@
 var LibraryBrowser = (function (window, $) {

+    function encodeName(name) {
+        return name;
+        return encodeURIComponent(name).replace("'", '%27');
+    }
+
    var defaultBackground = "#999;";

    return {
@ -15,6 +20,10 @@
        getPosterDetailViewHtml: function (options) {

            var items = options.items;
+            
+            if (!options.shape) {
+                options.shape = options.preferBackdrop ? "backdrop" : "poster";
+            }

            var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;

@ -27,7 +36,13 @@
                var imgUrl;
                var isDefault = false;

-                html += '<a class="tileItem" href="' + LibraryBrowser.getHref(item, options.context) + '">';
+                var cssClass = "tileItem";
+
+                if (options.shape) {
+                    cssClass += " " + options.shape + "TileItem";
+                }
+
+                html += '<a class="' + cssClass + '" href="' + LibraryBrowser.getHref(item, options.context) + '">';

                if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {

@ -114,7 +129,7 @@
                    isDefault = true;
                }

-                var cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";
+                cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";

                html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>';

@ -272,16 +287,16 @@
                return "itemdetails.html?id=" + item.Id;
            }
            if (item.Type == "Genre") {
-                return "itembynamedetails.html?genre=" + item.Name + "&context=" + itemByNameContext;
+                return "itembynamedetails.html?genre=" + encodeName(item.Name) + "&context=" + itemByNameContext;
            }
            if (item.Type == "Studio") {
-                return "itembynamedetails.html?studio=" + item.Name + "&context=" + itemByNameContext;
+                return "itembynamedetails.html?studio=" + encodeName(item.Name) + "&context=" + itemByNameContext;
            }
            if (item.Type == "Person") {
-                return "itembynamedetails.html?person=" + item.Name + "&context=" + itemByNameContext;
+                return "itembynamedetails.html?person=" + encodeName(item.Name) + "&context=" + itemByNameContext;
            }
            if (item.Type == "Artist") {
-                return "itembynamedetails.html?artist=" + item.Name + "&context=" + itemByNameContext;
+                return "itembynamedetails.html?artist=" + encodeName(item.Name) + "&context=" + itemByNameContext;
            }

            return item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id;
@ -1152,7 +1167,7 @@
                        html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
                    }

-                    html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + item.Studios[i] + '">' + item.Studios[i] + '</a>';
+                    html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + encodeName(item.Studios[i]) + '">' + item.Studios[i] + '</a>';
                }

                elem.show().html(html).trigger('create');
@ -1174,7 +1189,7 @@
                        html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
                    }

-                    html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + item.Genres[i] + '">' + item.Genres[i] + '</a>';
+                    html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + encodeName(item.Genres[i]) + '">' + item.Genres[i] + '</a>';
                }

                elem.show().html(html).trigger('create');
@ -1424,7 +1439,7 @@

            var role = cast.Role || cast.Type;

-            html += '<a href="itembynamedetails.html?context=' + context + '&person=' + cast.Name + '">';
+            html += '<a href="itembynamedetails.html?context=' + context + '&person=' + encodeName(cast.Name) + '">';
            html += '<div class="posterViewItem posterViewItemWithDualText">';

            if (cast.PrimaryImageTag) {
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@ -29,14 +29,16 @@
                    items: result.Items,
                    useAverageAspectRatio: true,
                    preferBackdrop: true,
-                    context: "movies"
+                    context: "movies",
+                    shape: "backdrop"
                });
            }
            else if (view == "Poster") {
                html += LibraryBrowser.getPosterDetailViewHtml({
                    items: result.Items,
                    useAverageAspectRatio: true,
-                    context: "movies"
+                    context: "movies",
+                    shape: "poster"
                });
            }

--- a/dashboard-ui/scripts/musicalbums.js
+++ b/dashboard-ui/scripts/musicalbums.js
@ -25,7 +25,8 @@
            html += LibraryBrowser.getPosterDetailViewHtml({
                items: result.Items,
                useAverageAspectRatio: true,
-                context: "music"
+                context: "music",
+                shape: "cd"
            });

            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);