update menu bar

dashboard-ui/css/librarybrowser.css

@@ -391,13 +391,18 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-size: cover;
     background-position: center 15%;
     background-repeat: no-repeat;
-    height: 500px;
+    height: 560px;
     position: relative;
 }
 
+.noSecondaryNavPage .itemBackdrop {
+    margin-top: -50px;
+}
+
 .noBackdrop {
     height: 170px;
     background: #181818;
+    margin-top: 0 !important;
 }
 
 .itemBackdropContent {
@@ -426,7 +431,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .lnkSibling {
     position: absolute;
-    top: 15px;
+    bottom: 0;
     text-decoration: none;
     font-weight: normal !important;
     display: none;
@@ -444,6 +449,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         display: block;
     }
 
+@media all and (max-width: 1200px) {
+
+    .lnkSibling {
+        display: none !important;
+    }
+}
 
 .lnkPreviousItem {
     left: 10px;

dashboard-ui/css/librarymenu.css

@@ -199,6 +199,10 @@
     background-color: #121212;
 }
 
+    .viewMenuBar.semiTransparent {
+        background-color: rgba(18, 18, 18, .8);
+    }
+
 .paperLibraryViewNav {
     background-color: transparent !important;
 }

dashboard-ui/itemdetails.html

@@ -42,9 +42,11 @@
                         <span class="itemCommunityRating" style="margin-left:1em;"></span>
                     </div>
                 </div>
-                <div class="desktopDetails">
+                <div class="desktopDetails" style="padding-top:5px;">
 
-                    <div class="detailButtonsContainer" style="padding-top:5px;">
+                    <p class="artist"></p>
+                    <p class="itemGenres"></p>
+                    <div class="detailButtonsContainer">
                         <paper-button raised class="subdued btnPlayTrailer hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlayTrailer}</span></paper-button>
                         <a class="btnPlayExternalTrailer hide clearLink" href="#" target="_blank"><paper-button raised class="subdued"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlayTrailer}</span></paper-button></a>
                         <paper-button raised class="subdued btnRecord hide"><iron-icon icon="videocam"></iron-icon><span>${ButtonRecord}</span></paper-button>
@@ -77,8 +79,11 @@
         <div data-role="content" style="padding-top:0;clear:both;">
             <div class="detailPageContent">
                 <div class="detailSection">
-                    <p id="artist"></p>
+                    <div class="mobileDetails">
+                        <p class="artist"></p>
                         <p class="itemGenres"></p>
+                    </div>
+                    <h2 class="tagline"></h2>
                     <p class="itemOverview smoothScrollY"></p>
                     <p id="seriesAirTime"></p>
                     <p class="airDate"></p>

dashboard-ui/mypreferenceshome.html

@@ -86,7 +86,7 @@
                         <div>
                             <p>${LabelSelectFolderGroups}</p>
                             <div class="folderGroupList"></div>
-                            <div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div>
+                            <div class="fieldDescription paperCheckboxFieldDescription">${LabelSelectFolderGroupsHelp}</div>
                         </div>
 
                         <br />
@@ -112,7 +112,7 @@
                         <div class="viewStylesList">
 
                         </div>
-                        <div class="fieldDescription">${LabelSelectViewStylesHelp}</div>
+                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelSelectViewStylesHelp}</div>
                     </div>
                 </div>
 

dashboard-ui/scripts/itemdetailpage.js

@@ -33,13 +33,18 @@
             setInitialCollapsibleState(page, item, context, user);
             renderDetails(page, item, context);
 
+            var hasBackdrop = false;
             if (item.Type == 'MusicAlbum1' || item.Type == 'Season1') {
                 Backdrops.setBackdrops(page, [item]);
                 $('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
             } else {
-                LibraryBrowser.renderDetailPageBackdrop(page, item);
+                hasBackdrop = LibraryBrowser.renderDetailPageBackdrop(page, item);
             }
 
+            var transparentHeader = hasBackdrop && page.classList.contains('noSecondaryNavPage');
+
+            LibraryMenu.setTransparentMenu(transparentHeader);
+
             var canPlay = false;
 
             if (item.Type == 'Program') {
@@ -311,9 +316,9 @@
         renderSiblingLinks(page, item, context);
 
         if (item.Taglines && item.Taglines.length) {
-            $('#itemTagline', page).html(item.Taglines[0]).show();
+            $('.tagline', page).html(item.Taglines[0]).show();
         } else {
-            $('#itemTagline', page).hide();
+            $('.tagline', page).hide();
         }
 
         LibraryBrowser.renderOverview(page.querySelectorAll('.itemOverview'), item);
@@ -350,9 +355,9 @@
         }
 
         if (item.ArtistItems && item.ArtistItems.length && item.Type != "MusicAlbum") {
-            $('#artist', page).show().html(getArtistLinksHtml(item.ArtistItems, context)).trigger('create');
+            $('.artist', page).show().html(getArtistLinksHtml(item.ArtistItems, context)).trigger('create');
         } else {
-            $('#artist', page).hide();
+            $('.artist', page).hide();
         }
 
         if (item.MediaSources && item.MediaSources.length && item.Path) {
@@ -1697,6 +1702,7 @@
         var page = this;
 
         Events.off(ApiClient, 'websocketmessage', onWebSocketMessage);
+        LibraryMenu.setTransparentMenu(false);
     });
 
     function itemDetailPage() {

dashboard-ui/scripts/librarybrowser.js

@@ -3236,6 +3236,7 @@
             var screenWidth = screen.availWidth;
 
             var imgUrl;
+            var hasbackdrop = false;
 
             if (item.BackdropImageTags && item.BackdropImageTags.length) {
 
@@ -3247,6 +3248,7 @@
                 });
 
                 ImageLoader.lazyImage($('#itemBackdrop', page).removeClass('noBackdrop')[0], imgUrl);
