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-07-30 16:09:07 -04:00
parent 75e4bd0cc5
commit a4a7f03459
8 changed files with 36 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

9
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
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);

23
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
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
};
});

2
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js vendored
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">\

8
dashboard-ui/components/itemidentifier/itemidentifier.js
View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'loading', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading) {
define(['dialogHelper', 'loading', 'cardBuilder', 'emby-input', 'emby-checkbox', 'paper-icon-button-light'], function (dialogHelper, loading, cardBuilder) {
var currentItem;
var currentItemType;
@ -154,7 +154,7 @@
function getSearchResultHtml(result, index) {
var html = '';
var cssClass = "card";
var cssClass = "card scalableCard";
if (currentItemType == "Episode") {
cssClass += " backdropCard";
@ -176,10 +176,10 @@
if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
html += '<div class="cardImage" style="background-image:url(\'' + displayUrl + '\');"></div>';
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>';
} else {
html += '<div class="cardImage iconCardImage"><i class="md-icon">search</i></div>';
html += '<div class="cardImageContainer coveredImage ' + cardBuilder.getDefaultColorClass(result.Name) + '"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
}
html += '</a>';
html += '</div>';

2
dashboard-ui/components/itemidentifier/itemidentifier.template.html
View file

@ -28,7 +28,7 @@
</form>
<div class="identificationSearchResults hide" style="text-align: center;">
<div class="identificationSearchResultList"></div>
<div class="identificationSearchResultList itemsContainer vertical-wrap"></div>
</div>
<form class="identifyOptionsForm hide" style="margin:auto;">

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

@ -146,7 +146,7 @@
type: "Primary"
});
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
html += '<div class="cardImageContainer coveredImage noScale" style="background-image:url(\'' + imgUrl + '\');"></div>';
}
else {
@ -154,7 +154,7 @@
imgUrl = 'css/images/logindefault.png';
html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');background-color:' + background + ';"></div>';
html += '<div class="cardImageContainer coveredImage noScale" style="background-image:url(\'' + imgUrl + '\');background-color:' + background + ';"></div>';
}
html += '</a>';

27
dashboard-ui/scripts/sections.js
View file

@ -46,51 +46,40 @@
var item = items[i];
var icon;
var backgroundColor = 'rgba(82, 181, 75, 0.9)';
switch (item.CollectionType) {
case "movies":
icon = "local_movies";
backgroundColor = 'rgba(176, 94, 81, 0.9)';
break;
case "music":
icon = "library_music";
backgroundColor = 'rgba(217, 145, 67, 0.9)';
break;
case "photos":
icon = "photo";
backgroundColor = 'rgba(127, 0, 0, 0.9)';
break;
case "livetv":
icon = "live_tv";
backgroundColor = 'rgba(217, 145, 67, 0.9)';
break;
case "tvshows":
icon = "live_tv";
backgroundColor = 'rgba(77, 88, 164, 0.9)';
break;
case "games":
icon = "folder";
backgroundColor = 'rgba(183, 202, 72, 0.9)';
break;
case "trailers":
icon = "local_movies";
backgroundColor = 'rgba(176, 94, 81, 0.9)';
break;
case "homevideos":
icon = "video_library";
backgroundColor = 'rgba(110, 52, 32, 0.9)';
break;
case "musicvideos":
icon = "video_library";
backgroundColor = 'rgba(143, 54, 168, 0.9)';
break;
case "books":
icon = "folder";
break;
case "channels":
icon = "folder";
backgroundColor = 'rgba(51, 136, 204, 0.9)';
break;
case "playlists":
icon = "folder";
@ -111,10 +100,10 @@
icon = item.icon || icon;
html += '<a' + onclick + ' data-id="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
html += '<a' + onclick + ' data-id="' + item.Id + '" class="' + cssClass + '" href="' + href + '" style="min-width:12.5%;">';
html += '<div class="cardBox ' + cardBuilder.getDefaultColorClass(item.Name) + '" style="margin:4px;">';
html += "<div class='cardText' style='padding:8px 10px;color:#fff;'>";
html += "<div class='cardText'>";
html += '<i class="md-icon">' + icon + '</i>';
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
html += "</div>";
@ -136,7 +125,7 @@
if (index) {
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
}
html += '<div>';
html += '<div style="display:flex;flex-wrap:wrap;">';
html += getLibraryButtonsHtml(items);
html += '</div>';
@ -203,7 +192,7 @@
function getCard(img, target, shape) {
shape = shape || 'backdropCard';
var html = '<div class="card ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>';
var html = '<div class="card scalableCard ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>';
if (target) {
html += '<a class="cardContent" href="' + target + '" target="_blank">';
@ -232,7 +221,7 @@
var nameText = AppInfo.isNativeApp ? 'Emby Theater' : '<a href="https://emby.media/download" target="_blank">Emby Theater</a>';
html += '<p>A beautiful app for your TV and large screen tablet. ' + nameText + ' runs on Windows, Xbox One, Google Chrome, FireFox, Microsoft Edge and Opera.</p>';
html += '<div class="itemsContainer">';
html += '<div class="itemsContainer vertical-wrap">';
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', 'https://emby.media/download');
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', 'https://emby.media/download');
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', 'https://emby.media/download');
@ -252,7 +241,7 @@
var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
html += '<p>Design beautiful Cover Art, enjoy free access to Emby apps, and more. ' + learnMoreText + '</p>';
html += '<div class="itemsContainer">';
html += '<div class="itemsContainer vertical-wrap">';
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater1.png', cardTarget);
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater2.png', cardTarget);
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.png', cardTarget);
@ -271,7 +260,7 @@
var learnMoreText = AppInfo.isNativeApp ? '' : '<a href="https://emby.media/premiere" target="_blank">Learn more</a>';
html += '<p>Combined horizontal and vertical swiping, better detail layouts, and more. ' + learnMoreText + '</p>';
html += '<div class="itemsContainer">';
html += '<div class="itemsContainer vertical-wrap">';
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms1.png', cardTarget, 'portraitCard');
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms2.png', cardTarget, 'portraitCard');
html += '</div>';

1
dashboard-ui/strings/en-US.json
View file

@ -2,6 +2,7 @@
"LabelExit": "Exit",
"LabelVisitCommunity": "Visit Community",
"LabelGithub": "Github",
"HeaderIdentifyItemHelp": "Enter one or more search criteria. Remove criteria to increase search results.",
"LabelSwagger": "Swagger",
"LabelStandard": "Standard",
"LabelApiDocumentation": "Api Documentation",