From 0c846ef728c1d9ca3e9b8f9cc5f1ade198d4a812 Mon Sep 17 00:00:00 2001
From: daniilorain <dnlorn@gmail.com>
Date: Wed, 13 Jan 2021 17:36:44 +0300
Subject: [PATCH] make searchbar staying on the same place

---
 src/views/home/Home.vue | 190 +++++++++++++++++++++-------------------
 1 file changed, 102 insertions(+), 88 deletions(-)

diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index 39732a70..89c7c756 100644
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -1,104 +1,107 @@
 <template>
   <v-container class="fill-height canvas" fluid>
     <HomeToolbar />
-    <v-row no-gutters style="height: calc(100% - 64)">
-      <v-col cols="12">
-        <v-row>
-          <v-col
-            cols="12"
-            class="d-flex align-center justify-center primary--text"
-          >
-            <span style="font-family: Script1-Casual; font-size: 72px"
-              >Better Call Dev</span
+    <v-container class="fill-height canvas main-rows-wrapper" fluid>
+      <v-row no-gutters class="search-row">
+        <v-col cols="12">
+          <v-row>
+            <v-col
+              cols="12"
+              class="d-flex align-center justify-center primary--text"
             >
-          </v-col>
-        </v-row>
-        <v-row justify="center" no-gutters>
-          <v-col cols="12" sm="8" lg="6" xl="4">
-            <SearchBox />
-          </v-col>
-          <v-col cols="12" align="center">
-            <v-btn
-              large
-              depressed
-              color="border"
-              class="text--secondary mr-5"
-              to="/dapps"
-              ><v-icon left color="error">mdi-fire</v-icon>Explore DApps</v-btn
-            >
-            <v-btn
-              large
-              depressed
-              color="border"
-              class="text--secondary mr-5"
-              to="/search"
-              >Advanced Search</v-btn
-            >
-            <v-btn
-              large
-              depressed
-              color="border"
-              class="text--secondary"
-              :loading="pickingRandom"
-              @click="pickRandom"
-              >Pick Random</v-btn
-            >
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-    <v-fade-transition>
-      <v-row justify="center" v-show="stats.length > 0">
-        <v-col cols="6">
-          <v-row
-            class="caption font-weight-medium text-uppercase text-right text--secondary"
-            no-gutters
-          >
-            <v-col class="pl-12"></v-col>
-            <v-col>Unique contracts</v-col>
-            <v-col>
-              <router-link
-                style="text-decoration: none"
-                :to="`/stats/mainnet/fa12`"
+              <span style="font-family: Script1-Casual; font-size: 72px"
+                >Better Call Dev</span
               >
-                <span class="secondary--text">FA tokens</span>
-              </router-link>
             </v-col>
-            <v-col>Contract calls</v-col>
-            <v-col class="text-left pl-12">Synced</v-col>
           </v-row>
-          <v-row
-            v-for="(item, idx) in stats"
-            :key="idx"
-            class="text-right my-2"
-            justify="center"
-            align="center"
-            no-gutters
-          >
-            <v-col class="text-left pl-12">
+          <v-row justify="center" no-gutters>
+            <v-col cols="12" sm="8" lg="6" xl="4">
+              <SearchBox />
+            </v-col>
+            <v-col cols="12" align="center">
               <v-btn
-                small
-                text
-                :to="`/stats/${item.network}/general`"
-                :class="
-                  item.network === 'mainnet'
-                    ? 'secondary--text'
-                    : 'text--primary'
-                "
+                large
+                depressed
+                color="border"
+                class="text--secondary mr-5"
+                to="/dapps"
+                ><v-icon left color="error">mdi-fire</v-icon>Explore DApps</v-btn
+              >
+              <v-btn
+                large
+                depressed
+                color="border"
+                class="text--secondary mr-5"
+                to="/search"
+                >Advanced Search</v-btn
+              >
+              <v-btn
+                large
+                depressed
+                color="border"
+                class="text--secondary"
+                :loading="pickingRandom"
+                @click="pickRandom"
+                >Pick Random</v-btn
               >
-                <span>{{ item.network }}</span>
-              </v-btn>
             </v-col>
-            <v-col>{{ item.unique_contracts }}</v-col>
-            <v-col>{{ item.fa_count }}</v-col>
-            <v-col>{{ item.contract_calls }}</v-col>
-            <v-col class="body-2 text-left pl-12">{{
-              helpers.formatDatetime(item.time)
-            }}</v-col>
           </v-row>
         </v-col>
       </v-row>
-    </v-fade-transition>
+      <v-fade-transition>
+        <v-row justify="center" align="center" class="stats-row">
+          <v-col cols="6">
+            <v-row
+              class="caption font-weight-medium text-uppercase text-right text--secondary"
+              v-show="stats.length > 0"
+              no-gutters
+            >
+              <v-col class="pl-12"></v-col>
+              <v-col>Unique contracts</v-col>
+              <v-col>
+                <router-link
+                  style="text-decoration: none"
+                  :to="`/stats/mainnet/fa12`"
+                >
+                  <span class="secondary--text">FA tokens</span>
+                </router-link>
+              </v-col>
+              <v-col>Contract calls</v-col>
+              <v-col class="text-left pl-12">Synced</v-col>
+            </v-row>
+            <v-row
+              v-for="(item, idx) in stats"
+              :key="idx"
+              class="text-right my-2"
+              justify="center"
+              align="center"
+              no-gutters
+            >
+              <v-col class="text-left pl-12">
+                <v-btn
+                  small
+                  text
+                  :to="`/stats/${item.network}/general`"
+                  :class="
+                    item.network === 'mainnet'
+                      ? 'secondary--text'
+                      : 'text--primary'
+                  "
+                >
+                  <span>{{ item.network }}</span>
+                </v-btn>
+              </v-col>
+              <v-col>{{ item.unique_contracts }}</v-col>
+              <v-col>{{ item.fa_count }}</v-col>
+              <v-col>{{ item.contract_calls }}</v-col>
+              <v-col class="body-2 text-left pl-12">{{
+                helpers.formatDatetime(item.time)
+              }}</v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-fade-transition>
+    </v-container>
 
     <v-footer
       color="transparent"
@@ -217,3 +220,14 @@ export default {
   src: url("/fonts/script1-script-casual-normal.ttf");
 }
 </style>
+<style lang="scss" scoped>
+.main-rows-wrapper {
+  .search-row {
+    align-items: flex-end;
+    height: 50%;
+  }
+  .stats-row {
+    height: 50%;
+  }
+}
+</style>