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 { .cardContent {
overflow: hidden; overflow: hidden;
}
.scalableCard .cardContent {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -202,7 +199,11 @@ button.cardContent {
opacity: .6; 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); -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-ms-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); -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); var index = String(sum).substr(-1);
return index % numRandomColors; return (index % numRandomColors) + 1;
} else { } else {
return getRandomInt(1, numRandomColors); return getRandomInt(1, numRandomColors);
} }
} }
function getDefaultColorClass(str) {
return 'defaultCardColor' + getDefaultColorIndex(str);
}
function getCardTextLines(lines, cssClass, forceLines) { function getCardTextLines(lines, cssClass, forceLines) {
var html = ''; var html = '';
@ -994,13 +998,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
} }
if (!imgUrl) { if (!imgUrl) {
cardImageContainerClass += ' defaultCardColor' + getDefaultColorIndex(item.Name); cardImageContainerClass += ' ' + getDefaultColorClass(item.Name);
} }
var separateCardBox = scalable; var separateCardBox = scalable;
var cardBoxClass = options.cardLayout ? 'cardBox visualCardBox' : 'cardBox';
if (!separateCardBox) { if (!separateCardBox) {
cardImageContainerClass += " cardBox"; cardImageContainerClass += " " + cardBoxClass;
} }
// cardBox can be it's own separate element if an outer footer is ever needed // 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 + '">'; cardContentOpen = '<button type="button" class="clearButton cardContent itemAction" data-action="' + action + '">';
cardContentClose = '</button>'; 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>'; cardBoxClose = '</div>';
cardScalableClose = '</div>'; cardScalableClose = '</div>';
cardImageContainerClose = '</div>'; cardImageContainerClose = '</div>';
@ -1057,7 +1061,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>'; cardImageContainerOpen += '<div class="cardText cardCenteredText">' + defaultName + '</div>';
} }
var innerCardFooterClass = 'innerCardFooter'; var footerCssClass;
var progressHtml = indicators.getProgressBarHtml(item); var progressHtml = indicators.getProgressBarHtml(item);
var innerCardFooter = ''; var innerCardFooter = '';
@ -1066,7 +1070,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
if (options.overlayText) { if (options.overlayText) {
var footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter'; footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false); innerCardFooter += getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, false);
footerOverlayed = true; footerOverlayed = true;
} }
@ -1080,7 +1084,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
var outerCardFooter = ''; var outerCardFooter = '';
if (!options.overlayText && !footerOverlayed) { 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); outerCardFooter = getCardFooterText(item, options, showTitle, imgUrl, footerCssClass, progressHtml, true);
} }
@ -1328,6 +1332,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
return { return {
getCardsHtml: getCardsHtml, getCardsHtml: getCardsHtml,
buildCards: buildCards, 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 = '\ 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 + '"> \ <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="cardScalable">\
<div class="cardPadder"></div>\ <div class="cardPadder"></div>\
<div class="cardContent">\ <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 currentItem;
var currentItemType; var currentItemType;
@ -154,7 +154,7 @@
function getSearchResultHtml(result, index) { function getSearchResultHtml(result, index) {
var html = ''; var html = '';
var cssClass = "card"; var cssClass = "card scalableCard";
if (currentItemType == "Episode") { if (currentItemType == "Episode") {
cssClass += " backdropCard"; cssClass += " backdropCard";
@ -176,10 +176,10 @@
if (result.ImageUrl) { if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); 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 { } 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 += '</a>';
html += '</div>'; html += '</div>';

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

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

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

@ -146,7 +146,7 @@
type: "Primary" 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 { else {
@ -154,7 +154,7 @@
imgUrl = 'css/images/logindefault.png'; 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>'; html += '</a>';

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

@ -46,51 +46,40 @@
var item = items[i]; var item = items[i];
var icon; var icon;
var backgroundColor = 'rgba(82, 181, 75, 0.9)';
switch (item.CollectionType) { switch (item.CollectionType) {
case "movies": case "movies":
icon = "local_movies"; icon = "local_movies";
backgroundColor = 'rgba(176, 94, 81, 0.9)';
break; break;
case "music": case "music":
icon = "library_music"; icon = "library_music";
backgroundColor = 'rgba(217, 145, 67, 0.9)';
break; break;
case "photos": case "photos":
icon = "photo"; icon = "photo";
backgroundColor = 'rgba(127, 0, 0, 0.9)';
break; break;
case "livetv": case "livetv":
icon = "live_tv"; icon = "live_tv";
backgroundColor = 'rgba(217, 145, 67, 0.9)';
break; break;
case "tvshows": case "tvshows":
icon = "live_tv"; icon = "live_tv";
backgroundColor = 'rgba(77, 88, 164, 0.9)';
break; break;
case "games": case "games":
icon = "folder"; icon = "folder";
backgroundColor = 'rgba(183, 202, 72, 0.9)';
break; break;
case "trailers": case "trailers":
icon = "local_movies"; icon = "local_movies";
backgroundColor = 'rgba(176, 94, 81, 0.9)';
break; break;
case "homevideos": case "homevideos":
icon = "video_library"; icon = "video_library";
backgroundColor = 'rgba(110, 52, 32, 0.9)';
break; break;
case "musicvideos": case "musicvideos":
icon = "video_library"; icon = "video_library";
backgroundColor = 'rgba(143, 54, 168, 0.9)';
break; break;
case "books": case "books":
icon = "folder"; icon = "folder";
break; break;
case "channels": case "channels":
icon = "folder"; icon = "folder";
backgroundColor = 'rgba(51, 136, 204, 0.9)';
break; break;
case "playlists": case "playlists":
icon = "folder"; icon = "folder";
@ -111,10 +100,10 @@
icon = item.icon || icon; icon = item.icon || icon;
html += '<a' + onclick + ' data-id="' + item.Id + '" class="' + cssClass + '" href="' + href + '">'; html += '<a' + onclick + ' data-id="' + item.Id + '" class="' + cssClass + '" href="' + href + '" style="min-width:12.5%;">';
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">'; 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 += '<i class="md-icon">' + icon + '</i>';
html += '<span style="margin-left:.7em;">' + item.Name + '</span>'; html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
html += "</div>"; html += "</div>";
@ -136,7 +125,7 @@
if (index) { if (index) {
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>'; html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
} }
html += '<div>'; html += '<div style="display:flex;flex-wrap:wrap;">';
html += getLibraryButtonsHtml(items); html += getLibraryButtonsHtml(items);
html += '</div>'; html += '</div>';
@ -203,7 +192,7 @@
function getCard(img, target, shape) { function getCard(img, target, shape) {
shape = shape || 'backdropCard'; 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) { if (target) {
html += '<a class="cardContent" href="' + target + '" target="_blank">'; 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>'; 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 += '<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/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/theater2.png', 'https://emby.media/download');
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.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>'; 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 += '<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/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/theater2.png', cardTarget);
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/theater3.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>'; 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 += '<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/ms1.png', cardTarget, 'portraitCard');
html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms2.png', cardTarget, 'portraitCard'); html += getCard('https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/apps/ms2.png', cardTarget, 'portraitCard');
html += '</div>'; html += '</div>';

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

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