update card layouts

This commit is contained in:
Luke Pulverenti 2016-08-11 16:28:49 -04:00
parent 614e07a81d
commit cee7db2ce0
29 changed files with 194 additions and 71 deletions

View file

@ -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%;
}

View file

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

View file

@ -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>\

View file

@ -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>\