mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update card layouts
This commit is contained in:
parent
99ae92bad7
commit
3a7fbb7777
14 changed files with 155 additions and 58 deletions
|
@ -1,5 +1,5 @@
|
|||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom) {
|
||||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'dom', 'browser', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, focusManager, indicators, globalize, layoutManager, appHost, dom, browser) {
|
||||
'use strict';
|
||||
|
||||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||||
|
@ -144,6 +144,20 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
return 100 / 64;
|
||||
}
|
||||
return 100 / 72;
|
||||
case 'overflowSmallBackdrop':
|
||||
if (screenWidth >= 1200) {
|
||||
return 100 / 18;
|
||||
}
|
||||
if (screenWidth >= 1000) {
|
||||
return 100 / 24;
|
||||
}
|
||||
if (screenWidth >= 770) {
|
||||
return 100 / 30;
|
||||
}
|
||||
if (screenWidth >= 540) {
|
||||
return 100 / 40;
|
||||
}
|
||||
return 100 / 60;
|
||||
default:
|
||||
return 4;
|
||||
}
|
||||
|
@ -1275,7 +1289,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
cardContentClose = '</button>';
|
||||
}
|
||||
|
||||
if (options.vibrant && imgUrl && !vibrantSwatch) {
|
||||
var vibrantAttributes = options.vibrant && imgUrl && !vibrantSwatch ?
|
||||
(' data-vibrant="' + cardFooterId + '" data-swatch="db"') :
|
||||
'';
|
||||
|
||||
// Don't use the IMG tag with safari because it puts a white border around it
|
||||
if (vibrantAttributes && !browser.safari) {
|
||||
cardImageContainerOpen = '<div class="' + cardImageContainerClass + '">';
|
||||
|
||||
var imgClass = 'cardImage cardImage-img lazy';
|
||||
|
@ -1286,10 +1305,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
|
|||
imgClass += ' coveredImage-img';
|
||||
}
|
||||
}
|
||||
cardImageContainerOpen += '<img crossOrigin="Anonymous" class="' + imgClass + '" data-vibrant="' + cardFooterId + '" data-swatch="db" data-src="' + imgUrl + '" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />';
|
||||
cardImageContainerOpen += '<img crossOrigin="Anonymous" class="' + imgClass + '"' + vibrantAttributes + ' data-src="' + imgUrl + '" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />';
|
||||
|
||||
} else {
|
||||
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy"' + vibrantAttributes + ' data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||
}
|
||||
|
||||
var cardScalableClass = options.cardLayout ? 'cardScalable visualCardBox-cardScalable' : 'cardScalable';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue