From b11d2f752bc56281dbda1494108ebd870c1e17a8 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 14 Aug 2019 00:22:27 +0200
Subject: [PATCH] WIP. Collapsing backgroup header for move view on touchw

---
 src/components/Movie.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Movie.vue b/src/components/Movie.vue
index 15c0cb7..52fa5ae 100644
--- a/src/components/Movie.vue
+++ b/src/components/Movie.vue
@@ -2,7 +2,7 @@
   <section class="movie">
 
     <!-- HEADER w/ POSTER -->
-    <header class="movie__header" :style="{ 'background-image': movie && backdrop !== null ? 'url(' + ASSET_URL + ASSET_SIZES[1] + backdrop + ')' : '' }">
+    <header class="movie__header" :style="{ 'background-image': movie && backdrop !== null ? 'url(' + ASSET_URL + ASSET_SIZES[1] + backdrop + ')' : '' }" :class="compact ? 'compact' : ''" @click="compact=!compact">
       <div class="movie__wrap movie__wrap--header">
         <figure class="movie__poster">
           <img v-if="movie && poster === null"
@@ -137,7 +137,8 @@ export default {
       userLoggedIn: storage.sessionId ? true : false,
       requested: false,
       admin: localStorage.getItem('admin'),
-      showTorrents: false
+      showTorrents: false,
+      compact: false
     }
   },
   methods: {
@@ -230,7 +231,11 @@ export default {
     }
   }
   &__header {
+    $duration: 0.2s;
     height: 250px;
+    transform: scaleY(1);
+    transition: height $duration ease;
+    transform-origin: top;
     position: relative;
     background-size: cover;
     background-repeat: no-repeat;
@@ -250,6 +255,9 @@ export default {
       height: 100%;
       background: rgba($c-dark, 0.85);
     }
+    &.compact {
+      height: 100px;
+    }
   }
 
   &__poster {