From 37947805743b3526ea828dbf26e4152dd65ca755 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Tue, 16 Apr 2019 21:28:42 +0900
Subject: [PATCH] Fix homepage

---
 client/package-lock.json             | 47 ++++++++++++++++++++--------
 client/src/assets/css/base.css       | 38 +++++++++++++++++++++-
 client/src/components/SearchForm.vue | 11 +++++--
 client/src/views/Home.vue            | 35 +++++++++++++++++++--
 4 files changed, 112 insertions(+), 19 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index e65b10e..66fac0d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2767,7 +2767,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5043,7 +5044,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5064,12 +5066,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5084,17 +5088,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5211,7 +5218,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5223,6 +5231,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5237,6 +5246,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5244,12 +5254,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5268,6 +5280,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5348,7 +5361,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5360,6 +5374,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5445,7 +5460,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5481,6 +5497,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5500,6 +5517,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5543,12 +5561,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9435,7 +9455,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index 2c010f0..770568a 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -1 +1,37 @@
-@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
+
+.transition-all {
+  transition-property: all;
+}
+
+.transition-fastest {
+  transition-duration: 50ms;
+}
+
+.transition-faster {
+  transition-duration: 100ms;
+}
+
+.transition-fast {
+  transition-duration: 150ms;
+}
+
+.transition-medium {
+  transition-duration: 200ms;
+}
+
+.ease-out-quad {
+  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+}
+
+.ease-in-quad {
+  transition-timing-function: cubic-bezier(.55, .085, .68, .53);
+}
+
+.scale-70 {
+  transform: scale(.7);
+}
+
+.scale-100 {
+  transform: scale(1);
+}
\ No newline at end of file
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index 7818559..8c6df4a 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -17,7 +17,14 @@
           <v-icon name="caret-down" class="ml-1"></v-icon>
         </div>
       </div>
-      <transition name="bounce">
+      <transition
+        enter-active-class="transition-all transition-fastest ease-out-quad"
+        leave-active-class="transition-all transition-faster ease-in-quad"
+        enter-class="opacity-0 scale-70"
+        enter-to-class="opacity-100 scale-100"
+        leave-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-70"
+      >
         <div
           v-if="dropdown"
           @click="dropdown = !dropdown"
@@ -27,7 +34,7 @@
             v-for="(region, index) in regions" 
             :key="region"
             @click="selectedRegion = region"
-            class="px-4 py-1 text-sm bg-teal-600 hover:bg-teal-500"
+            class="px-4 py-1 text-xs bg-teal-600 hover:bg-teal-500"
             :class="classRegions(index)"
           >
             {{ region }}
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index fd09854..427af70 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="homepage h-screen flex flex-col items-center justify-center">
 
+    <div class="absolute top-0 right-0">
+      <div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
+    </div>
+
+    <div class="absolute bottom-0 left-0">
+      <div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
+    </div>
+
     <div class="relative flex flex-col items-center w-full max-w-lg">
-      <div class="absolute logo">
-        <img src="@/assets/Logo.svg" alt="logo">
-      </div>
+      <img class="absolute logo" src="@/assets/Logo.svg" alt="logo">
       <SearchForm @formSubmit="redirect"/>
     </div>
 
@@ -34,6 +40,29 @@ export default {
   background-repeat: no-repeat;
 }
 
+.line {
+  background: rgba(178, 245, 234, .55);
+}
+
+.line::after {
+  content: '';
+  position: absolute;
+  width: 4.5rem;
+  height: .5rem;
+  background: rgba(178, 245, 234, .55);
+}
+
+.line-top::after {
+  transform-origin: bottom right;
+  transform: rotate(90deg) translateX(100%);
+}
+
+.line-bottom::after {
+  transform-origin: top left;
+  transform: rotate(90deg) translateX(-100%);
+  margin-left: .5rem;
+}
+
 .logo {
   top: -160px;
 }