ayanova/src/views/login.vue

@@ -1,27 +1,30 @@
 <template>
-  <v-container fluid>
-    <v-row class="mt-sm-12 mb-8">
-      <v-col cols="12" offset="1" class="d-none d-md-flex">
+  <v-container>
+    <v-row align="center" justify="center" class="mx-auto mt-sm-12 mb-8">
+      <!-- <v-col cols="12" >
         <v-img
           :src="require('../assets/logo.svg')"
           contain
-          height="300"
+          height="128"
         ></v-img>
-      </v-col>
-      <v-col cols="12" class="d-flex d-md-none">
+      </v-col> -->
+      <v-col cols="12" class="hidden-md-and-up">
         <v-img :src="require('../assets/logo.svg')" contain height="64"></v-img>
       </v-col>
-      <v-col cols="12" md="7" offset-md="3">
+      <v-col cols="12" md="7" offset-md="3" v-if="formState.errorBoxMessage">
         <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
       </v-col>
-      <template v-if="$ay.dev">
-        <v-col cols="12" offset="md-6">
-          <span class="title red--text">DEVELOPMENT MODE</span>
-        </v-col>
-      </template>
-      <v-col cols="12" offset-md="3">
+
+      <v-col cols="12" offset-md="4">
         <form>
           <v-row>
+            <v-col cols="12" md="7" class="hidden-sm-and-down">
+              <v-img
+                :src="require('../assets/logo.svg')"
+                contain
+                height="128"
+              ></v-img>
+            </v-col>
             <v-col cols="12" md="7">
               <v-text-field
                 name="username"
@@ -53,11 +56,17 @@
                 @click:append-outer="reveal = !reveal"
               ></v-text-field>
             </v-col>
-            <v-col cols="12" md="7" mt-1 class="text-center">
+            <v-col cols="12" md="7" mt-1>
               <v-btn color="primary" v-on:click="login()" value="LOGIN">
                 <v-icon>fa-sign-in-alt</v-icon>
               </v-btn>
             </v-col>
+
+            <template v-if="$ay.dev">
+              <v-col cols="12">
+                <span class="subtitle-2 red--text">DEVELOPMENT MODE</span>
+              </v-col>
+            </template>
           </v-row>
         </form>
       </v-col>