cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix some issues with details page and small redesign

Browse Source
This commit is contained in:
MrTimscampi 2020-05-08 18:52:40 +02:00
parent b57c6cacb8
commit d3d4c116a4
4 changed files with 46 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/assets/css/librarybrowser.css
View File

@ -438,7 +438,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;
height: 50vh; height: 40vh;
position: relative; position: relative;
} }
@ -463,10 +463,15 @@
.detailPageContent { .detailPageContent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 2%; padding-left: 32.45vw;
padding-right: 2%; padding-right: 2%;
} }
.layout-desktop .detailPageContent .emby-scroller,
.layout-tv .detailPageContent .emby-scroller {
margin-left: 0;
}
.layout-desktop .noBackdrop .detailPageContent, .layout-desktop .noBackdrop .detailPageContent,
.layout-tv .noBackdrop .detailPageContent { .layout-tv .noBackdrop .detailPageContent {
margin-top: 2.5em; margin-top: 2.5em;
@ -569,6 +574,7 @@
.layout-desktop .detailSticky, .layout-desktop .detailSticky,
.layout-tv .detailSticky { .layout-tv .detailSticky {
margin-top: -7.2em; margin-top: -7.2em;
height: 7.18em;
} }
.layout-desktop .noBackdrop .detailSticky, .layout-desktop .noBackdrop .detailSticky,
@ -595,12 +601,20 @@
} }
.detailImageContainer { .detailImageContainer {
position: relative; position: absolute;
margin-top: -25vh; top: 50%;
margin-bottom: 10vh;
float: left; float: left;
width: 25vw; width: 25vw;
z-index: 3; z-index: 3;
transform: translateY(-50%);
}
.thumbDetailImageContainer {
top: 35%;
}
.squareDetailImageContainer {
top: 40%;
} }
.layout-desktop .noBackdrop .detailImageContainer, .layout-desktop .noBackdrop .detailImageContainer,
@ -613,11 +627,11 @@
} }
.detailLogo { .detailLogo {
width: 30vw; width: 25vw;
height: 25vh; height: 16vh;
position: absolute; position: absolute;
top: 10vh; top: 10vh;
right: 20vw; right: 25vw;
background-size: contain; background-size: contain;
} }

15
src/controllers/itemDetails.js
View File

