From a4a7f0345906f3b5866223fec481729c65d0beba Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 30 Jul 2016 16:09:07 -0400
Subject: [PATCH] update cards

---
 .../emby-webcomponents/cardbuilder/card.css   |  9 ++++---
 .../cardbuilder/cardbuilder.js                | 23 +++++++++-------
 .../cardbuilder/peoplecardbuilder.js          |  2 +-
 .../itemidentifier/itemidentifier.js          |  8 +++---
 .../itemidentifier.template.html              |  2 +-
 dashboard-ui/scripts/loginpage.js             |  4 +--
 dashboard-ui/scripts/sections.js              | 27 ++++++-------------
 dashboard-ui/strings/en-US.json               |  1 +
 8 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index 558d47967..ea22f0f81 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -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);
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 82dfd8729..cd9ab9a0f 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -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
         };
     });
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
index d468eb266..dd6accc7e 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
@@ -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">\
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.js b/dashboard-ui/components/itemidentifier/itemidentifier.js
index 1992dd385..630fb82b3 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.js
@@ -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>';
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.template.html b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
index 78c31a7d3..49a4ab28b 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.template.html
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
@@ -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;">
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index a4c1795af..ca7ff7433 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -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>';
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 3b9e54f23..5dc40e7d7 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -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>';
diff --git a/dashboard-ui/strings/en-US.json b/dashboard-ui/strings/en-US.json
index 3e52c7644..665389f9a 100644
--- a/dashboard-ui/strings/en-US.json
+++ b/dashboard-ui/strings/en-US.json
@@ -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",