Shortlist moved to resultsSection & sizing for item not that have grid

This commit is contained in:
2022-03-04 18:36:59 +01:00
parent a0810fbee1
commit 7449650b64

View File

@@ -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);