1
0
Fork 0
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:
Luke Pulverenti 2016-12-01 12:38:13 -05:00
parent 99ae92bad7
commit 3a7fbb7777
14 changed files with 155 additions and 58 deletions

View file

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