@ -486,7 +486,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
index: 0, index: 0,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
}); });
page.classList.remove('noBackdrop');
imageLoader.lazyImage(itemBackdropElement, imgUrl); imageLoader.lazyImage(itemBackdropElement, imgUrl);
hasbackdrop = true; hasbackdrop = true;
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) { } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
@ -496,7 +495,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
index: 0, index: 0,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}); });
page.classList.remove('noBackdrop');
imageLoader.lazyImage(itemBackdropElement, imgUrl); imageLoader.lazyImage(itemBackdropElement, imgUrl);
hasbackdrop = true; hasbackdrop = true;
} else if (item.BackdropImageTags && item.BackdropImageTags.length) { } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
@ -506,7 +504,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
index: 0, index: 0,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}); });
page.classList.remove('noBackdrop');
imageLoader.lazyImage(itemBackdropElement, imgUrl); imageLoader.lazyImage(itemBackdropElement, imgUrl);
hasbackdrop = true; hasbackdrop = true;
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
@ -516,7 +513,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
index: 0, index: 0,
tag: item.ParentBackdropImageTags[0] tag: item.ParentBackdropImageTags[0]
}); });
page.classList.remove('noBackdrop');
imageLoader.lazyImage(itemBackdropElement, imgUrl); imageLoader.lazyImage(itemBackdropElement, imgUrl);
hasbackdrop = true; hasbackdrop = true;
} else if (item.ImageTags && item.ImageTags.Thumb) { } else if (item.ImageTags && item.ImageTags.Thumb) {
@ -526,21 +522,12 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
index: 0, index: 0,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
}); });
page.classList.remove('noBackdrop');
imageLoader.lazyImage(itemBackdropElement, imgUrl); imageLoader.lazyImage(itemBackdropElement, imgUrl);
hasbackdrop = true; hasbackdrop = true;
} else { } else {
itemBackdropElement.style.backgroundImage = ''; itemBackdropElement.style.backgroundImage = '';
} }
if ('Person' === item.Type) {
// FIXME: This hides the backdrop on all persons to fix a margin issue. Ideally, a proper fix should be made.
page.classList.add('noBackdrop');
itemBackdropElement.classList.add('personBackdrop');
} else {
itemBackdropElement.classList.remove('personBackdrop');
}
return hasbackdrop; return hasbackdrop;
} }
@ -2126,9 +2113,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
view.addEventListener('viewshow', function (e) { view.addEventListener('viewshow', function (e) {
var page = this; var page = this;
if (layoutManager.mobile) {
libraryMenu.setTransparentMenu(true); libraryMenu.setTransparentMenu(true);
}
if (e.detail.isRestored) { if (e.detail.isRestored) {
if (currentItem) { if (currentItem) {

42
src/itemdetails.html
View File

@ -1,4 +1,4 @@
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true"> <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
<div id="itemBackdrop" class="itemBackdrop"> <div id="itemBackdrop" class="itemBackdrop">
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"> <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
<span class="material-icons play_arrow"></span> <span class="material-icons play_arrow"></span>
@ -110,7 +110,7 @@
<div class="detailPageSecondaryContainer"> <div class="detailPageSecondaryContainer">
<div class="detailImageContainer padded-left"></div> <div class="detailImageContainer padded-left"></div>
<div class="detailPageContent"> <div class="detailPageContent">
<div class="detailPagePrimaryContent padded-left padded-right"> <div class="detailPagePrimaryContent padded-right">
<div class="detailSection"> <div class="detailSection">
<div class="itemMiscInfo nativeName hide"></div> <div class="itemMiscInfo nativeName hide"></div>
@ -164,15 +164,15 @@
</div> </div>
<div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;"> <div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
<h2 class="sectionTitle padded-left">${HeaderSchedule}</h2> <h2 class="sectionTitle">${HeaderSchedule}</h2>
<div class="seriesTimerSchedule padded-left padded-right"></div> <div class="seriesTimerSchedule padded-right"></div>
</div> </div>
<div class="collectionItems"></div> <div class="collectionItems"></div>
<div class="nextUpSection verticalSection detailVerticalSection hide"> <div class="nextUpSection verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2> <h2 class="sectionTitle sectionTitle-cards">${HeaderNextUp}</h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div> <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-right"></div>
</div> </div>
<div class="programGuideSection hide verticalSection detailVerticalSection"> <div class="programGuideSection hide verticalSection detailVerticalSection">
@ -180,64 +180,64 @@
</div> </div>
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection"> <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left"> <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards">
<span id="childrenTitle"></span> <span id="childrenTitle"></span>
</h2> </h2>
<div id="childrenContent"> <div id="childrenContent">
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div> <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-right" style="text-align: left;"></div>
</div> </div>
</div> </div>
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide"> <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderAdditionalParts}</h2> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
</div> </div>
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide"> <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2> <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div> </div>
<div class="verticalSection itemVerticalSection moreFromArtistSection hide"> <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2> <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div> </div>
<div id="castCollapsible" class="verticalSection detailVerticalSection hide"> <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2> <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastCrew}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div> </div>
<div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide"> <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2> <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
<div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div> <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
</div> </div>
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide"> <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderSpecialFeatures}</h2> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderSpecialFeatures}</h2>
<div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
</div> </div>
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide"> <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMusicVideos}</h2> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMusicVideos}</h2>
<div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
</div> </div>
<div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide"> <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div> </div>
<div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide"> <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
</div> </div>

4
src/scripts/itembynamedetailpage.js
View File

@ -71,12 +71,12 @@ define(['connectionManager', 'listView', 'cardBuilder', 'imageLoader', 'libraryB
html += '<div class="' + sectionClass + '" data-type="' + section.type + '">'; html += '<div class="' + sectionClass + '" data-type="' + section.type + '">';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += section.name; html += section.name;
html += '</h2>'; html += '</h2>';
html += '<a is="emby-linkbutton" href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more raised-mini noIcon">' + globalize.translate('ButtonMore') + '</button></a>'; html += '<a is="emby-linkbutton" href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><button is="emby-button" type="button" class="raised more raised-mini noIcon">' + globalize.translate('ButtonMore') + '</button></a>';
html += '</div>'; html += '</div>';
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">'; html += '<div is="emby-itemscontainer" class="itemsContainer padded-right">';
html += '</div>'; html += '</div>';
return html += '</div>'; return html += '</div>';
}).join(''); }).join('');