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-08-12 00:33:56 -04:00
parent 106870b066
commit c0e29e7542
7 changed files with 73 additions and 78 deletions

View file

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

View file

@ -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 + '"') : '';

View file

@ -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) {

View file

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

View file

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

View file

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

View file

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