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