+                hasbackdrop = true;
             }
             else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
 
@@ -3258,12 +3260,14 @@
                 });
 
                 ImageLoader.lazyImage($('#itemBackdrop', page).removeClass('noBackdrop')[0], imgUrl);
-
+                hasbackdrop = true;
             }
             else {
 
                 $('#itemBackdrop', page).addClass('noBackdrop').css('background-image', 'none');
             }
+
+            return hasbackdrop;
         }
     };
 

dashboard-ui/scripts/librarymenu.js

@@ -575,6 +575,18 @@
                     mainDrawerButton.classList.remove('hide');
                 }
             }
+        },
+        setTransparentMenu: function (transparent) {
+
+            var viewMenuBar = document.querySelector('.viewMenuBar');
+
+            if (viewMenuBar) {
+                if (transparent) {
+                    viewMenuBar.classList.add('semiTransparent');
+                } else {
+                    viewMenuBar.classList.remove('semiTransparent');
+                }
+            }
         }
     };
 

dashboard-ui/scripts/mypreferenceshome.js

@@ -4,21 +4,19 @@
 
         var folderHtml = '';
 
-        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += '<div class="paperCheckboxList">';
         folderHtml += result.Items.map(function (i) {
 
             var currentHtml = '';
 
             var id = 'chkGroupFolder' + i.Id;
 
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
             var isChecked = (user.Configuration.ExcludeFoldersFromGrouping != null && user.Configuration.ExcludeFoldersFromGrouping.indexOf(i.Id) == -1) ||
                 user.Configuration.GroupedFolders.indexOf(i.Id) != -1;
 
             var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-            currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+            currentHtml += '<paper-checkbox class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '>' + i.Name + '</paper-checkbox>';
 
             return currentHtml;
 
@@ -33,19 +31,17 @@
 
         var folderHtml = '';
 
-        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += '<div class="paperCheckboxList">';
         folderHtml += result.map(function (i) {
 
             var currentHtml = '';
 
             var id = 'chkPlainFolder' + i.Id;
 
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
             var isChecked = user.Configuration.PlainFolderViews.indexOf(i.Id) == -1;
             var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-            currentHtml += '<input class="chkPlainFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+            currentHtml += '<paper-checkbox class="chkPlainFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '>' + i.Name + '</paper-checkbox>';
 
             return currentHtml;
 
@@ -66,19 +62,17 @@
 
         var folderHtml = '';
 
-        folderHtml += '<div data-role="controlgroup">';
+        folderHtml += '<div class="paperCheckboxList">';
         folderHtml += result.Items.map(function (i) {
 
             var currentHtml = '';
 
             var id = 'chkIncludeInLatest' + i.Id;
 
-            currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
-
             var isChecked = user.Configuration.LatestItemsExcludes.indexOf(i.Id) == -1;
             var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-            currentHtml += '<input class="chkIncludeInLatest" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
+            currentHtml += '<paper-checkbox class="chkIncludeInLatest" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '>' + i.Name + '</paper-checkbox>';
 
             return currentHtml;
 

dashboard-ui/themes/android.css

@@ -2,6 +2,10 @@
     background-color: #1b1b1b;
 }
 
+    .viewMenuBar.semiTransparent {
+        background-color: rgba(27, 27, 27, .8);
+    }
+
 .ui-page-theme-b:not(.pageWithAbsoluteTabs), .pageWithAbsoluteTabs .pageBackground {
     background-color: #2b2b2b;
 }
@@ -19,9 +23,9 @@
 }
 
 .libraryViewNav a {
-    font-weight: 500!important;
+    font-weight: 500 !important;
 }
 
 paper-tab {
-    font-weight: 500!important;
+    font-weight: 500 !important;
 }

dashboard-ui/themes/ios.css

@@ -12,6 +12,10 @@ html, body, .ui-btn, .pageTitle {
     background-color: rgba(28,28,28,.97);
 }
 
+    .viewMenuBar.semiTransparent {
+        background-color: rgba(28, 28, 28, .8);
+    }
+
 .backdropPage.ui-page-theme-b {
     background-color: rgba(28,28,28,.92) !important;
 }