wazolab/ghibli-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic design for Film detail page

Browse Source
This commit is contained in:
Noé Viricel
2020-12-21 18:28:12 +01:00
parent 540521f236
commit a9771243a1
1 changed files with 65 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
pages/films/_id.vue
View File

@@ -1,36 +1,54 @@
<template> <template>
<section class="py-4"> <div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
<h1> <article
{{ film.title + " (" + film.release_date + ")" }} class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
</h1>
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
<p>{{ film.description }}</p>
<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 + "%" }} <header class="p-4 rounded-t-md">
</p> <h1>
<section class="people"> {{ film.title + " (" + film.release_date + ")" }}
<h3>People</h3> </h1>
<div>{{ film.people }}</div> <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
</section> </header>
<section class="vehicles"> <section class="px-4 infos">
<h3>Vehicles</h3> <p>{{ film.description }}</p>
<div>{{ film.vehicles }}</div> <p
</section> 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>
</section>
</article>
<section class="locations"> <aside class="w-full lg:ml-4">
<h3>Locations</h3> <section
<div>{{ film.locations }}</div> class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
</section> >
</section> <h3 class="font-medium text-lg">People</h3>
<div>{{ film.people }}</div>
</section>
<section
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<h3 class="font-medium text-lg">Vehicles</h3>
<div>{{ film.vehicles }}</div>
</section>
<section
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
>
<h3 class="font-medium text-lg">Locations</h3>
<div>{{ film.locations }}</div>
</section>
</aside>
</div>
</template> </template>
<script> <script>
@@ -66,4 +84,21 @@ export default {
}; };
</script> </script>
<style></style> <style lang="css">
article header {
background-color: #85ffbd;
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 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>