1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

backward compateblity

This commit is contained in:
grafixeyehero 2019-12-24 03:17:33 +03:00
parent 5e3b2a642d
commit 7f2cc73e63
2 changed files with 118 additions and 131 deletions

View file

@ -447,6 +447,10 @@
bottom: .75em bottom: .75em
} }
.layout-tv .detailPagePrimaryContainer {
position: relative;
}
.detailPagePrimaryContainer { .detailPagePrimaryContainer {
display: flex; display: flex;
align-items: center; align-items: center;
@ -459,6 +463,7 @@
.infoWrapper { .infoWrapper {
margin: 1.25em 0 0; margin: 1.25em 0 0;
padding-left: 3%;
flex: 1 0 0; flex: 1 0 0;
} }
@ -469,42 +474,25 @@
text-align: left; text-align: left;
} }
.layout-tv .detailPagePrimaryContainer {
position: relative;
}
.detailPageSeconderyContainer { .detailPageSeconderyContainer {
margin: 1.25em 0; margin: 1.25em 0;
display: grid; display: flex;
grid-template-columns: 100%; flex-direction: column;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
} }
.layout-tv .detailPageSeconderyWrapper { .layout-tv .detailImageContainer {
display: flex; position: relative;
}
.layout-tv .detailPageSeconderyContainer {
display: flex;
flex-direction: column;
width: 75%;
} }
.detailImageContainer { .detailImageContainer {
margin: 1.25em 0;
position: sticky; position: sticky;
top: 15%; top: 15%;
float: left; float: left;
} }
.layout-tv .detailImageContainer {
display: flex;
flex-direction: column;
position: relative;
width: 25%;
float: right;
}
.detailPagePrimaryContent { .detailPagePrimaryContent {
position: relative; position: relative;
-webkit-box-flex: 1; -webkit-box-flex: 1;
@ -662,7 +650,8 @@
align-items: center; align-items: center;
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0 margin: 1em 0;
padding-right: 3%;
} }
.recordingFields button { .recordingFields button {

View file

@ -10,7 +10,7 @@
<div class="detailLogo"></div> <div class="detailLogo"></div>
</div> </div>
<div class="detailPageWrapperContainer"> <div class="detailPageWrapperContainer">
<div class="detailPagePrimaryContainer padded-left padded-right"> <div class="detailPagePrimaryContainer">
<div class="infoWrapper infoText"> <div class="infoWrapper infoText">
<div class="nameContainer"></div> <div class="nameContainer"></div>
@ -18,7 +18,7 @@
<div class="itemMiscInfo itemMiscInfo-secondary" style="margin: .7em 0;font-size:92%;"></div> <div class="itemMiscInfo itemMiscInfo-secondary" style="margin: .7em 0;font-size:92%;"></div>
</div> </div>
<div class="mainDetailButtons padded-left"> <div class="mainDetailButtons">
<button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume"> <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
<div class="detailButton-mobile-content"> <div class="detailButton-mobile-content">
@ -126,129 +126,127 @@
</button> </button>
</div> </div>
</div> </div>
<div class="detailPageSeconderyWrapper"> <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
<div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div> <div class="detailPageSeconderyContainer">
<div class="detailPageSeconderyContainer">
<div class="detailPageContent"> <div class="detailPageContent">
<div class="detailPagePrimaryContent padded-left padded-right"> <div class="detailPagePrimaryContent padded-left padded-right">
<div class="detailSection" style="margin-bottom: 0;"> <div class="detailSection" style="margin-bottom: 0;">
<div class="itemMiscInfo nativeName hide"></div> <div class="itemMiscInfo nativeName hide"></div>
<div class="genres hide" style="margin: .7em 0;font-size:92%;"></div> <div class="genres hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="directors hide" style="margin: .7em 0;font-size:92%;"></div> <div class="directors hide" style="margin: .7em 0;font-size:92%;"></div>
<form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x" style="margin: .5em 0;font-size:92%; padding: 0;"> <form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x" style="margin: .5em 0;font-size:92%; padding: 0;">
<div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;"> <div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
<select is="emby-select" class="selectSource detailTrackSelect" label=""></select> <select is="emby-select" class="selectSource detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
<select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
<select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer">
<select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
</div>
</form>
<div class="recordingFields hide" style="margin: .5em 0 1.5em;"></div>
<div class="detailSectionContent">
<div class="itemLastPlayed hide"></div>
<p class="itemGenres"></p>
<h3 class="tagline"></h3>
<p class="overview"></p>
<p id="itemBirthday"></p>
<p id="itemBirthLocation"></p>
<p id="itemDeathDate"></p>
<p id="seriesAirTime"></p>
<div class="itemTags hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="seriesRecordingEditor"></div>
</div> </div>
<div class="selectContainer selectContainer-inline selectVideoContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
<select is="emby-select" class="selectVideo detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectContainer-inline selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
<select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
</div>
<div class="selectContainer selectContainer-inline selectSubtitlesContainer hide trackSelectionFieldContainer">
<select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
</div>
</form>
<div class="recordingFields hide" style="margin: .5em 0 1.5em;"></div>
<div class="detailSectionContent">
<div class="itemLastPlayed hide"></div>
<p class="itemGenres"></p>
<h3 class="tagline"></h3>
<p class="overview"></p>
<p id="itemBirthday"></p>
<p id="itemBirthLocation"></p>
<p id="itemDeathDate"></p>
<p id="seriesAirTime"></p>
<div class="itemTags hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;"></div>
<div class="seriesRecordingEditor"></div>
</div> </div>
</div> </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 padded-left">${HeaderSchedule}</h2>
<div class="seriesTimerSchedule padded-left padded-right"></div> <div class="seriesTimerSchedule padded-left padded-right"></div>
</div>
<div class="collectionItems"></div>
<div class="nextUpSection verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
</div>
<div class="programGuideSection hide verticalSection detailVerticalSection">
<div class="programGuide"></div>
</div>
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left">
<span id="childrenTitle"></span>
</h2>
<div id="childrenContent">
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
</div> </div>
</div>
<div class="collectionItems"></div> <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div>
<div class="nextUpSection verticalSection detailVerticalSection hide"> <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2> <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
<div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div>
<div class="programGuideSection hide verticalSection detailVerticalSection"> <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
<div class="programGuide"></div> <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div>
<div id="childrenCollapsible" class="hide verticalSection detailVerticalSection"> <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left"> <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
<span id="childrenTitle"></span> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
</h2> <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
<div id="childrenContent">
<div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
</div>
</div> </div>
</div>
<div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide"> <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2> <h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div> <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list"></div>
</div>
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
<div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div>
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
<div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div>
<div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div>
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide"> <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2> <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true"> <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
</div>
</div>
<div class="verticalSection itemVerticalSection moreFromArtistSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="castCollapsible" class="verticalSection detailVerticalSection hide">
<h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
<div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list"></div>
</div>
<div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
<div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div>
<div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
<div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
</div>
<div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div>
</div>
<div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
<h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
</div>
</div> </div>
</div> </div>
</div> </div>