mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
update menu bar
This commit is contained in:
parent
7caa16c657
commit
aff141f716
@ -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;
|
||||
|
@ -199,6 +199,10 @@
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.viewMenuBar.semiTransparent {
|
||||
background-color: rgba(18, 18, 18, .8);
|
||||
}
|
||||
|
||||
.paperLibraryViewNav {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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() {
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user