update detail page

dashboard-ui/css/librarybrowser.css

@@ -401,6 +401,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     position: relative;
 }
 
+.smallBackdrop {
+    height: 500px;
+}
+
 .noSecondaryNavPage .itemBackdrop {
     margin-top: -50px;
 }
@@ -456,15 +460,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 
 .detailUserDataIcons {
-    display: block;
+    display: inline-block;
-    margin-top: 1em;
 }
 
 @media all and (min-width: 540px) {
 
     .detailUserDataIcons {
-        display: inline-block;
-        margin-top: 0;
         margin-left: 1em;
     }
 }
@@ -761,6 +762,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 550px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 300px;
+    }
 }
 
 @media all and (max-height: 800px), (max-width: 700px) {
@@ -768,6 +773,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 450px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 300px;
+    }
 }
 
 @media all and (max-height: 700px) {
@@ -775,6 +784,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 350px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 300px;
+    }
 }
 
 @media all and (max-width: 540px) {
@@ -782,6 +795,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 290px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 200px;
+    }
 }
 
 @media all and (max-height: 540px) {
@@ -789,6 +806,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 250px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 200px;
+    }
 }
 
 @media all and (max-height: 460px) {
@@ -796,6 +817,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 200px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 120px;
+    }
 }
 
 @media all and (max-height: 300px) {
@@ -803,6 +828,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     .itemBackdrop:not(.noBackdrop) {
         height: 150px;
     }
+
+    .smallBackdrop:not(.noBackdrop) {
+        height: 120px;
+    }
 }
 
 @media all and (max-height: 250px) {

dashboard-ui/css/site.css

@@ -716,7 +716,7 @@ paper-input + .fieldDescription {
 }
 
 .ui-page-theme-a {
-    background: #f4f4f4;
+    background: #f5f5f5;
 }
 
     .ui-page-theme-a .content-secondary {

dashboard-ui/edititemmetadata.html

@@ -42,7 +42,6 @@
                                     </div>
 
                                     <div style="padding: 0 0 10px;">
-                                        <h1>${HeaderMetadata}</h1>
                                         <div id="fldContentType" style="display:none;">
                                             <label for="selectContentType">${LabelContentType}</label>
                                             <select id="selectContentType" data-mini="true"></select>

dashboard-ui/scripts/edititemmetadata.js

@@ -1503,13 +1503,13 @@
 
         var selected = parseInt(getParameterByName('tab') || '0');
 
-        if (selected) {
+        page.querySelector('paper-tabs').selected = 0;
 
-            page.querySelector('paper-tabs').selected = 0;
+        if (selected) {
 
             // Looks like a bug in paper-tabs. It won't set the tab if we try to do it too quickly
             setTimeout(function () {
-                page.querySelectorAll('paper-tab')[selected].click();
+                page.querySelector('paper-tabs').selected = selected;
             }, 700);
         }
 

dashboard-ui/scripts/itemdetailpage.js

@@ -67,12 +67,14 @@
             setInitialCollapsibleState(page, item, context, user);
             renderDetails(page, item, context);
 
-            var hasBackdrop = false;
+            var hasBackdrop = LibraryBrowser.renderDetailPageBackdrop(page, item);
-            if (item.Type == 'MusicAlbum1' || item.Type == 'Season1') {
+            //$('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
-                Backdrops.setBackdrops(page, [item]);
+            //Backdrops.setBackdrops(page, [item]);
-                $('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
+            // For these types, make the backdrop a little smaller so that the items are more quickly accessible
+            if (item.Type == "Season" || item.Type == "MusicArtist" || item.Type == "MusicAlbum" || item.Type == "Series" || item.Type == "Playlist" || item.Type == "BoxSet") {
+                page.querySelector('#itemBackdrop').classList.add('smallBackdrop');
             } else {
-                hasBackdrop = LibraryBrowser.renderDetailPageBackdrop(page, item);
+                page.querySelector('#itemBackdrop').classList.remove('smallBackdrop');
             }
 
             var transparentHeader = hasBackdrop && page.classList.contains('noSecondaryNavPage');
@@ -409,7 +411,9 @@
         var topOverview = page.querySelector('.topOverview');
         var bottomOverview = page.querySelector('.bottomOverview');
 
-        if (item.Type == 'MusicAlbum' || item.Type == 'MusicArtist') {
+        var seasonOnBottom = screen.availHeight < 1080 || screen.availWidth < 1920;
+
+        if (item.Type == 'MusicAlbum' || item.Type == 'MusicArtist' || (item.Type == 'Season' && seasonOnBottom) || (item.Type == 'Series' && seasonOnBottom)) {
             LibraryBrowser.renderOverview([bottomOverview], item);
             topOverview.classList.add('hide');
             bottomOverview.classList.remove('hide');

dashboard-ui/strings/html/server.json

@@ -1533,5 +1533,6 @@
     "LabelDataProvider": "Data provider:",
     "OptionSendRecordingsToAutoOrganize": "Enable Auto-Organize for new recordings",
     "OptionSendRecordingsToAutoOrganizeHelp": "New recordings will be sent to the Auto-Organize feature and imported into your media library.",
-    "HeaderDefaultPadding": "Default Padding"
+    "HeaderDefaultPadding": "Default Padding",
+    "HeaderSubtitles": "Subtitles"
 }