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

53
pages/films/_id.vue
View File

@@ -1,9 +1,16 @@
<template> <template>
<section class="py-4"> <div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
<article
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"
>
<header class="p-4 rounded-t-md">
<h1> <h1>
{{ film.title + " (" + film.release_date + ")" }} {{ film.title + " (" + film.release_date + ")" }}
</h1> </h1>
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2> <h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
</header>
<section class="px-4 infos">
<p>{{ film.description }}</p> <p>{{ film.description }}</p>
<p <p
class="film-score font-bold text-lg" class="film-score font-bold text-lg"
@@ -16,21 +23,32 @@
> >
{{ film.rt_score + "%" }} {{ film.rt_score + "%" }}
</p> </p>
<section class="people"> </section>
<h3>People</h3> </article>
<aside class="w-full lg:ml-4">
<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">People</h3>
<div>{{ film.people }}</div> <div>{{ film.people }}</div>
</section> </section>
<section class="vehicles"> <section
<h3>Vehicles</h3> 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> <div>{{ film.vehicles }}</div>
</section> </section>
<section class="locations"> <section
<h3>Locations</h3> 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> <div>{{ film.locations }}</div>
</section> </section>
</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>