96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
|
<article
|
|
class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
|
|
>
|
|
<header class="p-4 rounded-t-md">
|
|
<h1>
|
|
{{ film.title + " (" + film.release_date + ")" }}
|
|
</h1>
|
|
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
|
|
</header>
|
|
|
|
<main class="inline-block px-4">
|
|
<h3>Summary</h3>
|
|
<p>{{ excerptOfDescription }}</p>
|
|
</main>
|
|
|
|
<footer class="px-4 flex items-center justify-between">
|
|
<p
|
|
class="film-score font-bold text-lg"
|
|
:class="{
|
|
'text-green-600': film.rt_score >= 75,
|
|
'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
|
|
'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
|
|
'text-red-600': film.rt_score >= 0 && film.rt_score < 25
|
|
}"
|
|
>
|
|
{{ film.rt_score + "%" }}
|
|
</p>
|
|
<router-link
|
|
class="rounded font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
|
|
:to="`/film/${film.id}`"
|
|
tag="button"
|
|
>
|
|
Read more
|
|
</router-link>
|
|
</footer>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Film",
|
|
props: {
|
|
film: {
|
|
type: Object,
|
|
default: {},
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
excerptOfDescription: function() {
|
|
return this.film.description.substring(0, 300) + "...";
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
header {
|
|
background-color: #85ffbd;
|
|
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
|
|
}
|
|
|
|
.film:nth-child(2n) header {
|
|
background-color: #ff9a8b;
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
#ff9a8b 0%,
|
|
#ff6a88 55%,
|
|
#ff99ac 100%
|
|
);
|
|
}
|
|
|
|
.film:nth-child(4n) header {
|
|
background-color: #fee140;
|
|
background-image: linear-gradient(90deg, #fee140 0%, #fa709a 100%);
|
|
}
|
|
|
|
.film:nth-child(5n) header {
|
|
background-color: #a9c9ff;
|
|
background-image: linear-gradient(180deg, #a9c9ff 0%, #ffbbec 100%);
|
|
}
|
|
|
|
.film-score::before {
|
|
content: "";
|
|
background: url(~assets/svg/rotten-tomatoes.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: inline-block;
|
|
vertical-align: sub;
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|