From aff141f716f824145455248bf2015c145d9d9261 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 18 Aug 2015 13:54:29 -0400 Subject: [PATCH] update menu bar --- dashboard-ui/css/librarybrowser.css | 15 +++++++++++++-- dashboard-ui/css/librarymenu.css | 4 ++++ dashboard-ui/itemdetails.html | 13 +++++++++---- dashboard-ui/mypreferenceshome.html | 4 ++-- dashboard-ui/scripts/itemdetailpage.js | 16 +++++++++++----- dashboard-ui/scripts/librarybrowser.js | 6 +++++- dashboard-ui/scripts/librarymenu.js | 12 ++++++++++++ dashboard-ui/scripts/mypreferenceshome.js | 18 ++++++------------ dashboard-ui/themes/android.css | 8 ++++++-- dashboard-ui/themes/ios.css | 4 ++++ 10 files changed, 72 insertions(+), 28 deletions(-) diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index b9aa5bcd3..292b9d4b4 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/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; diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 14cdb70b4..145dedb23 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/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; } diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 0e7723bee..f5434cf3e 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -42,9 +42,11 @@ -
+
-
+

+

+
${ButtonPlayTrailer} ${ButtonPlayTrailer} ${ButtonRecord} @@ -77,8 +79,11 @@
-

-

+
+

+

+
+

diff --git a/dashboard-ui/mypreferenceshome.html b/dashboard-ui/mypreferenceshome.html index f402f5b9e..99894a36c 100644 --- a/dashboard-ui/mypreferenceshome.html +++ b/dashboard-ui/mypreferenceshome.html @@ -86,7 +86,7 @@

${LabelSelectFolderGroups}

-
${LabelSelectFolderGroupsHelp}
+
${LabelSelectFolderGroupsHelp}

@@ -112,7 +112,7 @@
-
${LabelSelectViewStylesHelp}
+
${LabelSelectViewStylesHelp}
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 5522872ce..962f35fc4 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/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() { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 2c63054b0..61ed97d81 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/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; } }; diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index b3c1886b4..05592d65f 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/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'); + } + } } }; diff --git a/dashboard-ui/scripts/mypreferenceshome.js b/dashboard-ui/scripts/mypreferenceshome.js index 9ea7678b3..a4afe6ec9 100644 --- a/dashboard-ui/scripts/mypreferenceshome.js +++ b/dashboard-ui/scripts/mypreferenceshome.js @@ -4,21 +4,19 @@ var folderHtml = ''; - folderHtml += '
'; + folderHtml += '
'; folderHtml += result.Items.map(function (i) { var currentHtml = ''; var id = 'chkGroupFolder' + i.Id; - currentHtml += ''; - 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 += ''; + currentHtml += '' + i.Name + ''; return currentHtml; @@ -33,19 +31,17 @@ var folderHtml = ''; - folderHtml += '
'; + folderHtml += '
'; folderHtml += result.map(function (i) { var currentHtml = ''; var id = 'chkPlainFolder' + i.Id; - currentHtml += ''; - var isChecked = user.Configuration.PlainFolderViews.indexOf(i.Id) == -1; var checkedHtml = isChecked ? ' checked="checked"' : ''; - currentHtml += ''; + currentHtml += '' + i.Name + ''; return currentHtml; @@ -66,19 +62,17 @@ var folderHtml = ''; - folderHtml += '
'; + folderHtml += '
'; folderHtml += result.Items.map(function (i) { var currentHtml = ''; var id = 'chkIncludeInLatest' + i.Id; - currentHtml += ''; - var isChecked = user.Configuration.LatestItemsExcludes.indexOf(i.Id) == -1; var checkedHtml = isChecked ? ' checked="checked"' : ''; - currentHtml += ''; + currentHtml += '' + i.Name + ''; return currentHtml; diff --git a/dashboard-ui/themes/android.css b/dashboard-ui/themes/android.css index 8e87fec79..2f76a87ec 100644 --- a/dashboard-ui/themes/android.css +++ b/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; } diff --git a/dashboard-ui/themes/ios.css b/dashboard-ui/themes/ios.css index 2354105d5..457eeb630 100644 --- a/dashboard-ui/themes/ios.css +++ b/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; }