KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

WIP. Collapsing backgroup header for move view on touchw

Browse Source
This commit is contained in:
Kevin
2019-08-14 00:22:27 +02:00
parent 1a82b751ea
commit b11d2f752b
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Movie.vue
View File

@@ -2,7 +2,7 @@
<section class="movie"> <section class="movie">
<!-- HEADER w/ POSTER --> <!-- 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"> <div class="movie__wrap movie__wrap--header">
<figure class="movie__poster"> <figure class="movie__poster">
<img v-if="movie && poster === null" <img v-if="movie && poster === null"
@@ -137,7 +137,8 @@ export default {
userLoggedIn: storage.sessionId ? true : false, userLoggedIn: storage.sessionId ? true : false,
requested: false, requested: false,
admin: localStorage.getItem('admin'), admin: localStorage.getItem('admin'),
showTorrents: false showTorrents: false,
compact: false
} }
}, },
methods: { methods: {
@@ -230,7 +231,11 @@ export default {
} }
} }
&__header { &__header {
$duration: 0.2s;
height: 250px; height: 250px;
transform: scaleY(1);
transition: height $duration ease;
transform-origin: top;
position: relative; position: relative;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -250,6 +255,9 @@ export default {
height: 100%; height: 100%;
background: rgba($c-dark, 0.85); background: rgba($c-dark, 0.85);
} }
&.compact {
height: 100px;
}
} }
&__poster { &__poster {