1
0
Fork 0
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:
Luke Pulverenti 2017-04-29 22:41:55 -04:00
parent 8bd28441e1
commit 67a213fc8c
21 changed files with 16 additions and 37 deletions

File diff suppressed because one or more lines are too long

View file

@ -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

View file

@ -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}

View file

@ -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

View file

@ -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}

View file

@ -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

View file

@ -149,7 +149,6 @@
"LabelCommunityRating": "Community rating:",
"LabelVoteCount": "Vote count:",
"LabelCriticRating": "Critic rating:",
"LabelCriticRatingSummary": "Critic rating summary:",
"LabelAwardSummary": "Award summary:",
"LabelWebsite": "Website:",
"LabelTagline": "Tagline:",

View file

@ -7,7 +7,7 @@
<div class="paging">
</div>
</div>
<div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right vertical-wrap" style="text-align:center;"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right vertical-wrap centered"></div>
<div class="paging">
</div>
</div>

View file

@ -1 +1 @@
define(["emby-tabs","emby-button"],function(){"use strict";function setTabs(view,selectedIndex,builder){var viewMenuBarTabs;if(!view)return void(tabOwnerView&&(document.body.classList.remove("withTallToolbar"),viewMenuBarTabs=queryScope.querySelector(".viewMenuBarTabs"),viewMenuBarTabs.innerHTML="",viewMenuBarTabs.classList.add("hide"),tabOwnerView=null));if(viewMenuBarTabs=queryScope.querySelector(".viewMenuBarTabs"),tabOwnerView||viewMenuBarTabs.classList.remove("hide"),tabOwnerView!==view){var index=0,indexAttribute=null==selectedIndex?"":' data-index="'+selectedIndex+'"';return viewMenuBarTabs.innerHTML='<div is="emby-tabs"'+indexAttribute+' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">'+builder().map(function(t){var tabHtml,tabClass="emby-tab-button";return tabHtml=t.href?'<button onclick="Dashboard.navigate(this.getAttribute(\'data-href\'));" type="button" data-href="'+t.href+'" is="emby-button" class="'+tabClass+'" data-index="'+index+'"><div class="emby-button-foreground">'+t.name+"</div></button>":'<button type="button" is="emby-button" class="'+tabClass+'" data-index="'+index+'"><div class="emby-button-foreground">'+t.name+"</div></button>",index++,tabHtml}).join("")+"</div></div>",document.body.classList.add("withTallToolbar"),tabOwnerView=view,!0}return viewMenuBarTabs.querySelector('[is="emby-tabs"]').selectedIndex(selectedIndex),tabOwnerView=view,!1}function getTabsElement(){return document.querySelector(".tabs-viewmenubar")}var tabOwnerView,queryScope=document.querySelector(".skinHeader");return{setTabs:setTabs,getTabsElement:getTabsElement}});
define(["emby-tabs","emby-button"],function(){"use strict";function setTabs(view,selectedIndex,builder){var headerTabs;if(!view)return void(tabOwnerView&&(document.body.classList.remove("withTallToolbar"),headerTabs=queryScope.querySelector(".headerTabs"),headerTabs.innerHTML="",headerTabs.classList.add("hide"),tabOwnerView=null));if(headerTabs=queryScope.querySelector(".headerTabs"),tabOwnerView||headerTabs.classList.remove("hide"),tabOwnerView!==view){var index=0,indexAttribute=null==selectedIndex?"":' data-index="'+selectedIndex+'"';return headerTabs.innerHTML='<div is="emby-tabs"'+indexAttribute+' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">'+builder().map(function(t){var tabHtml,tabClass="emby-tab-button";return tabHtml=t.href?'<button onclick="Dashboard.navigate(this.getAttribute(\'data-href\'));" type="button" data-href="'+t.href+'" is="emby-button" class="'+tabClass+'" data-index="'+index+'"><div class="emby-button-foreground">'+t.name+"</div></button>":'<button type="button" is="emby-button" class="'+tabClass+'" data-index="'+index+'"><div class="emby-button-foreground">'+t.name+"</div></button>",index++,tabHtml}).join("")+"</div></div>",document.body.classList.add("withTallToolbar"),tabOwnerView=view,!0}return headerTabs.querySelector('[is="emby-tabs"]').selectedIndex(selectedIndex),tabOwnerView=view,!1}function getTabsElement(){return document.querySelector(".tabs-viewmenubar")}var tabOwnerView,queryScope=document.querySelector(".skinHeader");return{setTabs:setTabs,getTabsElement:getTabsElement}});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -75,7 +75,7 @@
</div>
<div class="pageTabContent" data-index="4">
<div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right vertical-wrap"></div>
<div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right vertical-wrap centered"></div>
</div>
<div class="pageTabContent" id="songsTab" data-index="5">
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:0 .5em 1em;">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -68,23 +68,6 @@
<div id="items"></div>
</div>
<div class="pageTabContent" id="studiosTab" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div is="emby-itemscontainer" id="items" class="itemsContainer padded-left padded-right vertical-wrap" style="text-align: center;"></div>
</div>
<div class="pageTabContent" id="episodesTab" data-index="6">
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:0 .5em 1em;">
<div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
</div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div>
</div>
</div>
</div>