mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update cards
This commit is contained in:
parent
75e4bd0cc5
commit
a4a7f03459
8 changed files with 36 additions and 40 deletions
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
};
|
||||
});
|
|
@ -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">\
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue