Merge pull request #1171 from MrTimscampi/placeholder

Enable a simple color placeholder for loading cards

src/components/cardbuilder/card.css

@@ -192,9 +192,14 @@ button::-moz-focus-inner {
 
     /* Needed in case this is a button */
     display: block;
-
-    /* Needed in case this is a button */
     margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+    cursor: pointer;
+    color: inherit;
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
 
     /* Needed in safari */
     height: 100%;
@@ -203,19 +208,12 @@ button::-moz-focus-inner {
     contain: strict;
 }
 
-.cardContent-button {
+.cardContent:not(.defaultCardBackground) {
-    border: 0 !important;
+    background-color: transparent;
-    padding: 0 !important;
-    cursor: pointer;
-    color: inherit;
-    width: 100%;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
 }
 
-.cardContent-button:not(.defaultCardBackground) {
+.cardBox:not(.visualCardBox) .cardPadder {
-    background-color: transparent;
+    background-color: #242424;
 }
 
 .visualCardBox .cardContent {
@@ -223,7 +221,8 @@ button::-moz-focus-inner {
     border-bottom-right-radius: 0;
 }
 
-.cardContent-shadow {
+.cardContent-shadow,
+.cardBox:not(.visualCardBox) .cardPadder {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 

src/components/cardbuilder/cardBuilder.js

@@ -1367,9 +1367,6 @@ import 'programStyles';
             let cardScalableClose = '';
 
             let cardContentClass = 'cardContent';
-            if (!options.cardLayout) {
-                cardContentClass += ' cardContent-shadow';
-            }
 
             let blurhashAttrib = '';
             if (blurhash && blurhash.length > 0) {
@@ -1377,21 +1374,20 @@ import 'programStyles';
             }
 
             if (layoutManager.tv) {
-
                 // Don't use the IMG tag with safari because it puts a white border around it
                 cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
 
                 cardImageContainerClose = '</div>';
             } else {
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
+                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
 
                 cardImageContainerClose = '</button>';
             }
 
             let cardScalableClass = 'cardScalable';
 
-            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
+            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
 

src/components/images/style.css

@@ -1,11 +1,11 @@
 .lazy-image-fadein {
     opacity: 1;
-    transition: opacity 0.7s;
+    transition: opacity 0.5s;
 }
 
 .lazy-image-fadein-fast {
     opacity: 1;
-    transition: opacity 0.2s;
+    transition: opacity 0.1s;
 }
 
 .lazy-hidden {

src/components/remotecontrol/remotecontrol.js

@@ -196,7 +196,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
             }
         } else {
-            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
+            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
         }
     }
 

src/themes/appletv/theme.css

@@ -122,8 +122,8 @@ html {
 }
 
 .paperList,
-.visualCardBox {
+.visualCardBox,
-    background-color: #fff;
+.cardBox:not(.visualCardBox) .cardPadder {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -455,7 +455,6 @@ html {
     border-color: #00a4dc !important;
 }
 
-.cardContent-button,
 .itemDetailImage,
 .cardOverlayContainer {
     border-radius: 0.5rem;

src/themes/blueradiance/theme.css

@@ -450,6 +450,10 @@ html {
     color: #4285f4;
 }
 
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/light/theme.css

@@ -432,6 +432,10 @@ html {
     color: #4285f4;
 }
 
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: #fff;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #00a4dc !important;

src/themes/purplehaze/theme.css

@@ -548,15 +548,25 @@ a[data-role=button] {
 }
 
 .personCard .cardScalable {
-    border-radius: 50%;
+    border-radius: 50% !important;
     border: 1px solid rgb(255, 255, 255);
 }
 
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 1em;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #ff77f1 !important;
 }
 
+.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
+.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
+    border-radius: 1.5em;
+}
+
 .layout-desktop,
 .scrollY {
     scrollbar-width: thin;
@@ -602,12 +612,6 @@ a[data-role=button] {
     width: 40vw;
 }
 
-.personCard .cardPadder-overflowPortrait,
-.personCard .cardPadder-portrait {
-    padding-bottom: 100%;
-    contain: strict;
-}
-
 .personCard .coveredImage {
     clip-path: circle(50% at 50% 50%);
 }
@@ -619,3 +623,10 @@ a[data-role=button] {
 .personCard .cardOverlayButton-br {
     right: 20%;
 }
+
+.personCard .cardPadder-overflowPortrait,
+.personCard .cardPadder-portrait {
+    padding-bottom: 100%;
+    contain: strict;
+    border-radius: 50% !important;
+}

src/themes/wmc/theme.css

@@ -430,6 +430,10 @@ html {
     color: #4285f4;
 }
 
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: #0f3562;
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #fff !important;