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>
<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>
{{ film.title + " (" + film.release_date + ")" }}
</h1>
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
</header>
<section class="px-4 infos">
<p>{{ film.description }}</p>
<p
class="film-score font-bold text-lg"
@@ -16,21 +23,32 @@
>
{{ film.rt_score + "%" }}
</p>
<section class="people">
<h3>People</h3>
</section>
</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>
</section>
<section class="vehicles">
<h3>Vehicles</h3>
<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="locations">
<h3>Locations</h3>
<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>
</section>
</aside>
</div>
</template>
<script>
@@ -66,4 +84,21 @@ export default {
};
</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>