finish card-anime

Author: felixlberg

lib/modules/apostrophe-assets/public/css/components/cards.less

@@ -165,6 +165,16 @@
     background-color: rgba(0,0,0,0.5);
     z-index: 2;
     cursor: pointer;
+    .go-back {
+      color: @white;
+      display: block;
+      height: 64px;
+      .flex();
+      .flex-align-items(center);
+      i {
+        margin: 0 5px;
+      }
+    }
   }
   .anime-container {
     position: absolute;
@@ -183,18 +193,23 @@
           .apos-area {
             max-height: 45vh;
             overflow-y: scroll;
+            .apos-area-widget-wrapper {
+              margin-bottom: 64px;
+            }
+          }
+          .apos-area:after {
+            content: '';
+            pointer-events: none;
+            position: absolute;
+            left: 0;
+            bottom: 34px;
+            width: 100%;
+            height: 15%;
+            background: rgb(255,255,255);
+            background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
+            z-index: 1;
           }
         }
-        // .card-content:after {
-        //   content: '';
-        //   position: absolute;
-        //   top: 0;
-        //   left: 0;
-        //   width: 100%;
-        //   height: 100%;
-        //   box-shadow: inset 0px 30px 8px -10px #000, inset 0px -30px 8px -10px #fff;
-        //   z-index: 1;
-        // }
       }
     }
   }

lib/modules/card-widgets/public/js/lean.js

@@ -3,7 +3,7 @@ apos.utils.widgetPlayers['card'] = function(el, data, options) {
   if (data.clickAction == 'clickActionAnime') {
     // Get elements
     var body = document.querySelector('body');
-    var navElements = document.querySelectorAll('.brand-logo, .sidenav-trigger, .nav-activator')
+    var nav = document.querySelector('.nav-wrapper')
     var sectionHeader = document.querySelectorAll('.section-header');
     var aposUiElements = el.querySelectorAll('.apos-ui');
     var animeCol = el.querySelector('.anime');
@@ -30,11 +30,6 @@ apos.utils.widgetPlayers['card'] = function(el, data, options) {
           block: 'center'
       });
 
-      // Calculate proportions
-      function round(value, decimals) {
-          return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
-      }
-
       setTimeout(function() {
         var imageAnimation = anime({
           targets: animeImage,
@@ -54,15 +49,22 @@ apos.utils.widgetPlayers['card'] = function(el, data, options) {
         });
 
         var navAnimation = anime({
-          targets: navElements,
+          targets: nav,
           opacity: '0',
           duration: 250,
           easing: 'easeInOutQuad'
         });
       }, 100);
+
+      setTimeout(function() {
+        nav.style.display = 'none';
+      }, 600);
+
     }
     function imageAnimationOff() {
 
+      nav.style.display = 'block';
+
       var imageAnimation = anime({
         targets: animeImage,
         translateX: '0',
@@ -82,7 +84,7 @@ apos.utils.widgetPlayers['card'] = function(el, data, options) {
       });
 
       var navAnimation = anime({
-        targets: navElements,
+        targets: nav,
         opacity: '1',
         duration: 250,
         easing: 'easeInOutQuad'

lib/modules/card-widgets/views/components/anime.html

@@ -69,7 +69,7 @@
       </div>
 
       <div class="anime-overlay">
-        <a class="go-back"><i class="material-icons">add</i>Go Back</a>
+        <a class="flow-text go-back"><i class="material-icons">arrow_back</i>Go Back</a>
       </div>
 
       <div class="anime-container">