mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update tab fade
This commit is contained in:
Luke Pulverenti
parent
88dc11d90f
commit
4ef47844d8
6 changed files with 56 additions and 51 deletions
|
|
@ -1,4 +1,8 @@
|
|||
/* Fixes the issue of jqm panels altering the page background. */
|
||||
.hidingAnimatedTab{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Fixes the issue of jqm panels altering the page background. */
|
||||
.ui-panel-content-wrap {
|
||||
background: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -334,7 +334,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="popup" class="popupIdentify popupIdentifyItem popup" data-theme="a">
|
||||
<div data-role="popup" class="popupIdentify popupIdentifyItem popup" data-theme="b">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
|
||||
|
||||
|
|
@ -362,12 +362,10 @@
|
|||
</div>
|
||||
|
||||
<p>
|
||||
<button type="submit" data-theme="b" data-icon="search" data-mini="true">
|
||||
${ButtonSearch}
|
||||
</button>
|
||||
<button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
|
||||
${ButtonCancel}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="search"></iron-icon><span>${ButtonSearch}</span></paper-button>
|
||||
</button>
|
||||
<paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
|
|
@ -386,18 +384,16 @@
|
|||
<input id="chkIdentifyReplaceImages" type="checkbox" checked="checked" data-mini="true" />
|
||||
</div>
|
||||
<br />
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonSubmit}
|
||||
</button>
|
||||
<button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
|
||||
${ButtonCancel}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></paper-button>
|
||||
</button>
|
||||
<paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-role="popup" id="popupEditPerson" class="popup" data-theme="a">
|
||||
<div data-role="popup" id="popupEditPerson" class="popup" data-theme="b">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderPersonInfo}</h3>
|
||||
|
|
@ -406,11 +402,13 @@
|
|||
<div data-role="content">
|
||||
<form class="popupEditPersonForm">
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtPersonName">${LabelName}</label>
|
||||
<input type="text" id="txtPersonName" required="required" />
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label for="selectPersonType">${LabelType}</label>
|
||||
<select id="selectPersonType" data-mini="true">
|
||||
|
|
@ -423,7 +421,7 @@
|
|||
<option value="Writer">${OptionWriter}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtPersonRole">${LabelPersonRole}</label>
|
||||
<input type="text" id="txtPersonRole" />
|
||||
|
|
@ -432,19 +430,17 @@
|
|||
<br />
|
||||
<input type="hidden" id="fldPersonIndex" />
|
||||
<p>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonOk}
|
||||
</button>
|
||||
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
|
||||
${ButtonCancel}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
|
||||
</button>
|
||||
<paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-role="popup" class="popup popupAdvancedRefresh" data-theme="a">
|
||||
<div data-role="popup" class="popup popupAdvancedRefresh" data-theme="b">
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
|
||||
<h3>${HeaderRefreshMetadata}</h3>
|
||||
|
|
@ -474,12 +470,10 @@
|
|||
</div>
|
||||
<br />
|
||||
<p>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonOk}
|
||||
</button>
|
||||
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
|
||||
${ButtonCancel}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
|
||||
</button>
|
||||
<paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
|
||||
<div id="tvShowsTabs" class="itemTabs" style="display: none;">
|
||||
<div class="libraryViewNav scopedLibraryViewNav">
|
||||
<a href="tvrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
|
||||
<a href="tvlatest.html"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
|
||||
<a href="tvupcoming.html"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
|
||||
<a href="tvshows.html" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
|
||||
<a href="episodes.html" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
|
||||
<a href="tvgenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
|
||||
<a href="tvpeople.html" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
|
||||
<a href="tvstudios.html" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
|
||||
<a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
|
||||
<a href="tv.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
|
||||
<a href="tv.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
|
||||
<a href="tv.html?tab=3" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
|
||||
<a href="tv.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
|
||||
<a href="tv.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
|
||||
<a href="tv.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
|
||||
<a href="tv.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -270,21 +270,28 @@
|
|||
}, delay);
|
||||
});
|
||||
|
||||
function fadeOutLeftBig(elem, iterations) {
|
||||
function fadeOutLeft(elem, iterations) {
|
||||
var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
|
||||
{ opacity: '0', transform: 'translate3d(-2000px, 0, 0)', offset: 1 }];
|
||||
var timing = { duration: 700, iterations: iterations };
|
||||
{ opacity: '0', transform: 'translate3d(-100%, 0, 0)', offset: 1 }];
|
||||
var timing = { duration: 600, iterations: iterations };
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
|
||||
tabs.addEventListener('iron-select', function () {
|
||||
|
||||
var selected = pages.selected;
|
||||
if (selected != null) {
|
||||
var newValue = this.selected;
|
||||
fadeOutLeftBig(pages.querySelectorAll('.pageTabContent')[selected], 1).onfinish = function () {
|
||||
var currentTab = pages.querySelectorAll('.pageTabContent')[selected];
|
||||
|
||||
if ($.browser.safari) {
|
||||
// Need this it flashes the previous content after the animation
|
||||
currentTab.classList.add('hidingAnimatedTab');
|
||||
}
|
||||
fadeOutLeft(currentTab, 1).onfinish = function () {
|
||||
pages.selected = newValue;
|
||||
|
||||
setTimeout(function () { currentTab.classList.remove('hidingAnimatedTab'); }, 500);
|
||||
};
|
||||
}
|
||||
else {
|
||||
|
|
@ -965,7 +972,7 @@
|
|||
}
|
||||
|
||||
if (item.CollectionType == 'tvshows') {
|
||||
return 'tvrecommended.html?topParentId=' + item.Id;
|
||||
return 'tv.html?topParentId=' + item.Id;
|
||||
}
|
||||
|
||||
if (item.CollectionType == 'music') {
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@
|
|||
var tabs = page.querySelector('paper-tabs');
|
||||
var pages = page.querySelector('neon-animated-pages');
|
||||
|
||||
var baseUrl = 'tvrecommended.html';
|
||||
var baseUrl = 'tv.html';
|
||||
var topParentId = LibraryMenu.getTopParentId();
|
||||
if (topParentId) {
|
||||
baseUrl += '?topParentId=' + topParentId;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="jqmpanel,jqmcollapsible,scripts/tvrecommended">
|
||||
<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="jqmpanel,jqmcollapsible,scripts/tvrecommended">
|
||||
|
||||
<div class="libraryViewNav libraryViewNavWithMinHeight">
|
||||
<paper-tabs hidescrollbuttons noink>
|
||||
|
|
@ -12,20 +12,20 @@
|
|||
<paper-tab><iron-icon icon="new-releases"></iron-icon>${TabLatest}</paper-tab>
|
||||
<paper-tab><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</paper-tab>
|
||||
<paper-tab><iron-icon icon="live-tv"></iron-icon>${TabShows}</paper-tab>
|
||||
<paper-tab><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</paper-tab>
|
||||
<paper-tab class="tvEpisodesTab"><iron-icon icon="video-library"></iron-icon>${TabGenres}</paper-tab>
|
||||
<paper-tab class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</paper-tab>
|
||||
<paper-tab><iron-icon icon="video-library"></iron-icon>${TabGenres}</paper-tab>
|
||||
<paper-tab class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</paper-tab>
|
||||
<paper-tab class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</paper-tab>
|
||||
</paper-tabs>
|
||||
<div class="legacyTabs scopedLibraryViewNav">
|
||||
<a href="tvrecommended.html">${TabSuggestions}</a>
|
||||
<a href="tvrecommended.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
|
||||
<a href="tvrecommended.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
|
||||
<a href="tvrecommended.html?tab=3"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
|
||||
<a href="tvrecommended.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
|
||||
<a href="tvrecommended.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
|
||||
<a href="tvrecommended.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
|
||||
<a href="tvrecommended.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
|
||||
<a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
|
||||
<a href="tv.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
|
||||
<a href="tv.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
|
||||
<a href="tv.html?tab=3"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
|
||||
<a href="tv.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
|
||||
<a href="tv.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
|
||||
<a href="tv.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
|
||||
<a href="tv.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue