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

Make login card scalable on focus (#535)

Browse source 
* Make login card scalable on focus
* Remove focus related classes
This commit is contained in:
Dmitry Lyzo 2019-11-11 12:28:27 +03:00 • committed by Vasily
parent 9c47f8fc1c
commit ad8fe23ef8
17 changed files with 131 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/cardbuilder/card.css
View file

@ -26,7 +26,7 @@ button {
font-weight: inherit !important;
}
.card-nofocustransform {
.card:not(.show-animation) {
contain: layout style paint;
}
@ -98,20 +98,21 @@ button {
contain: layout style;
}
.cardBox-withfocuscontent-large {
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
}
.card-focuscontent-large {
.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
border: .5em solid transparent;
}
.cardBox-focustransform {
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card:focus > .cardBox-focustransform {
.card.show-animation:focus > .cardBox {
transform: scale(1.18, 1.18);
}

38
src/components/cardbuilder/cardBuilder.js
View file

@ -3,7 +3,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
'use strict';
var devicePixelRatio = window.devicePixelRatio || 1;
var enableFocusTransfrom = !browser.slow && !browser.edge;
var enableFocusTransform = !browser.slow && !browser.edge;
function getCardsHtml(items, options) {
if (arguments.length === 1) {
@ -1203,6 +1203,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
shape = shape || 'mixedSquare';
}
// TODO move card creation code to Card component
var className = 'card';
if (shape) {
@ -1221,8 +1223,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
className += ' card-hoverable';
}
if (!enableFocusTransfrom || !layoutManager.tv) {
className += ' card-nofocustransform';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var imgInfo = getCardImageUrl(item, apiClient, options, shape);
@ -1250,23 +1256,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
if (layoutManager.tv) {
if (enableFocusTransfrom) {
cardBoxClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxClass += ' cardBox-withfocuscontent-large';
}
if (options.cardLayout) {
cardBoxClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardBoxClass += ' card-focuscontent-large';
}
}
}
var footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item);
@ -1385,15 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var cardScalableClass = 'cardScalable';
if (layoutManager.tv && !options.cardLayout) {
cardScalableClass += ' card-focuscontent';
if (!enableFocusTransfrom) {
cardScalableClass += ' card-focuscontent-large';
}
}
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';

27
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -1,12 +1,20 @@
define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge;
function buildChapterCardsHtml(item, chapters, options) {
// TODO move card creation code to Card component
var className = 'card itemAction chapterCard';
if (layoutManager.tv && (browser.animate || browser.edge)) {
className += ' card-focusscale';
if (layoutManager.tv) {
className += ' show-focus';
if (enableFocusTransform) {
className += ' show-animation';
}
}
var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
@ -92,19 +100,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
var cardBoxCssClass = 'cardBox';
var cardScalableClass = 'cardScalable';
if (layoutManager.tv) {
var enableFocusTransfrom = !browser.slow && !browser.edge;
cardScalableClass += ' card-focuscontent';
if (enableFocusTransfrom) {
cardBoxCssClass += ' cardBox-focustransform cardBox-withfocuscontent';
} else {
cardBoxCssClass += ' cardBox-withfocuscontent-large';
cardScalableClass += ' card-focuscontent-large';
}
}
var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
return html;
@ -137,4 +132,4 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
buildChapterCards: buildChapterCards
};
});
});