fix(): ajustes estilo y layout

growlerapp · Feb 23, 2019 · b2c698d · b2c698d
1 parent a512b9b
commit b2c698d
Showing 1 changed file with 42 additions and 14 deletions.
diff --git a/src/views/Splash.vue b/src/views/Splash.vue
@@ -1,29 +1,44 @@
 <template>
-  <div class="Splash">
+  <div class="Splash" :class="{'is-loading': loading}">
+    <!-- <img class="Splash-growler" src="/img/img-growler.svg" alt="GrowlerApp"> -->
     <div class="Splash-body">
-      <img class="Splash-logo" src="/img/img-growler-ga.svg" alt="GrowlerApp">
-      <div class="Splash-loading" :class="{'is-loading': loading}">
+      <div class="Splash-loading">
+        <loading type="relative"/>
+      </div>
+
+      <h2>Bienvenido a</h2>
+
+      <img class="Splash-logo" src="/img/img-logo.svg" alt="GrowlerApp">
+
+      <div class="Splash-continue">
+        <router-link to="home">
+          <v-button>Comenzar</v-button>
+        </router-link>
+      </div>
+
+      <!-- <div class="Splash-loading" :class="{'is-loading': loading}">
         <h2>Obteniendo tu ubicación...</h2>
         <h2 v-show="isGeoError">Debes dar permisos para localizar tu bar más cercano.</h2>
-      </div>
-      <loading type="top"/>
+      </div>-->
     </div>
   </div>
 </template>
 
 <script>
 import user from '@/user'
 import Loading from '@/components/Loading'
+import vButton from '@/components/v-Button'
 
 export default {
   name: 'Splash',
 
   components: {
-    Loading
+    Loading,
+    vButton
   },
 
   data: () => ({
-    loading: false,
+    loading: true,
     isGeoError: false
   }),
 
@@ -46,15 +61,14 @@ export default {
 <style scoped>
 .Splash {
   height: 100vh;
-  background: #2c332d;
-  color: #fff;
 }
 
 .Splash-loading {
-  opacity: 0;
+  /* opacity: 0;
   visibility: hidden;
-  transition: all .3s ease;
-  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  transform: translateY(-10px); */
+  margin-top: -60px;
 }
 
 .Splash .is-loading {
@@ -66,14 +80,28 @@ export default {
 .Splash-body {
   padding: 20px;
   text-align: center;
+  position: relative;
   height: calc(100vh - 100px);
   display: grid;
+  justify-items: center;
   align-content: center;
-  text-align: center;
 }
 
 .Splash-logo {
-  max-height: 50vh;
+  max-width: 110px;
+  margin-top: 10px;
+}
+
+.Splash-continue {
+  margin-top: 20px;
+}
+
+.Splash-growler {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.2;
   margin: 0 auto;
 }