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

update cards

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View file

@ -64,7 +64,7 @@
padding-bottom: 18.5%;
}
.card .cardBox {
.cardBox {
padding: 0 !important;
margin: 0;
transition: none;
@ -77,7 +77,7 @@
@media all and (min-width: 600px) {
.layout-desktop .card .cardBox, .layout-mobile .card .cardBox {
.cardBox-mobile {
margin: 3px;
}
}
@ -92,14 +92,10 @@
border-color: transparent;
}
.bottomPaddedCard .cardBox:not(.visualCardBox) {
.cardBox-bottompadded {
margin-bottom: 1em;
}
.hiddenScrollX .bottomPaddedCard .cardBox, .smoothScrollX .bottomPaddedCard .cardBox {
margin-bottom: 0;
}
.btnCardOptions {
text-align: right;
float: right;
@ -107,18 +103,6 @@
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 {
display: flex;
position: absolute;

103
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
View file

@ -1012,6 +1012,19 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var imgInfo = getCardImageUrl(item, apiClient, options);
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';
if (options.coverImage || imgInfo.coverImage) {
cardImageContainerClass += ' coveredImage';
@ -1027,6 +1040,47 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var separateCardBox = scalable;
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) {
cardImageContainerClass += " " + cardBoxClass;
}
@ -1110,56 +1164,11 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
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) {
var defaultName = item.EpisodeTitle ? item.Name : itemHelper.getDisplayName(item);
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 prefix = (item.SortName || item.Name || '')[0];
@ -1185,10 +1194,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
actionAttribute = '';
}
if (outerCardFooter && !options.cardLayout) {
className += ' bottomPaddedCard';
}
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';

12
dashboard-ui/scripts/autobackdrops.js
View file

@ -12,7 +12,13 @@
function enabled() {
var userId = Dashboard.getCurrentUserId();
var apiClient = window.ApiClient;
if (!apiClient) {
return false;
}
var userId = apiClient.getCurrentUserId();
var val = appStorage.getItem('enableBackdrops-' + userId);
@ -46,7 +52,7 @@
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) {
return {
@ -70,7 +76,7 @@
return;
}
getBackdropItemIds(apiClient, Dashboard.getCurrentUserId(), type, parentId).then(function (images) {
getBackdropItemIds(apiClient, apiClient.getCurrentUserId(), type, parentId).then(function (images) {
if (images.length) {

2
dashboard-ui/scripts/loginpage.js
View file

@ -129,7 +129,7 @@
for (var i = 0, length = users.length; i < length; 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">';

4
dashboard-ui/scripts/plugincatalogpage.js
View file

@ -186,9 +186,9 @@
}
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="cardPadder cardPadder-backdrop"></div>';

4
dashboard-ui/scripts/pluginspage.js
View file

@ -43,9 +43,9 @@
configPageUrl :
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="cardPadder cardPadder-backdrop"></div>';

4
dashboard-ui/scripts/userprofilespage.js
View file

@ -230,11 +230,11 @@
var html = '';
var cssClass = "card squareCard bottomPaddedCard";
var cssClass = "card squareCard";
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="cardPadder cardPadder-square"></div>';