mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
improve large screen header layout
This commit is contained in:
parent
8bd28441e1
commit
67a213fc8c
21 changed files with 16 additions and 37 deletions
File diff suppressed because one or more lines are too long
|
@ -1 +1 @@
|
|||
define(["dom","layoutManager","browser","css!./headroom"],function(dom,layoutManager,browser){"use strict";function Debouncer(callback){this.callback=callback,this.ticking=!1}function Headroom(elems,options){options=Object.assign(Headroom.options,options||{}),this.lastKnownScrollY=0,this.elems=elems,this.debouncer=new Debouncer(this.update.bind(this)),this.offset=options.offset,this.scroller=options.scroller,this.initialised=!1,this.initialClass=options.initialClass,this.unPinnedClass=options.unPinnedClass,this.upTolerance=options.upTolerance,this.downTolerance=options.downTolerance}var requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;return Debouncer.prototype={constructor:Debouncer,update:function(){this.callback&&this.callback(),this.ticking=!1},handleEvent:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)}},Headroom.prototype={constructor:Headroom,init:function(){if(browser.supportsCssAnimation()){for(var i=0,length=this.elems.length;i<length;i++)this.elems[i].classList.add(this.initialClass);this.attachEvent()}return this},add:function(elem){browser.supportsCssAnimation()&&(elem.classList.add(this.initialClass),this.elems.push(elem))},remove:function(elem){elem.classList.remove(this.unPinnedClass,this.initialClass);var i=this.elems.indexOf(elem);i!==-1&&this.elems.splice(i,1)},destroy:function(){this.initialised=!1;for(var i=0,length=this.elems.length;i<length;i++)this.elems[i].classList.remove(this.unPinnedClass,this.initialClass);dom.removeEventListener(this.scroller,"scroll",this.debouncer,{capture:!1,passive:!0})},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,dom.addEventListener(this.scroller,"scroll",this.debouncer,{capture:!1,passive:!0}),this.debouncer.handleEvent())},clear:function(){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;classList.remove(this.unPinnedClass)}},unpin:function(){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;classList.add(this.unPinnedClass)}},pin:function(scrollY){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;scrollY&&layoutManager.tv?classList.add(this.unPinnedClass):classList.remove(this.unPinnedClass)}},getScrollY:function(){var scroller=this.scroller;if(scroller.getScrollPosition)return scroller.getScrollPosition();var pageYOffset=scroller.pageYOffset;if(void 0!==pageYOffset)return pageYOffset;var scrollTop=scroller.scrollTop;return void 0!==scrollTop?scrollTop:(document.documentElement||document.body).scrollTop},toleranceExceeded:function(currentScrollY,direction){return Math.abs(currentScrollY-this.lastKnownScrollY)>=this[direction+"Tolerance"]},shouldUnpin:function(currentScrollY,toleranceExceeded){var scrollingDown=currentScrollY>this.lastKnownScrollY,pastOffset=currentScrollY>=this.offset;return scrollingDown&&pastOffset&&toleranceExceeded},shouldPin:function(currentScrollY,toleranceExceeded){var scrollingUp=currentScrollY<this.lastKnownScrollY,pastOffset=currentScrollY<=this.offset;return scrollingUp&&toleranceExceeded||pastOffset},update:function(){var currentScrollY=this.getScrollY(),scrollDirection=currentScrollY>this.lastKnownScrollY?"down":"up",toleranceExceeded=this.toleranceExceeded(currentScrollY,scrollDirection);currentScrollY<0||(this.shouldUnpin(currentScrollY,toleranceExceeded)?this.unpin():this.shouldPin(currentScrollY,toleranceExceeded)?this.pin(currentScrollY):this.clear(),this.lastKnownScrollY=currentScrollY)}},Headroom.options={upTolerance:0,downTolerance:0,offset:0,scroller:window,initialClass:"headroom",unPinnedClass:"headroom--unpinned"},Headroom});
|
||||
define(["dom","layoutManager","browser","css!./headroom"],function(dom,layoutManager,browser){"use strict";function Debouncer(callback){this.callback=callback,this.ticking=!1}function Headroom(elems,options){options=Object.assign(Headroom.options,options||{}),this.lastKnownScrollY=0,this.elems=elems,this.debouncer=new Debouncer(this.update.bind(this)),this.offset=options.offset,this.scroller=options.scroller,this.initialised=!1,this.initialClass=options.initialClass,this.unPinnedClass=options.unPinnedClass,this.upTolerance=options.upTolerance,this.downTolerance=options.downTolerance}var requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame;return Debouncer.prototype={constructor:Debouncer,update:function(){this.callback&&this.callback(),this.ticking=!1},handleEvent:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)}},Headroom.prototype={constructor:Headroom,init:function(){if(browser.supportsCssAnimation()&&!browser.firefox){for(var i=0,length=this.elems.length;i<length;i++)this.elems[i].classList.add(this.initialClass);this.attachEvent()}return this},add:function(elem){browser.supportsCssAnimation()&&!browser.firefox&&(elem.classList.add(this.initialClass),this.elems.push(elem))},remove:function(elem){elem.classList.remove(this.unPinnedClass,this.initialClass);var i=this.elems.indexOf(elem);i!==-1&&this.elems.splice(i,1)},destroy:function(){this.initialised=!1;for(var i=0,length=this.elems.length;i<length;i++)this.elems[i].classList.remove(this.unPinnedClass,this.initialClass);dom.removeEventListener(this.scroller,"scroll",this.debouncer,{capture:!1,passive:!0})},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,dom.addEventListener(this.scroller,"scroll",this.debouncer,{capture:!1,passive:!0}),this.debouncer.handleEvent())},clear:function(){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;classList.remove(this.unPinnedClass)}},unpin:function(){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;classList.add(this.unPinnedClass)}},pin:function(scrollY){for(var i=0,length=this.elems.length;i<length;i++){var classList=this.elems[i].classList;scrollY&&layoutManager.tv?classList.add(this.unPinnedClass):classList.remove(this.unPinnedClass)}},getScrollY:function(){var scroller=this.scroller;if(scroller.getScrollPosition)return scroller.getScrollPosition();var pageYOffset=scroller.pageYOffset;if(void 0!==pageYOffset)return pageYOffset;var scrollTop=scroller.scrollTop;return void 0!==scrollTop?scrollTop:(document.documentElement||document.body).scrollTop},toleranceExceeded:function(currentScrollY,direction){return Math.abs(currentScrollY-this.lastKnownScrollY)>=this[direction+"Tolerance"]},shouldUnpin:function(currentScrollY,toleranceExceeded){var scrollingDown=currentScrollY>this.lastKnownScrollY,pastOffset=currentScrollY>=this.offset;return scrollingDown&&pastOffset&&toleranceExceeded},shouldPin:function(currentScrollY,toleranceExceeded){var scrollingUp=currentScrollY<this.lastKnownScrollY,pastOffset=currentScrollY<=this.offset;return scrollingUp&&toleranceExceeded||pastOffset},update:function(){var currentScrollY=this.getScrollY(),scrollDirection=currentScrollY>this.lastKnownScrollY?"down":"up",toleranceExceeded=this.toleranceExceeded(currentScrollY,scrollDirection);currentScrollY<0||(this.shouldUnpin(currentScrollY,toleranceExceeded)?this.unpin():this.shouldPin(currentScrollY,toleranceExceeded)?this.pin(currentScrollY):this.clear(),this.lastKnownScrollY=currentScrollY)}},Headroom.options={upTolerance:0,downTolerance:0,offset:0,scroller:window,initialClass:"headroom",unPinnedClass:"headroom--unpinned"},Headroom});
|
File diff suppressed because one or more lines are too long
|
@ -1 +1 @@
|
|||
.imageEditor-buttons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin:1em 0}.first-imageEditor-buttons{margin-top:2em}@media all and (min-width:1200px){.imageEditorCard{width:20%}}
|
||||
.imageEditor-buttons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;margin:1em 0}.first-imageEditor-buttons{margin-top:2em}
|
|
@ -1 +1 @@
|
|||
.cardOverlayTarget{position:absolute;right:0;left:0;bottom:0;top:0;background-color:rgba(0,0,0,.85);z-index:1;line-height:initial;font-size:initial;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateY(100%);transform:translateY(100%)}.cardOverlayTarget-open{-webkit-transform:none;transform:none}.cardOverlayInner{padding:.5em;color:#fff;text-align:left;font-size:90%}.cardOverlayMediaInfo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:1em 0;color:#ddd}.cardOverlayButtons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap}.cardOverlayFab{margin-right:.25em!important}.withHoverMenu{overflow:hidden}@media all and (max-width:1200px){.cardOverlayInner{padding-left:7px;padding-right:7px}}
|
||||
.cardOverlayTarget{position:absolute;right:0;left:0;bottom:0;top:0;background-color:rgba(0,0,0,.85);z-index:1;line-height:initial;font-size:initial;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateY(100%);transform:translateY(100%)}.cardOverlayTarget-open{-webkit-transform:none;transform:none}.cardOverlayInner{padding:.5em;color:#fff;text-align:left;font-size:90%}.cardOverlayMediaInfo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:1em 0;color:#ddd}.cardOverlayButtons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap}.cardOverlayFab{margin-right:.25em!important}.withHoverMenu{overflow:hidden}
|
File diff suppressed because one or more lines are too long
|
@ -1 +1 @@
|
|||
.recordingButton{margin-left:0;min-width:10em}.recordingIcon{font-size:1.3em!important}.recordingIcon-active{color:#c33}.manageButtonText{text-transform:none}.recordSeriesContainer{margin-bottom:.8em}.recordingFields-buttons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}@media all and (max-width:440px){.manageButtonText{display:none!important}.recordingButton{width:auto;margin-right:1.5em!important}}@media all and (min-width:440px){.manageButtonIcon{font-size:90%!important}}
|
||||
.recordingButton{margin-left:0;min-width:10em}.recordingIcon{font-size:1.3em!important}.recordingIcon-active{color:#c33}.recordSeriesContainer{margin-bottom:.8em}.recordingFields-buttons{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
|
|
@ -23,7 +23,6 @@
|
|||
</button>
|
||||
</div>
|
||||
<button is="emby-button" type="button" class="button-flat secondaryText manageRecordingButton btnManageSeriesRecording hide">
|
||||
<i class="md-icon manageButtonIcon">settings</i>
|
||||
<span class="manageButtonText">${SeriesSettings}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -36,7 +35,6 @@
|
|||
</button>
|
||||
</div>
|
||||
<button is="emby-button" type="button" class="button-flat secondaryText manageRecordingButton btnManageRecording hide">
|
||||
<i class="md-icon manageButtonIcon">settings</i>
|
||||
<span class="manageButtonText">${Settings}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -149,7 +149,6 @@
|
|||
"LabelCommunityRating": "Community rating:",
|
||||
"LabelVoteCount": "Vote count:",
|
||||
"LabelCriticRating": "Critic rating:",
|
||||
"LabelCriticRatingSummary": "Critic rating summary:",
|
||||
"LabelAwardSummary": "Award summary:",
|
||||
"LabelWebsite": "Website:",
|
||||
"LabelTagline": "Tagline:",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue