Shortlist moved to resultsSection & sizing for item not that have grid
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<li class="movie-item" :class="{ shortList: shortList }">
|
<li class="movie-item">
|
||||||
<figure class="movie-item__poster">
|
<figure class="movie-item__poster">
|
||||||
<img
|
<img
|
||||||
class="movie-item__img"
|
class="movie-item__img"
|
||||||
@@ -35,10 +35,6 @@ export default {
|
|||||||
movie: {
|
movie: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true
|
||||||
},
|
|
||||||
shortList: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
@@ -119,28 +115,10 @@ export default {
|
|||||||
@import "./src/scss/main";
|
@import "./src/scss/main";
|
||||||
|
|
||||||
.movie-item {
|
.movie-item {
|
||||||
padding: 10px;
|
padding: 15px;
|
||||||
width: 50%;
|
width: 100%;
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
|
|
||||||
@include tablet-min {
|
|
||||||
padding: 15px;
|
|
||||||
width: 33%;
|
|
||||||
}
|
|
||||||
@include tablet-landscape-min {
|
|
||||||
padding: 15px;
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
@include desktop-min {
|
|
||||||
padding: 15px;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include desktop-lg-min {
|
|
||||||
padding: 15px;
|
|
||||||
width: 12.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover &__info > p {
|
&:hover &__info > p {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
@@ -155,6 +133,7 @@ export default {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.97) translateZ(0);
|
transform: scale(0.97) translateZ(0);
|
||||||
transition: opacity 1s ease, transform 0.5s ease;
|
transition: opacity 1s ease, transform 0.5s ease;
|
||||||
|
|
||||||
&.is-loaded {
|
&.is-loaded {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
|||||||
Reference in New Issue
Block a user