update menu bar

This commit is contained in:
Luke Pulverenti 2015-08-18 13:54:29 -04:00
parent 7caa16c657
commit aff141f716
10 changed files with 72 additions and 28 deletions

View File

@ -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;

View File

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

View File

@ -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>
<p class="itemGenres"></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>

View File

@ -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>

View File

@ -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() {

View File

@ -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;
}
};

View File

@ -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');
}
}
}
};

View File

@ -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;

View File

@ -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;
}

View File

@ -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;
}