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

Some border radius, increased font size & bold title

Browse Source
This commit is contained in:
Kevin
2022-07-26 00:31:16 +02:00
parent 7f68d2bf79
commit eae632d0da
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/MoviesListItem.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<li class="movie-item" ref="list-item"> <li class="movie-item" ref="list-item">
<figure class="movie-item__poster" ref="poster" @click="openMoviePopup"> <figure ref="poster" class="movie-item__poster" @click="openMoviePopup">
<img <img
class="movie-item__img" class="movie-item__img"
:alt="posterAltText" :alt="posterAltText"
@@ -15,7 +15,9 @@
</figure> </figure>
<div class="movie-item__info"> <div class="movie-item__info">
<p v-if="movie.title || movie.name">{{ movie.title || movie.name }}</p> <p v-if="movie.title || movie.name" class="movie-item__title">
{{ movie.title || movie.name }}
</p>
<p v-if="movie.year">{{ movie.year }}</p> <p v-if="movie.year">{{ movie.year }}</p>
<p v-if="movie.type == 'person'"> <p v-if="movie.type == 'person'">
Known for: {{ movie.known_for_department }} Known for: {{ movie.known_for_department }}
@@ -40,7 +42,7 @@ export default {
}, },
data() { data() {
return { return {
poster: undefined, poster: null,
observed: false, observed: false,
posterSizes: [ posterSizes: [
{ {
@@ -150,17 +152,18 @@ export default {
img { img {
width: 100%; width: 100%;
border-radius: 10px;
} }
} }
&__info { &__info {
padding-top: 15px; padding-top: 10px;
font-weight: 300; font-weight: 300;
> p { > p {
color: $text-color-70; color: $text-color-70;
margin: 0; margin: 0;
font-size: 11px; font-size: 14px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: color 0.5s ease; transition: color 0.5s ease;
cursor: pointer; cursor: pointer;
@@ -172,6 +175,10 @@ export default {
} }
} }
} }
&__title {
font-weight: 400;
}
} }
.no-image { .no-image {