From a9771243a1173d339e34fb93460dbe04c8eabbce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 21 Dec 2020 18:28:12 +0100
Subject: [PATCH] Basic design for Film detail page

---
 pages/films/_id.vue | 95 +++++++++++++++++++++++++++++++--------------
 1 file changed, 65 insertions(+), 30 deletions(-)

diff --git a/pages/films/_id.vue b/pages/films/_id.vue
index e4c8a52..8e8b21e 100644
--- a/pages/films/_id.vue
+++ b/pages/films/_id.vue
@@ -1,36 +1,54 @@
 <template>
-  <section class="py-4">
-    <h1>
-      {{ film.title + " (" + film.release_date + ")" }}
-    </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
-      }"
+  <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"
     >
-      {{ film.rt_score + "%" }}
-    </p>
-    <section class="people">
-      <h3>People</h3>
-      <div>{{ film.people }}</div>
-    </section>
+      <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="vehicles">
-      <h3>Vehicles</h3>
-      <div>{{ film.vehicles }}</div>
-    </section>
+      <section class="px-4 infos">
+        <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 + "%" }}
+        </p>
+      </section>
+    </article>
 
-    <section class="locations">
-      <h3>Locations</h3>
-      <div>{{ film.locations }}</div>
-    </section>
-  </section>
+    <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="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>
 
 <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>