mirror of
https://github.com/KevinMidboe/seasonedRequest.git
synced 2025-10-29 09:50:14 +00:00
93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<li class="movies-item">
|
|
<a class="movies-item__link" :class="{'no-image': noImage}" href="" @click.prevent="openMoviePopup(movie.id, movie.type, true)">
|
|
<figure class="movies-item__poster">
|
|
<img v-if="!noImage" class="movies-item__img" src="~assets/placeholder.png" v-img="poster()" alt="">
|
|
<img v-if="noImage" class="movies-item__img is-loaded" src="~assets/no-image.png" alt="">
|
|
</figure>
|
|
<div class="movies-item__content">
|
|
<p class="movies-item__title">{{ movie.title }}</p>
|
|
<p class="movies-item__title">{{ movie.year }}</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
import img from '../directives/v-image.js'
|
|
|
|
export default {
|
|
props: ['movie'],
|
|
directives: {
|
|
img: img
|
|
},
|
|
data(){
|
|
return{
|
|
noImage: false
|
|
}
|
|
},
|
|
methods: {
|
|
poster() {
|
|
if(this.movie.poster_path){
|
|
return 'https://image.tmdb.org/t/p/w300' + this.movie.poster_path;
|
|
} else {
|
|
this.noImage = true;
|
|
}
|
|
},
|
|
openMoviePopup(id, type, event){
|
|
console.log('open:', id, type, event)
|
|
eventHub.$emit('openMoviePopup', id, type, event);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./src/scss/variables";
|
|
@import "./src/scss/media-queries";
|
|
.movies-item{
|
|
&__link{
|
|
text-decoration: none;
|
|
color: rgba($c-dark, 0.5);
|
|
font-weight: 300;
|
|
}
|
|
&__content{
|
|
padding-top: 15px;
|
|
}
|
|
&__poster{
|
|
transition: transform 0.5s ease, box-shadow 0.5s ease;
|
|
transform: translateZ(0);
|
|
background: $c-white;
|
|
}
|
|
&__img{
|
|
width: 100%;
|
|
opacity: 0;
|
|
transform: scale(0.97) translateZ(0);
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
&.is-loaded{
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
&__link:not(.no-image):hover &__poster{
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 10px rgba($c-dark, 0.1);
|
|
}
|
|
&__title{
|
|
margin: 0;
|
|
font-size: 11px;
|
|
letter-spacing: 0.5px;
|
|
transition: color 0.5s ease;
|
|
@include mobile-ls-min{
|
|
font-size: 12px;
|
|
}
|
|
@include tablet-min{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
&__link:hover &__title{
|
|
color: $c-dark;
|
|
}
|
|
}
|
|
</style>
|