From 066f98cc2482e9a8a9bc3f77ea847de6546058a6 Mon Sep 17 00:00:00 2001
From: Kylart <Kylart.dev@gmail.com>
Date: Wed, 16 Aug 2017 18:47:29 +0100
Subject: [PATCH] Designed inroResults! Cheers~

---
 components/infoResults.vue | 72 +++++++++++++++++++++++++++++++-------
 components/settings.vue    |  4 +--
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/components/infoResults.vue b/components/infoResults.vue
index e578252..fdc4aa9 100644
--- a/components/infoResults.vue
+++ b/components/infoResults.vue
@@ -1,31 +1,37 @@
 <template lang="pug">
   v-dialog(width='800', v-model='$store.state.info.show', persistent, lazy, absolute)
-    v-card.secondary
+    v-card
       v-card-title.headline Result for «{{ searchTerm }}»
       v-card-text
         h4(v-if='error') {{ error }}
         div(v-else-if='loading')
           h5.loading-text.white--text Gathering data...
           h5.loading-text.white--text Info should be displayed in a few seconds
-        v-card.secondary(v-else)
+        v-card.secondary.pb-3(v-else)
           v-layout(row, wrap)
-            v-flex(xs9)
+            v-flex.flex-v-centered(xs9)
               v-card-title.info-title
-                | {{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }} [{{info.type }}]
+                | 「{{ info.alternativeTitles.japanese[0].replace('Japanese: ', '') }}」ー {{ info.type }}
             v-flex(xs3)
-              v-card-title {{ info.statistics.score.value }} ({{ info.statistics.score.count }})
-          v-layout(row, wrap)
+              v-card-title.score-container
+                p.info-score {{ info.statistics.score.value }}
+                p.info-score ({{ info.statistics.score.count }} votes)
+          v-layout.mb-3(row, wrap)
             v-flex.info-pic-container(xs3)
               img.info-pic(:src='info.image')
             v-flex.info-synopsis-container(xs9)
               p.info-synopsis {{ info.synopsis }}
           v-layout.top-info
-            v-flex.info-text(xs9) {{ info.genres.join(', ') }}
-            v-flex.info-text(xs3) {{ info.episodes }} {{ episodeLabel }}
+            v-flex.info-text.pl-2(xs9)
+              span.genre-title Genres:
+              span.info-genres {{ info.genres.join(' / ') }}
+            v-flex.info-text.h-centered(xs3) {{ info.episodes }} {{ episodeLabel }}
           v-layout.bottom-info
-            v-flex.info-text(xs5) {{ info.studios.join(', ') }}
+            v-flex.info-text.pl-2(xs5)
+              span.genre-title Studios:
+              span.info-genres.pl-4 {{ info.studios.join(' / ') }}
             v-flex.info-text(xs4) {{ info.classification }}
-            v-flex.info-text(xs3) {{ info.status }} ({{ info.aired.split(' ')[2] }})
+            v-flex.info-text.h-centered(xs3) {{ info.status }} ({{ info.aired.split(' ')[2] }})
       v-card-actions
         v-spacer
         v-btn.blue--text.darken-1.close-button(flat, @click="$store.commit('showInfo', false)") Thanks!
@@ -56,6 +62,17 @@
 </script>
 
 <style scoped>
+  .flex-v-centered
+  {
+    display: flex;
+    align-items: center;
+  }
+
+  .h-centered
+  {
+    text-align: center;
+  }
+
   .loading-text
   {
     text-align: center;
@@ -64,7 +81,24 @@
 
   .info-title
   {
+    width: 100%;
     padding-left: 15% !important;
+    font-family: 'Hiragino Mincho Pro', 'MS PMincho', serif;
+    font-size: 24px;
+    font-weight: 100;
+  }
+
+  .score-container
+  {
+    justify-content: center;
+  }
+
+  .info-score
+  {
+    margin-bottom: 0;
+    font-size: 20px;
+    font-weight: 200;
+    letter-spacing: 1px;
   }
 
   .info-pic-container
@@ -80,7 +114,7 @@
 
   .info-synopsis-container
   {
-    padding: 15px;
+    padding: 20px;
   }
 
   .info-synopsis
@@ -102,4 +136,18 @@
     font-weight: 100;
     font-size: 16px;
   }
-</style>
\ No newline at end of file
+
+  .genre-title
+  {
+    padding-left: 15px;
+    letter-spacing: 1px;
+    font-weight: 100;
+    font-style: italic;
+  }
+
+  .info-genres
+  {
+    padding-left: 5%;
+    letter-spacing: 1px;
+  }
+</style>
diff --git a/components/settings.vue b/components/settings.vue
index 9e257c6..dad6ab7 100644
--- a/components/settings.vue
+++ b/components/settings.vue
@@ -41,7 +41,7 @@
 
       v-container.container(fluid)
         v-layout(row, wrap, justify-center)
-          v-flex(xs11)
+          v-flex.pb-4(xs11)
             v-card
               v-card-title#download.headline
                 | Download
@@ -129,7 +129,7 @@
       }
     },
     computed: {
-      config: function () {
+      config () {
         return this.$store.state.config
       },
       fansubChoices () {