diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 755b417f5b..9a74085917 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -36,6 +36,16 @@ button { margin-right: -0.6em; } +/* TODO replace this with a proper fix */ +/* doesnt work on mobile devices */ +/* negative margin fixes annoying misalignment with cards and title */ +@media all and (max-width:50em) { + .itemsContainer { + margin-left: 0; + margin-right: 0; + } +} + .vertical-list { display: flex; flex-direction: column; diff --git a/src/components/emby-itemscontainer/emby-itemscontainer.js b/src/components/emby-itemscontainer/emby-itemscontainer.js index 2b002c70e8..7cfb3e4a4a 100644 --- a/src/components/emby-itemscontainer/emby-itemscontainer.js +++ b/src/components/emby-itemscontainer/emby-itemscontainer.js @@ -1,13 +1,11 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'registerElement'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) { 'use strict'; - var ItemsContainerProtoType = Object.create(HTMLDivElement.prototype); + var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); function onClick(e) { - var itemsContainer = this; var target = e.target; - var multiSelect = itemsContainer.multiSelect; if (multiSelect) { @@ -20,22 +18,18 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function disableEvent(e) { - e.preventDefault(); e.stopPropagation(); return false; } function onContextMenu(e) { - var itemsContainer = this; - var target = e.target; var card = dom.parentWithAttribute(target, 'data-id'); // check for serverId, it won't be present on selectserver if (card && card.getAttribute('data-serverid')) { - inputManager.trigger('menu', { sourceElement: card }); @@ -52,8 +46,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; } - ItemsContainerProtoType.enableMultiSelect = function (enabled) { - + ItemsContainerPrototype.enableMultiSelect = function (enabled) { var current = this.multiSelect; if (!enabled) { @@ -78,7 +71,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; function onDrop(evt, itemsContainer) { - var el = evt.item; var newIndex = evt.newIndex; @@ -86,9 +78,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var playlistId = el.getAttribute('data-playlistid'); if (!playlistId) { - var oldIndex = evt.oldIndex; - el.dispatchEvent(new CustomEvent('itemdrop', { detail: { oldIndex: oldIndex, @@ -107,27 +97,18 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', loading.show(); apiClient.ajax({ - url: apiClient.getUrl('Playlists/' + playlistId + '/Items/' + itemId + '/Move/' + newIndex), - type: 'POST' - }).then(function () { - loading.hide(); - }, function () { - loading.hide(); - itemsContainer.refreshItems(); }); } - ItemsContainerProtoType.enableDragReordering = function (enabled) { - + ItemsContainerPrototype.enableDragReordering = function (enabled) { var current = this.sortable; - if (!enabled) { if (current) { current.destroy(); @@ -142,15 +123,12 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var self = this; require(['sortable'], function (Sortable) { - self.sortable = new Sortable(self, { - draggable: ".listItem", handle: '.listViewDragHandle', // dragging ended - onEnd: function (/**Event*/evt) { - + onEnd: function (evt) { return onDrop(evt, self); } }); @@ -169,17 +147,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', // TODO: Check user data change reason? if (eventsToMonitor.indexOf('markfavorite') !== -1) { - itemsContainer.notifyRefreshNeeded(); - } - else if (eventsToMonitor.indexOf('markplayed') !== -1) { - + } else if (eventsToMonitor.indexOf('markplayed') !== -1) { itemsContainer.notifyRefreshNeeded(); } } function getEventsToMonitor(itemsContainer) { - var monitor = itemsContainer.getAttribute('data-monitor'); if (monitor) { return monitor.split(','); @@ -193,7 +167,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { - itemsContainer.notifyRefreshNeeded(); return; } @@ -208,10 +181,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onSeriesTimerCreated(e, apiClient, data) { - var itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { - itemsContainer.notifyRefreshNeeded(); return; } @@ -219,42 +190,33 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function onTimerCancelled(e, apiClient, data) { var itemsContainer = this; - if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { - itemsContainer.notifyRefreshNeeded(); return; } - var id = data.Id; - require(['cardBuilder'], function (cardBuilder) { - cardBuilder.onTimerCancelled(id, itemsContainer); + cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } function onSeriesTimerCancelled(e, apiClient, data) { - var itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { - itemsContainer.notifyRefreshNeeded(); return; } - var id = data.Id; - require(['cardBuilder'], function (cardBuilder) { - cardBuilder.onSeriesTimerCancelled(id, itemsContainer); + cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } function onLibraryChanged(e, apiClient, data) { - var itemsContainer = this; + var eventsToMonitor = getEventsToMonitor(itemsContainer); if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { - // yes this is an assumption return; } @@ -280,25 +242,17 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onPlaybackStopped(e, stopInfo) { - var itemsContainer = this; - var state = stopInfo.state; var eventsToMonitor = getEventsToMonitor(itemsContainer); if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { - if (eventsToMonitor.indexOf('videoplayback') !== -1) { - itemsContainer.notifyRefreshNeeded(true); return; } - } - - else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') { - + } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') { if (eventsToMonitor.indexOf('audioplayback') !== -1) { - itemsContainer.notifyRefreshNeeded(true); return; } @@ -306,7 +260,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function addNotificationEvent(instance, name, handler, owner) { - var localHandler = handler.bind(instance); owner = owner || serverNotifications; events.on(owner, name, localHandler); @@ -314,7 +267,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function removeNotificationEvent(instance, name, owner) { - var handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; @@ -323,13 +275,11 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } } - ItemsContainerProtoType.createdCallback = function () { - + ItemsContainerPrototype.createdCallback = function () { this.classList.add('itemsContainer'); }; - ItemsContainerProtoType.attachedCallback = function () { - + ItemsContainerPrototype.attachedCallback = function () { this.addEventListener('click', onClick); if (browser.touch) { @@ -365,8 +315,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } }; - ItemsContainerProtoType.detachedCallback = function () { - + ItemsContainerPrototype.detachedCallback = function () { clearRefreshInterval(this); this.enableMultiSelect(false); @@ -374,6 +323,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', this.removeEventListener('click', onClick); this.removeEventListener('contextmenu', onContextMenu); this.removeEventListener('contextmenu', disableEvent); + itemShortcuts.off(this, getShortcutOptions()); removeNotificationEvent(this, 'UserDataChanged'); @@ -389,15 +339,12 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', this.parentContainer = null; }; - ItemsContainerProtoType.pause = function () { - + ItemsContainerPrototype.pause = function () { clearRefreshInterval(this, true); - this.paused = true; }; - ItemsContainerProtoType.resume = function (options) { - + ItemsContainerPrototype.resume = function (options) { this.paused = false; var refreshIntervalEndTime = this.refreshIntervalEndTime; @@ -405,9 +352,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var remainingMs = refreshIntervalEndTime - new Date().getTime(); if (remainingMs > 0 && !this.needsRefresh) { - resetRefreshInterval(this, remainingMs); - } else { this.needsRefresh = true; this.refreshIntervalEndTime = null; @@ -421,8 +366,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return Promise.resolve(); }; - ItemsContainerProtoType.refreshItems = function () { - + ItemsContainerPrototype.refreshItems = function () { if (!this.fetchData) { return Promise.resolve(); } @@ -437,8 +381,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return this.fetchData().then(onDataFetched.bind(this)); }; - ItemsContainerProtoType.notifyRefreshNeeded = function (isInForeground) { - + ItemsContainerPrototype.notifyRefreshNeeded = function (isInForeground) { if (this.paused) { this.needsRefresh = true; return; @@ -457,9 +400,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; function clearRefreshInterval(itemsContainer, isPausing) { - if (itemsContainer.refreshInterval) { - clearInterval(itemsContainer.refreshInterval); itemsContainer.refreshInterval = null; @@ -470,7 +411,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function resetRefreshInterval(itemsContainer, intervalMs) { - clearRefreshInterval(itemsContainer); if (!intervalMs) { @@ -484,7 +424,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onDataFetched(result) { - var items = result.Items || result; var parentContainer = this.parentContainer; @@ -496,10 +435,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } } - // Scroll back up so they can see the results from the beginning - // TODO: Find scroller - //window.scrollTo(0, 0); - var activeElement = document.activeElement; var focusId; var hasActiveElement; @@ -528,12 +463,11 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', if (focusId) { var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); if (newElement) { - try { focusManager.focus(newElement); return; - } - catch (err) { + } catch (err) { + console.log(err); } } } @@ -542,7 +476,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } document.registerElement('emby-itemscontainer', { - prototype: ItemsContainerProtoType, + prototype: ItemsContainerPrototype, extends: 'div' }); }); \ No newline at end of file diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css index 04b2ce68c6..168a6b3805 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css @@ -1,60 +1,11 @@ -.emby-scrollbuttons-scroller { - position: relative; -} - -.scrollbuttoncontainer { +.emby-scrollbuttons { position: absolute; - top: 10%; - bottom: 35%; + top: 0; + right: 0; align-items: center; justify-content: center; z-index: 1; - font-size: 3em; - color: #fff; - display: none; - overflow: hidden; -} - -.scrollbuttoncontainer-left { - background: rgba(20, 20, 20, .5); - background: -moz-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%); - background: -webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%); - background: linear-gradient(to right,#000,rgba(0,0,0,0)); -} - -.scrollbuttoncontainer-right { - background: rgba(20, 20, 20, .5); - background: -moz-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%); - background: -webkit-linear-gradient(right,#000 0,rgba(0,0,0,0) 100%); - background: linear-gradient(to left,#000,rgba(0,0,0,0)); -} - -.emby-scrollbuttons-scroller:hover .scrollbuttoncontainer { + color: #ffffff; display: flex; -} - -.scrollbuttoncontainer-left { - left: 0; -} - -.scrollbuttoncontainer-right { - right: 0; -} - -.emby-scrollbuttons-scrollbutton { - margin: 0 -.2em; - transition: transform 160ms ease-out; -} - -.scrollbuttoncontainer:hover > .emby-scrollbuttons-scrollbutton { - transform: scale(1.3, 1.3); -} - -.emby-scrollbuttons-scrollbutton:after { - content: ''; - display: none !important; -} - -.emby-scrollbuttons-scrollbutton:focus { - color: inherit !important; -} + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js index c325ad9fd5..7be865098a 100644 --- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js @@ -3,30 +3,20 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); - EmbyScrollButtonsPrototype.createdCallback = function () { - - }; - - function getScrollButtonContainerHtml(direction) { + EmbyScrollButtonsPrototype.createdCallback = function () {}; + function getScrollButtonHtml(direction) { var html = ''; - - var hide = direction === 'left' ? ' hide' : ''; - html += '
'; - var icon = direction === 'left' ? '' : ''; - html += ''; - html += '
'; - return html; } function getScrollPosition(parent) { - if (parent.getScrollPosition) { return parent.getScrollPosition(); } @@ -35,7 +25,6 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function getScrollWidth(parent) { - if (parent.getScrollSize) { return parent.getScrollSize(); } @@ -43,46 +32,45 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' return 0; } - function onScrolledToPosition(scrollButtons, pos, scrollWidth) { - - if (pos > 0) { - scrollButtons.scrollButtonsLeft.classList.remove('hide'); - } else { + function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) { + // hack alert add twenty for rounding errors + if (scrollWidth <= scrollSize + 20) { scrollButtons.scrollButtonsLeft.classList.add('hide'); + scrollButtons.scrollButtonsRight.classList.add('hide'); } - if (scrollWidth > 0) { + if (scrollPos > 0) { + scrollButtons.scrollButtonsLeft.disabled = false; + } else { + scrollButtons.scrollButtonsLeft.disabled = true; + } - pos += scrollButtons.offsetWidth; - - if (pos >= scrollWidth) { - scrollButtons.scrollButtonsRight.classList.add('hide'); - } else { - scrollButtons.scrollButtonsRight.classList.remove('hide'); - } + var scrollPosEnd = scrollPos + scrollSize; + if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) { + scrollButtons.scrollButtonsRight.disabled = true; + } else { + scrollButtons.scrollButtonsRight.disabled = false; } } function onScroll(e) { - var scrollButtons = this; var scroller = this.scroller; - var pos = getScrollPosition(scroller); + + var scrollSize = getScrollSize(scroller); + var scrollPos = getScrollPosition(scroller); var scrollWidth = getScrollWidth(scroller); - onScrolledToPosition(scrollButtons, pos, scrollWidth); + updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth); } function getStyleValue(style, name) { - var value = style.getPropertyValue(name); - if (!value) { return 0; } value = value.replace('px', ''); - if (!value) { return 0; } @@ -96,18 +84,15 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function getScrollSize(elem) { - var scrollSize = elem.offsetWidth; - var style = window.getComputedStyle(elem, null); var paddingLeft = getStyleValue(style, 'padding-left'); - if (paddingLeft) { scrollSize -= paddingLeft; } - var paddingRight = getStyleValue(style, 'padding-right'); + var paddingRight = getStyleValue(style, 'padding-right'); if (paddingRight) { scrollSize -= paddingRight; } @@ -116,12 +101,11 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' style = window.getComputedStyle(slider, null); paddingLeft = getStyleValue(style, 'padding-left'); - if (paddingLeft) { scrollSize -= paddingLeft; } - paddingRight = getStyleValue(style, 'padding-right'); + paddingRight = getStyleValue(style, 'padding-right'); if (paddingRight) { scrollSize -= paddingRight; } @@ -130,58 +114,52 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', ' } function onScrollButtonClick(e) { - - var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller'); + var scroller = this.parentNode.nextSibling; var direction = this.getAttribute('data-direction'); + var scrollSize = getScrollSize(scroller); + var scrollPos = getScrollPosition(scroller); + var scrollWidth = getScrollWidth(scroller); - var scrollSize = getScrollSize(parent); - - var pos = getScrollPosition(parent); var newPos; - if (direction === 'left') { - newPos = Math.max(0, pos - scrollSize); + newPos = Math.max(0, scrollPos - scrollSize); } else { - newPos = pos + scrollSize; + newPos = scrollPos + scrollSize; } - parent.scrollToPosition(newPos, false); + scroller.scrollToPosition(newPos, false); } EmbyScrollButtonsPrototype.attachedCallback = function () { + var scroller = this.nextSibling; + var parent = this.parentNode; + this.scroller = scroller; - var parent = dom.parentWithAttribute(this, 'is', 'emby-scroller'); - this.scroller = parent; + parent.classList.add('emby-scroller-container'); - parent.classList.add('emby-scrollbuttons-scroller'); - - this.innerHTML = getScrollButtonContainerHtml('left') + getScrollButtonContainerHtml('right'); + this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right'); var scrollHandler = onScroll.bind(this); this.scrollHandler = scrollHandler; - var buttons = this.querySelectorAll('.emby-scrollbuttons-scrollbutton'); + var buttons = this.querySelectorAll('.emby-scrollbuttons-button'); buttons[0].addEventListener('click', onScrollButtonClick); buttons[1].addEventListener('click', onScrollButtonClick); - - buttons = this.querySelectorAll('.scrollbuttoncontainer'); this.scrollButtonsLeft = buttons[0]; this.scrollButtonsRight = buttons[1]; - parent.addScrollEventListener(scrollHandler, { + scroller.addScrollEventListener(scrollHandler, { capture: false, passive: true }); }; EmbyScrollButtonsPrototype.detachedCallback = function () { - var parent = this.scroller; this.scroller = null; var scrollHandler = this.scrollHandler; - if (parent && scrollHandler) { parent.removeScrollEventListener(scrollHandler, { capture: false, diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css new file mode 100644 index 0000000000..f060882f7b --- /dev/null +++ b/src/components/emby-scroller/emby-scroller.css @@ -0,0 +1,17 @@ +.emby-scroller-container { + position: relative; +} + +.emby-scroller { + margin-left: 3.3%; + margin-right: 3.3%; +} + +@media all and (max-width:50em) { + .emby-scroller { + padding-left: 3.3%; + padding-right: 3.3%; + margin-left: 0; + margin-right: 0; + } +} \ No newline at end of file diff --git a/src/components/emby-scroller/emby-scroller.js b/src/components/emby-scroller/emby-scroller.js index 7ef39eea0a..0b36483be3 100644 --- a/src/components/emby-scroller/emby-scroller.js +++ b/src/components/emby-scroller/emby-scroller.js @@ -1,101 +1,95 @@ -define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) { +define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'browser', 'registerElement', 'css!./emby-scroller'], function (scroller, dom, layoutManager, inputManager, focusManager, browser) { 'use strict'; - var ScrollerProtoType = Object.create(HTMLDivElement.prototype); + var ScrollerPrototype = Object.create(HTMLDivElement.prototype); - ScrollerProtoType.createdCallback = function () { + ScrollerPrototype.createdCallback = function () { this.classList.add('emby-scroller'); }; function initCenterFocus(elem, scrollerInstance) { - dom.addEventListener(elem, 'focus', function (e) { - var focused = focusManager.focusableParent(e.target); - if (focused) { scrollerInstance.toCenter(focused); } - }, { capture: true, passive: true }); } - ScrollerProtoType.scrollToBeginning = function () { + ScrollerPrototype.scrollToBeginning = function () { if (this.scroller) { this.scroller.slideTo(0, true); } }; - ScrollerProtoType.toStart = function (elem, immediate) { + + ScrollerPrototype.toStart = function (elem, immediate) { if (this.scroller) { this.scroller.toStart(elem, immediate); } }; - ScrollerProtoType.toCenter = function (elem, immediate) { + + ScrollerPrototype.toCenter = function (elem, immediate) { if (this.scroller) { this.scroller.toCenter(elem, immediate); } }; - ScrollerProtoType.scrollToPosition = function (pos, immediate) { + ScrollerPrototype.scrollToPosition = function (pos, immediate) { if (this.scroller) { this.scroller.slideTo(pos, immediate); } }; - ScrollerProtoType.getScrollPosition = function () { + ScrollerPrototype.getScrollPosition = function () { if (this.scroller) { return this.scroller.getScrollPosition(); } }; - ScrollerProtoType.getScrollSize = function () { + ScrollerPrototype.getScrollSize = function () { if (this.scroller) { return this.scroller.getScrollSize(); } }; - ScrollerProtoType.getScrollEventName = function () { + ScrollerPrototype.getScrollEventName = function () { if (this.scroller) { return this.scroller.getScrollEventName(); } }; - ScrollerProtoType.getScrollSlider = function () { + ScrollerPrototype.getScrollSlider = function () { if (this.scroller) { return this.scroller.getScrollSlider(); } }; - ScrollerProtoType.addScrollEventListener = function (fn, options) { + ScrollerPrototype.addScrollEventListener = function (fn, options) { if (this.scroller) { dom.addEventListener(this.scroller.getScrollFrame(), this.scroller.getScrollEventName(), fn, options); } }; - ScrollerProtoType.removeScrollEventListener = function (fn, options) { + ScrollerPrototype.removeScrollEventListener = function (fn, options) { if (this.scroller) { dom.removeEventListener(this.scroller.getScrollFrame(), this.scroller.getScrollEventName(), fn, options); } }; function onInputCommand(e) { - var cmd = e.detail.command; - if (cmd === 'end') { focusManager.focusLast(this, '.' + this.getAttribute('data-navcommands')); e.preventDefault(); e.stopPropagation(); - } - else if (cmd === 'pageup') { + } else if (cmd === 'pageup') { focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), -12); e.preventDefault(); e.stopPropagation(); - } - else if (cmd === 'pagedown') { + } else if (cmd === 'pagedown') { focusManager.moveFocus(e.target, this, '.' + this.getAttribute('data-navcommands'), 12); e.preventDefault(); e.stopPropagation(); @@ -104,18 +98,16 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro function initHeadroom(elem) { require(['headroom'], function (Headroom) { - var headroom = new Headroom([], { scroller: elem }); - + headroom.add(document.querySelector('.skinHeader')); elem.headroom = headroom; }); } - ScrollerProtoType.attachedCallback = function () { - + ScrollerPrototype.attachedCallback = function () { if (this.getAttribute('data-navcommands')) { inputManager.on(this, onInputCommand); } @@ -141,10 +133,8 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro slidee: slider, scrollBy: 200, speed: horizontal ? 270 : 240, - //immediateSpeed: pageOptions.immediateSpeed, elasticBounds: 1, dragHandle: 1, - scrollWidth: this.getAttribute('data-scrollsize') === 'auto' ? null : 5000000, autoImmediate: true, skipSlideToWhenVisible: this.getAttribute('data-skipfocuswhenvisible') === 'true', dispatchScrollEvent: enableScrollButtons || bindHeader || this.getAttribute('data-scrollevent') === 'true', @@ -152,7 +142,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro allowNativeSmoothScroll: this.getAttribute('data-allownativesmoothscroll') === 'true' && !enableScrollButtons, allowNativeScroll: !enableScrollButtons, forceHideScrollbars: enableScrollButtons, - // In edge, with the native scroll, the content jumps around when hovering over the buttons requireAnimation: enableScrollButtons && browser.edge }; @@ -160,6 +149,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro // If just inserted it might not have any height yet - yes this is a hack this.scroller = new scroller(scrollFrame, options); this.scroller.init(); + this.scroller.reload(); if (layoutManager.tv && this.getAttribute('data-centerfocus')) { initCenterFocus(this, this.scroller); @@ -175,30 +165,26 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; function loadScrollButtons(scroller) { - require(['emby-scrollbuttons'], function () { - scroller.insertAdjacentHTML('beforeend', '
'); + scroller.insertAdjacentHTML('beforebegin', '
'); }); } - ScrollerProtoType.pause = function () { - + ScrollerPrototype.pause = function () { var headroom = this.headroom; if (headroom) { headroom.pause(); } }; - ScrollerProtoType.resume = function () { - + ScrollerPrototype.resume = function () { var headroom = this.headroom; if (headroom) { headroom.resume(); } }; - ScrollerProtoType.detachedCallback = function () { - + ScrollerPrototype.detachedCallback = function () { if (this.getAttribute('data-navcommands')) { inputManager.off(this, onInputCommand); } @@ -217,7 +203,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro }; document.registerElement('emby-scroller', { - prototype: ScrollerProtoType, + prototype: ScrollerPrototype, extends: 'div' }); }); \ No newline at end of file diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css index 101058ca26..b27190e487 100644 --- a/src/components/emby-slider/emby-slider.css +++ b/src/components/emby-slider/emby-slider.css @@ -27,10 +27,6 @@ _:-ms-input-placeholder { /* Disable webkit tap highlighting */ -webkit-tap-highlight-color: rgba(0,0,0,0); display: block; - /**************************** Tracks ****************************/ - /**************************** Thumbs ****************************/ - /**************************** 0-value ****************************/ - /**************************** Disabled ****************************/ } .mdl-slider::-moz-focus-outer { diff --git a/src/components/guide/tvguide.template.html b/src/components/guide/tvguide.template.html index c5f76696c5..8778fcd3f7 100644 --- a/src/components/guide/tvguide.template.html +++ b/src/components/guide/tvguide.template.html @@ -18,7 +18,6 @@
-
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 1b7e5533dd..b7da2708f3 100644 --- a/src/components/homesections/homesections.js +++ b/src/components/homesections/homesections.js @@ -2,9 +2,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la 'use strict'; function getDefaultSection(index) { - switch (index) { - case 0: return 'smalllibrarytiles'; case 1: @@ -25,13 +23,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getAllSectionsToShow(userSettings, sectionCount) { - var sections = []; - for (var i = 0, length = sectionCount; i < length; i++) { - var section = userSettings.get('homesection' + i) || getDefaultSection(i); - if (section === 'folders') { section = getDefaultSection(0); } @@ -43,15 +37,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadSections(elem, apiClient, user, userSettings) { - return getUserViews(apiClient, user.Id).then(function (userViews) { - - var i, length; - var sectionCount = 7; - var html = ''; - for (i = 0, length = sectionCount; i < length; i++) { + var sectionCount = 7; + for (var i = 0; i < sectionCount; i++) { html += '
'; } @@ -60,14 +50,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la var promises = []; var sections = getAllSectionsToShow(userSettings, sectionCount); - - for (i = 0, length = sections.length; i < length; i++) { - + for (var i = 0; i < sections.length; i++) { promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i)); } return Promise.all(promises).then(function () { - return resume(elem, { refresh: true, returnPromise: false @@ -77,12 +64,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function destroySections(elem) { - var elems = elem.querySelectorAll('.itemsContainer'); - var i, length; - - for (i = 0, length = elems.length; i < length; i++) { - + for (var i = 0; i < elems.length; i++) { elems[i].fetchData = null; elems[i].parentContainer = null; elems[i].getItemsHtml = null; @@ -92,17 +75,13 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function pause(elem) { - var elems = elem.querySelectorAll('.itemsContainer'); - var i, length; - for (i = 0, length = elems.length; i < length; i++) { - + for (var i = 0; i < elems.length; i++) { elems[i].pause(); } } function resume(elem, options) { - var elems = elem.querySelectorAll('.itemsContainer'); var i, length; var promises = []; @@ -112,7 +91,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } var promise = Promise.all(promises); - if (!options || options.returnPromise !== false) { return promise; } @@ -127,41 +105,29 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la if (section === 'latestmedia') { loadRecentlyAdded(elem, apiClient, user, userViews); - } - else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') { + } else if (section === 'librarytiles' || section === 'smalllibrarytiles' || section === 'smalllibrarytiles-automobile' || section === 'librarytiles-automobile') { loadLibraryTiles(elem, apiClient, user, userSettings, 'smallBackdrop', userViews, allSections); - } - else if (section === 'librarybuttons') { + } else if (section === 'librarybuttons') { loadlibraryButtons(elem, apiClient, user, userSettings, userViews, allSections); - } - else if (section === 'resume') { + } else if (section === 'resume') { loadResumeVideo(elem, apiClient, userId); - } - else if (section === 'resumeaudio') { + } else if (section === 'resumeaudio') { loadResumeAudio(elem, apiClient, userId); - } - else if (section === 'activerecordings') { + } else if (section === 'activerecordings') { loadLatestLiveTvRecordings(elem, true, apiClient, userId); - } - else if (section === 'nextup') { + } else if (section === 'nextup') { loadNextUp(elem, apiClient, userId); - } - else if (section === 'onnow' || section === 'livetv') { + } else if (section === 'onnow' || section === 'livetv') { return loadOnNow(elem, apiClient, user); - } - else { - + } else { elem.innerHTML = ''; - return Promise.resolve(); } return Promise.resolve(); } function getUserViews(apiClient, userId) { - return apiClient.getUserViews({}, userId || apiClient.getCurrentUserId()).then(function (result) { - return result.Items; }); } @@ -186,9 +152,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la var html = ""; html += '
'; - html += '
'; html += '

' + globalize.translate('HeaderMyMedia') + '

'; - html += '
'; html += '
'; @@ -261,21 +225,15 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getFetchLatestItemsFn(serverId, parentId, collectionType) { - return function () { - var apiClient = connectionManager.getApiClient(serverId); - var limit = 16; if (enableScrollX()) { - if (collectionType === 'music') { limit = 30; } - } - else { - + } else { if (collectionType === 'tvshows') { limit = 5; } else if (collectionType === 'music') { @@ -286,7 +244,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } var options = { - Limit: limit, Fields: "PrimaryImageAspectRatio,BasicSyncInfo", ImageTypeLimit: 1, @@ -299,9 +256,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getLatestItemsHtmlFn(itemType, viewType) { - return function (items) { - var shape = itemType === 'Channel' || viewType === 'movies' ? getPortraitShape() : viewType === 'music' ? @@ -331,31 +286,28 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function renderLatestSection(elem, apiClient, user, parent) { - var html = ''; + html += '
'; if (!layoutManager.tv) { - html += ''; html += '

'; html += globalize.translate('LatestFromLibrary', parent.Name); html += '

'; html += ''; html += '
'; - } else { html += '

' + globalize.translate('LatestFromLibrary', parent.Name) + '

'; } html += '
'; if (enableScrollX()) { - html += '
'; + html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } if (enableScrollX()) { @@ -369,19 +321,14 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType); itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType); itemsContainer.parentContainer = elem; - } function loadRecentlyAdded(elem, apiClient, user, userViews) { - elem.classList.remove('verticalSection'); - var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels']; for (var i = 0, length = userViews.length; i < length; i++) { - var item = userViews[i]; - if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) { continue; } @@ -406,39 +353,31 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) { - - elem.classList.remove('verticalSection'); - var html = ''; - - var scrollX = !layoutManager.desktop; - if (userViews.length) { - html += '
'; html += '

' + globalize.translate('HeaderMyMedia') + '

'; - - if (scrollX) { - html += '
'; + if (enableScrollX()) { + html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } html += cardBuilder.getCardsHtml({ items: userViews, - shape: scrollX ? 'overflowSmallBackdrop' : shape, + shape: enableScrollX() ? 'overflowSmallBackdrop' : shape, showTitle: true, centerText: true, overlayText: false, lazy: true, transition: false, - allowBottomPadding: !scrollX + allowBottomPadding: !enableScrollX() }); - if (scrollX) { + if (enableScrollX()) { html += '
'; } html += '
'; - html += '
'; } elem.innerHTML = html; @@ -446,27 +385,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueWatchingFetchFn(serverId) { - return function () { - var apiClient = connectionManager.getApiClient(serverId); - var screenWidth = dom.getWindowSize().innerWidth; var limit; - if (enableScrollX()) { - limit = 12; - } else { - limit = screenWidth >= 1920 ? 8 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)); limit = Math.min(limit, 5); } var options = { - Limit: limit, Recursive: true, Fields: "PrimaryImageAspectRatio,BasicSyncInfo", @@ -481,9 +412,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueWatchingItemsHtml(items) { - var cardLayout = false; - return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -504,12 +433,12 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadResumeVideo(elem, apiClient, userId) { - var html = ''; - html += '

' + globalize.translate('HeaderContinueWatching') + '

'; + html += '

' + globalize.translate('HeaderContinueWatching') + '

'; if (enableScrollX()) { - html += '
'; + html += '
'; + html += '
'; } else { html += '
'; } @@ -529,27 +458,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueListeningFetchFn(serverId) { - return function () { - var apiClient = connectionManager.getApiClient(serverId); - var screenWidth = dom.getWindowSize().innerWidth; var limit; - if (enableScrollX()) { - limit = 12; - } else { - limit = screenWidth >= 1920 ? 8 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)); limit = Math.min(limit, 5); } var options = { - Limit: limit, Recursive: true, Fields: "PrimaryImageAspectRatio,BasicSyncInfo", @@ -564,9 +485,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueListeningItemsHtml(items) { - var cardLayout = false; - return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -587,12 +506,12 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadResumeAudio(elem, apiClient, userId) { - var html = ''; - html += '

' + globalize.translate('HeaderContinueWatching') + '

'; + html += '

' + globalize.translate('HeaderContinueWatching') + '

'; if (enableScrollX()) { - html += '
'; + html += '
'; + html += '
'; } else { html += '
'; } @@ -678,9 +597,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la if (enableScrollX()) { html += '
'; - html += '
'; + html += '
'; } else { - html += '
'; + html += '
'; } html += '
'; + html += '
'; + html += '
' } else { - html += '
'; + html += '
'; } if (enableScrollX()) { @@ -756,13 +676,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getNextUpFetchFn(serverId) { - return function () { - var apiClient = connectionManager.getApiClient(serverId); - return apiClient.getNextUpEpisodes({ - Limit: enableScrollX() ? 24 : 15, Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo", UserId: apiClient.getCurrentUserId(), @@ -774,9 +690,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getNextUpItemsHtml(items) { - var cardLayout = false; - return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -794,29 +708,26 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadNextUp(elem, apiClient, userId) { - var html = ''; + html += ''; if (enableScrollX()) { - html += '
'; + html += '
'; + html += '
' } else { html += '
'; } @@ -824,7 +735,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la if (enableScrollX()) { html += '
'; } - html += '
'; elem.classList.add('hide'); @@ -837,29 +747,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { - return function () { - var apiClient = connectionManager.getApiClient(serverId); - return apiClient.getLiveTvRecordings({ - userId: apiClient.getCurrentUserId(), Limit: enableScrollX() ? 12 : 5, Fields: "PrimaryImageAspectRatio,BasicSyncInfo", EnableTotalRecordCount: false, IsLibraryItem: activeRecordingsOnly ? null : false, IsInProgress: activeRecordingsOnly ? true : null - }); }; } function getLatestRecordingItemsHtml(activeRecordingsOnly) { - return function (items) { var cardLayout = false; - return cardBuilder.getCardsHtml({ items: items, shape: enableScrollX() ? 'autooverflow' : 'auto', @@ -884,7 +787,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) { - var title = activeRecordingsOnly ? globalize.translate('HeaderActiveRecordings') : globalize.translate('HeaderLatestRecordings'); @@ -893,16 +795,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '
'; html += '

' + title + '

'; - if (!layoutManager.tv) { - //html += ''; - //html += ''; - } html += '
'; if (enableScrollX()) { - html += '
'; + html += '
'; + html += '
' } else { html += '
'; } @@ -910,7 +807,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la if (enableScrollX()) { html += '
'; } - html += '
'; elem.classList.add('hide'); diff --git a/src/components/scroller.js b/src/components/scroller.js index cfa1e07a00..de0ce6b932 100644 --- a/src/components/scroller.js +++ b/src/components/scroller.js @@ -299,13 +299,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } // Start animation rendering - if (newPos !== pos.dest) { - pos.dest = newPos; - - renderAnimateWithTransform(from, newPos, immediate); - - lastAnimate = now; - } + // NOTE the dependency was modified here to fix a scrollbutton issue + pos.dest = newPos; + renderAnimateWithTransform(from, newPos, immediate); + lastAnimate = now; }; function setStyleProperty(elem, name, value, speed, resetTransition) { diff --git a/src/components/search/searchresults.template.html b/src/components/search/searchresults.template.html index 26b047b5df..a9fa232fbc 100644 --- a/src/components/search/searchresults.template.html +++ b/src/components/search/searchresults.template.html @@ -5,7 +5,6 @@
-
@@ -13,7 +12,7 @@

${Movies}

-
+
@@ -21,7 +20,7 @@

${Shows}

-
+
@@ -29,7 +28,7 @@

${Episodes}

-
+
@@ -37,7 +36,7 @@

${Sports}

-
+
@@ -45,7 +44,7 @@

${Kids}

-
+
@@ -53,7 +52,7 @@

${News}

-
+
@@ -61,7 +60,7 @@

${Programs}

-
+
@@ -69,7 +68,7 @@

${Videos}

-
+
@@ -77,7 +76,7 @@

${Playlists}

-
+
@@ -85,7 +84,7 @@

${Artists}

-
+
@@ -93,7 +92,7 @@

${Albums}

-
+
@@ -101,7 +100,7 @@

${Songs}

-
+
@@ -109,7 +108,7 @@

${HeaderPhotoAlbums}

-
+
@@ -117,7 +116,7 @@

${Photos}

-
+
@@ -125,7 +124,7 @@

${HeaderAudioBooks}

-
+
@@ -133,7 +132,7 @@

${Books}

-
+
@@ -141,6 +140,6 @@

${People}

-
+
\ No newline at end of file diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index 749f817982..da4c056023 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -19,10 +19,10 @@ html { background-color: #101010 } -.skinHeader .semiTransparent { +.skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.4); } .pageTitleWithDefaultLogo { diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index d02a49227b..d948c3ae6f 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -19,10 +19,10 @@ html { background-color: #1f1f1f } -.skinHeader .semiTransparent { +.skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.4); } .pageTitleWithDefaultLogo { diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index 60cd758e02..65ceefb52c 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -32,10 +32,10 @@ html { box-shadow: none !important } -.skinHeader .semiTransparent { +.skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; - background-color: rgba(0, 0, 0, 0.7); + background-color: rgba(0, 0, 0, 0.4); } .pageTitleWithDefaultLogo { diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js index 3bb8b3b29a..4412ec6e9b 100644 --- a/src/controllers/favorites.js +++ b/src/controllers/favorites.js @@ -2,19 +2,19 @@ define(["appRouter", "cardBuilder", "dom", "globalize", "connectionManager", "ap "use strict"; function enableScrollX() { - return !0 + return true; } function getThumbShape() { - return enableScrollX() ? "overflowBackdrop" : "backdrop" + return enableScrollX() ? "overflowBackdrop" : "backdrop"; } function getPosterShape() { - return enableScrollX() ? "overflowPortrait" : "portrait" + return enableScrollX() ? "overflowPortrait" : "portrait"; } function getSquareShape() { - return enableScrollX() ? "overflowSquare" : "square" + return enableScrollX() ? "overflowSquare" : "square"; } function getSections() { diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index ef8e11f5b9..f0f3cb9b23 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -960,97 +960,47 @@ } .padded-left { - padding-left: 2% + padding-left: 3.3%; } .padded-right { - padding-right: 2% + padding-right: 3.3%; } .padded-top { - padding-top: 1em + padding-top: 1em; } .padded-bottom { - padding-bottom: 1em + padding-bottom: 1em; } .layout-tv .padded-top-focusscale { padding-top: 1em; - margin-top: -1em + margin-top: -1em; } .layout-tv .padded-bottom-focusscale { padding-bottom: 1em; - margin-bottom: -1em + margin-bottom: -1em; } @media all and (min-height:31.25em) { .padded-left-withalphapicker { - padding-left: 7.5% + padding-left: 7.5%; } .padded-right-withalphapicker { - padding-right: 7.5% - } -} - -@media all and (min-width:31.25em) { - .padded-left { - padding-left: 6% - } - - .padded-right { - padding-right: 6% - } -} - -@media all and (min-width:37.5em) { - .padded-left { - padding-left: 4% - } - - .padded-right { - padding-right: 4% - } -} - -@media all and (min-width:50em) { - .padded-left { - padding-left: 3.2% - } - - .padded-right { - padding-right: 3.2% - } -} - -@media all and (min-width:64em) { - .padded-left { - padding-left: 3.3% - } - - .padded-right { - padding-right: 3.3% - } -} - -@media all and (min-width:50em) { - .layout-tv .padded-left-withalphapicker { - padding-left: 4.5% - } - - .layout-tv .padded-right-withalphapicker { - padding-right: 4.5% + padding-right: 7.5%; } } .searchfields-icon { - color: #aaa + color: #aaaaaa; } .button-accent-flat { - color: #00a4dc !important + color: #00a4dc !important; } .clearLink { diff --git a/src/itemdetails.html b/src/itemdetails.html index 0a8c02eb4a..2335feb3ef 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -207,9 +207,7 @@
-

- ${HeaderNextUp} -

+

${HeaderNextUp}

@@ -224,18 +222,15 @@
-

- ${HeaderAdditionalParts} -

+

${HeaderAdditionalParts}

-
-
+
@@ -243,20 +238,17 @@

-
-
+
-
-

- ${HeaderCastCrew} -

+

${HeaderCastCrew}

+
-
+
@@ -285,9 +277,8 @@

${HeaderScenes}

-
-
+
@@ -296,9 +287,8 @@

${HeaderMoreLikeThis}

-
-
+