update card layouts
This commit is contained in:
parent
614e07a81d
commit
cee7db2ce0
29 changed files with 194 additions and 71 deletions
|
@ -48,19 +48,19 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
|
||||
.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
||||
.cardPadder-square, .cardPadder-overflowSquare {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
||||
.cardPadder-portrait, .cardPadder-overflowPortrait {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.bannerCard .cardPadder {
|
||||
.cardPadder-banner {
|
||||
padding-bottom: 18.5%;
|
||||
}
|
||||
|
||||
|
|
|
@ -1073,7 +1073,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
cardContentClose = '</button>';
|
||||
}
|
||||
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder-' + options.shape + '"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||
cardBoxClose = '</div>';
|
||||
cardScalableClose = '</div>';
|
||||
cardImageContainerClose = '</div>';
|
||||
|
|
|
@ -9,16 +9,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
return i.Type == 'Video';
|
||||
})[0] || {};
|
||||
|
||||
var shape = (options.backdropShape || 'backdrop') + 'Card';
|
||||
var shape = (options.backdropShape || 'backdrop');
|
||||
|
||||
if (videoStream.Width && videoStream.Height) {
|
||||
|
||||
if ((videoStream.Width / videoStream.Height) <= 1.34) {
|
||||
shape = (options.squareShape || 'square') + 'Card';
|
||||
shape = (options.squareShape || 'square');
|
||||
}
|
||||
}
|
||||
|
||||
className += ' ' + shape;
|
||||
className += ' ' + shape + 'Card';
|
||||
|
||||
if (options.block || options.rows) {
|
||||
className += ' block';
|
||||
|
@ -37,7 +37,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
|
||||
var chapter = chapters[i];
|
||||
|
||||
html += buildChapterCard(item, apiClient, chapter, i, options, className);
|
||||
html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
|
||||
itemsInRow++;
|
||||
|
||||
if (options.rows && itemsInRow >= options.rows) {
|
||||
|
@ -65,7 +65,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
return null;
|
||||
}
|
||||
|
||||
function buildChapterCard(item, apiClient, chapter, index, options, className) {
|
||||
function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
|
||||
|
||||
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
|
||||
|
||||
|
@ -88,7 +88,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
<button type="button" class="' + className + '"' + dataAttributes + '> \
|
||||
<div class="cardBox">\
|
||||
<div class="cardScalable">\
|
||||
<div class="cardPadder"></div>\
|
||||
<div class="cardPadder-'+ shape + '"></div>\
|
||||
<div class="cardContent">\
|
||||
' + cardImageContainer + '\
|
||||
</div>\
|
||||
|
|
|
@ -81,7 +81,7 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoa
|
|||
<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"> \
|
||||
<div class="visualCardBox cardBox">\
|
||||
<div class="cardScalable">\
|
||||
<div class="cardPadder"></div>\
|
||||
<div class="cardPadder-portrait"></div>\
|
||||
<div class="cardContent">\
|
||||
' + cardImageContainer + '\
|
||||
</div>\
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue