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

update cards

This commit is contained in:
Luke Pulverenti 2016-07-30 16:09:07 -04:00
parent 75e4bd0cc5
commit a4a7f03459
8 changed files with 36 additions and 40 deletions

View file

@ -167,9 +167,6 @@ button.cardContent {
.cardContent {
overflow: hidden;
}
.scalableCard .cardContent {
position: absolute;
top: 0;
left: 0;
@ -202,7 +199,11 @@ button.cardContent {
opacity: .6;
}
.card:not(.round) .cardFooter:not(.transparent) {
.visualCardBox .cardScalable {
background-color: #222326;
}
.visualCardBox .cardFooter {
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);

View file

@ -631,12 +631,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
}
var index = String(sum).substr(-1);
return index % numRandomColors;
return (index % numRandomColors) + 1;
} else {
return getRandomInt(1, numRandomColors);
}
}
function getDefaultColorClass(str) {
return 'defaultCardColor' + getDefaultColorIndex(str);
}
function getCardTextLines(lines, cssClass, forceLines) {
var html = '';
@ -994,13 +998,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
}
if (!imgUrl) {
cardImageContainerClass += ' defaultCardColor' + getDefaultColorIndex(item.Name);
cardImageContainerClass += ' ' + getDefaultColorClass(item.Name);
}
var separateCardBox = scalable;
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
if (!separateCardBox) {
cardImageContainerClass += " cardBox";
cardImageContainerClass += " " + cardBoxClass;
}
// cardBox can be it's own separate element if an outer footer is ever needed
@ -1020,7 +1024,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
cardContentClose = '</button>';
}
cardImageContainerOpen = '<div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
cardBoxClose = '</div>';
cardScalableClose = '</div>';
cardImageContainerClose = '</div>';
@ -1057,7 +1061,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
}
var innerCardFooterClass = 'innerCardFooter';
var footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item);
var innerCardFooter = '';
@ -1066,7 +1070,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
if (options.overlayText) {
var footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
footerOverlayed = true;
}
@ -1080,7 +1084,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var outerCardFooter = '';
if (!options.overlayText && !footerOverlayed) {
var footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
}
@ -1328,6 +1332,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
return {
getCardsHtml: getCardsHtml,
buildCards: buildCards,
onUserDataChanged: onUserDataChanged
onUserDataChanged: onUserDataChanged,
getDefaultColorClass: getDefaultColorClass
};
});

View file

@ -59,7 +59,7 @@ define(['imageLoader', 'itemShortcuts'], function (imageLoader, itemShortcuts) {
var html = '\
<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="cardBox">\
<div class="visualCardBox cardBox">\
<div class="cardScalable">\
<div class="cardPadder"></div>\
<div class="cardContent">\