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
106870b066
commit
c0e29e7542
7 changed files with 73 additions and 78 deletions
|
@ -64,7 +64,7 @@
|
||||||
padding-bottom: 18.5%;
|
padding-bottom: 18.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .cardBox {
|
.cardBox {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
@ -77,7 +77,7 @@
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
@media all and (min-width: 600px) {
|
||||||
|
|
||||||
.layout-desktop .card .cardBox, .layout-mobile .card .cardBox {
|
.cardBox-mobile {
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -92,14 +92,10 @@
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottomPaddedCard .cardBox:not(.visualCardBox) {
|
.cardBox-bottompadded {
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenScrollX .bottomPaddedCard .cardBox, .smoothScrollX .bottomPaddedCard .cardBox {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnCardOptions {
|
.btnCardOptions {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -107,18 +103,6 @@
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dimunselected .card .cardImageContainer {
|
|
||||||
-webkit-filter: brightness(50%);
|
|
||||||
filter: brightness(50%);
|
|
||||||
transition: filter, -webkit-filter 600ms ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dimunselected .card:focus .cardImageContainer {
|
|
||||||
-webkit-filter: initial;
|
|
||||||
filter: initial;
|
|
||||||
transition: filter, -webkit-filter 600ms ease-out !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mediaSourceIndicator {
|
.mediaSourceIndicator {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1012,6 +1012,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||||
var imgInfo = getCardImageUrl(item, apiClient, options);
|
var imgInfo = getCardImageUrl(item, apiClient, options);
|
||||||
var imgUrl = imgInfo.imgUrl;
|
var imgUrl = imgInfo.imgUrl;
|
||||||
|
|
||||||
|
var forceName = imgInfo.forceName;
|
||||||
|
|
||||||
|
var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
|
||||||
|
var overlayText = options.overlayText;
|
||||||
|
|
||||||
|
if (forceName && !options.cardLayout) {
|
||||||
|
showTitle = imgUrl;
|
||||||
|
|
||||||
|
if (overlayText == null) {
|
||||||
|
overlayText = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var cardImageContainerClass = 'cardImageContainer';
|
var cardImageContainerClass = 'cardImageContainer';
|
||||||
if (options.coverImage || imgInfo.coverImage) {
|
if (options.coverImage || imgInfo.coverImage) {
|
||||||
cardImageContainerClass += ' coveredImage';
|
cardImageContainerClass += ' coveredImage';
|
||||||
|
@ -1027,6 +1040,47 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||||
|
|
||||||
var separateCardBox = scalable;
|
var separateCardBox = scalable;
|
||||||
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
|
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
|
||||||
|
|
||||||
|
if (!layoutManager.tv) {
|
||||||
|
cardBoxClass += ' cardBox-mobile';
|
||||||
|
}
|
||||||
|
|
||||||
|
var footerCssClass;
|
||||||
|
var progressHtml = indicators.getProgressBarHtml(item);
|
||||||
|
|
||||||
|
var innerCardFooter = '';
|
||||||
|
|
||||||
|
var footerOverlayed = false;
|
||||||
|
|
||||||
|
if (overlayText) {
|
||||||
|
|
||||||
|
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
|
||||||
|
innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
|
||||||
|
footerOverlayed = true;
|
||||||
|
}
|
||||||
|
else if (progressHtml) {
|
||||||
|
innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
|
||||||
|
innerCardFooter += progressHtml;
|
||||||
|
innerCardFooter += '</div>';
|
||||||
|
|
||||||
|
progressHtml = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var mediaSourceCount = item.MediaSourceCount || 1;
|
||||||
|
if (mediaSourceCount > 1) {
|
||||||
|
innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var outerCardFooter = '';
|
||||||
|
if (!overlayText && !footerOverlayed) {
|
||||||
|
footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
|
||||||
|
outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (outerCardFooter && !options.cardLayout) {
|
||||||
|
cardBoxClass += ' cardBox-bottompadded';
|
||||||
|
}
|
||||||
|
|
||||||
if (!separateCardBox) {
|
if (!separateCardBox) {
|
||||||
cardImageContainerClass += " " + cardBoxClass;
|
cardImageContainerClass += " " + cardBoxClass;
|
||||||
}
|
}
|
||||||
|
@ -1110,56 +1164,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||||
cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
|
cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var forceName = imgInfo.forceName;
|
|
||||||
|
|
||||||
var showTitle = options.showTitle == 'auto' ? true : (options.showTitle || item.Type == 'PhotoAlbum' || item.Type == 'Folder');
|
|
||||||
var overlayText = options.overlayText;
|
|
||||||
|
|
||||||
if (forceName && !options.cardLayout) {
|
|
||||||
showTitle = imgUrl;
|
|
||||||
|
|
||||||
if (overlayText == null) {
|
|
||||||
overlayText = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!imgUrl) {
|
if (!imgUrl) {
|
||||||
var defaultName = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
|
var defaultName = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
|
||||||
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
|
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var footerCssClass;
|
|
||||||
var progressHtml = indicators.getProgressBarHtml(item);
|
|
||||||
|
|
||||||
var innerCardFooter = '';
|
|
||||||
|
|
||||||
var footerOverlayed = false;
|
|
||||||
|
|
||||||
if (overlayText) {
|
|
||||||
|
|
||||||
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
|
|
||||||
innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
|
|
||||||
footerOverlayed = true;
|
|
||||||
}
|
|
||||||
else if (progressHtml) {
|
|
||||||
innerCardFooter += '<div class="innerCardFooter fullInnerCardFooter innerCardFooterClear">';
|
|
||||||
innerCardFooter += progressHtml;
|
|
||||||
innerCardFooter += '</div>';
|
|
||||||
|
|
||||||
progressHtml = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
var mediaSourceCount = item.MediaSourceCount || 1;
|
|
||||||
if (mediaSourceCount > 1) {
|
|
||||||
innerCardFooter += '<div class="mediaSourceIndicator">' + mediaSourceCount + '</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
var outerCardFooter = '';
|
|
||||||
if (!overlayText && !footerOverlayed) {
|
|
||||||
footerCssClass = options.cardLayout ? 'cardFooter' : 'cardFooter transparent';
|
|
||||||
outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
var tagName = (layoutManager.tv || !scalable) && !overlayButtons ? 'button' : 'div';
|
var tagName = (layoutManager.tv || !scalable) && !overlayButtons ? 'button' : 'div';
|
||||||
|
|
||||||
var prefix = (item.SortName || item.Name || '')[0];
|
var prefix = (item.SortName || item.Name || '')[0];
|
||||||
|
@ -1185,10 +1194,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||||
actionAttribute = '';
|
actionAttribute = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (outerCardFooter && !options.cardLayout) {
|
|
||||||
className += ' bottomPaddedCard';
|
|
||||||
}
|
|
||||||
|
|
||||||
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
|
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
|
||||||
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
|
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
|
||||||
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
|
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
|
||||||
|
|
|
@ -12,7 +12,13 @@
|
||||||
|
|
||||||
function enabled() {
|
function enabled() {
|
||||||
|
|
||||||
var userId = Dashboard.getCurrentUserId();
|
var apiClient = window.ApiClient;
|
||||||
|
|
||||||
|
if (!apiClient) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var userId = apiClient.getCurrentUserId();
|
||||||
|
|
||||||
var val = appStorage.getItem('enableBackdrops-' + userId);
|
var val = appStorage.getItem('enableBackdrops-' + userId);
|
||||||
|
|
||||||
|
@ -46,7 +52,7 @@
|
||||||
ParentId: parentId
|
ParentId: parentId
|
||||||
};
|
};
|
||||||
|
|
||||||
return apiClient.getItems(Dashboard.getCurrentUserId(), options).then(function (result) {
|
return apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
|
||||||
|
|
||||||
var images = result.Items.map(function (i) {
|
var images = result.Items.map(function (i) {
|
||||||
return {
|
return {
|
||||||
|
@ -70,7 +76,7 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
getBackdropItemIds(apiClient, Dashboard.getCurrentUserId(), type, parentId).then(function (images) {
|
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
|
||||||
|
|
||||||
if (images.length) {
|
if (images.length) {
|
||||||
|
|
||||||
|
|
|
@ -129,7 +129,7 @@
|
||||||
for (var i = 0, length = users.length; i < length; i++) {
|
for (var i = 0, length = users.length; i < length; i++) {
|
||||||
var user = users[i];
|
var user = users[i];
|
||||||
|
|
||||||
html += '<div class="card squareCard bottomPaddedCard scalableCard"><div class="cardBox visualCardBox">';
|
html += '<div class="card squareCard scalableCard"><div class="cardBox cardBox-bottompadded visualCardBox">';
|
||||||
|
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
|
|
|
@ -186,9 +186,9 @@
|
||||||
}
|
}
|
||||||
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
var target = plugin.externalUrl ? ' target="_blank"' : '';
|
||||||
|
|
||||||
html += "<div class='card backdropCard bottomPaddedCard scalableCard'>";
|
html += "<div class='card backdropCard scalableCard'>";
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
|
@ -43,9 +43,9 @@
|
||||||
configPageUrl :
|
configPageUrl :
|
||||||
null;
|
null;
|
||||||
|
|
||||||
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard bottomPaddedCard scalableCard'>";
|
html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard scalableCard'>";
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
|
@ -230,11 +230,11 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var cssClass = "card squareCard bottomPaddedCard";
|
var cssClass = "card squareCard";
|
||||||
|
|
||||||
html += "<div data-id='" + user.Id + "' class='" + cssClass + "'>";
|
html += "<div data-id='" + user.Id + "' class='" + cssClass + "'>";
|
||||||
|
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox cardBox-bottompadded visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder cardPadder-square"></div>';
|
html += '<div class="cardPadder cardPadder-square"></div>';
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue