From c59133df8da99d0f0f290475cb59379e9690ede2 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sun, 12 Mar 2023 11:42:33 +0100
Subject: [PATCH] foto de parfil mas arriba

---
 src/pages/IndexPage.vue | 204 ++++++++++++++++++++--------------------
 1 file changed, 101 insertions(+), 103 deletions(-)

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index db36395..4216ee7 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,112 +1,110 @@
 <template>
-  <div class="flex q-ma-md">
-    <q-btn
-      round
-      color="deep-orange"
-      icon="keyboard_return"
-      @click="
-        cargarDatos();
-        $router.push('/');
-      "
-    />
+  <div class="row q-ma-md">
+    <div class="col">
+      <q-btn
+        round
+        color="deep-orange"
+        icon="keyboard_return"
+        @click="
+          cargarDatos();
+          $router.push('/');
+        "
+      />
+    </div>
+    <div class="col-12 flex flex-center">
+      <q-avatar size="96px">
+        <img
+          :src="
+            listaStore.pb.authStore.model.avatar.length > 0
+              ? listaStore.pb.getFileUrl(
+                  listaStore.pb.authStore.model,
+                  listaStore.pb.authStore.model.avatar
+                )
+              : `https://cdn.quasar.dev/img/avatar.png`
+          "
+        />
+      </q-avatar>
+    </div>
   </div>
-  <q-page class="flex flex-center">
-    <div class="column q-gutter-sm">
-      <div class="row flex-center q-pb-md q-mb-md">
-        <q-avatar size="96px">
-          <img
-            :src="
-              listaStore.pb.authStore.model.avatar.length > 0
-                ? listaStore.pb.getFileUrl(
-                    listaStore.pb.authStore.model,
-                    listaStore.pb.authStore.model.avatar
-                  )
-                : `https://cdn.quasar.dev/img/avatar.png`
-            "
-          />
-        </q-avatar>
+  <div class="flex flex-center">
+    <q-form class="q-gutter-md" @click.once="recibeDatos()">
+      <div class="row" style="max-width: 198px">
+        <q-file
+          class="full-width q-mb-md"
+          outlined
+          v-model="imagen"
+          label="Avatar"
+        />
       </div>
-      <q-form class="q-gutter-md" @click.once="recibeDatos()">
-        <div class="row" style="max-width: 198px">
-          <q-file
-            class="full-width q-mb-md"
-            outlined
-            v-model="imagen"
-            label="Avatar"
-          />
-        </div>
-        <div class="row">
-          <q-input
-            outlined
-            v-model="name"
-            label="Name"
-            :rules="[
-              (val) =>
-                (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
-            ]"
-          />
-        </div>
-        <div class="row">
-          <q-input
-            outlined
-            v-model="username"
-            label="Username"
-            :rules="[
-              (val) =>
-                (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
-              (val) => comprobarUsername || 'Ya existe en la BD',
-              (val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
-            ]"
-          />
-        </div>
-        <div class="row">
-          <q-input
-            outlined
-            v-model="listaStore.pb.authStore.model.email"
-            label="email"
-            disable
-          />
-        </div>
-      </q-form>
-      <div class="row q-mt-md q-mx-auto">
-        <div class="col">
-          <q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
+      <div class="row">
+        <q-input
+          outlined
+          v-model="name"
+          label="Name"
+          :rules="[
+            (val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+          ]"
+        />
+      </div>
+      <div class="row">
+        <q-input
+          outlined
+          v-model="username"
+          label="Username"
+          :rules="[
+            (val) => (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+            (val) => comprobarUsername || 'Ya existe en la BD',
+            (val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
+          ]"
+        />
+      </div>
+      <div class="row">
+        <q-input
+          outlined
+          v-model="listaStore.pb.authStore.model.email"
+          label="email"
+          disable
+        />
+      </div>
+    </q-form>
+    <div class="row q-mt-md q-mx-auto">
+      <div class="col">
+        <q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
+        <q-btn
+          flat
+          :disable="btnSaveDisable()"
+          color="secondary"
+          label="Guardar"
+          @click="alertSave = true"
+        />
+      </div>
+    </div>
+    <q-dialog v-model="alertSave" persistent>
+      <q-card>
+        <q-card-section class="row items-center">
+          <q-avatar icon="warning" color="warning" text-color="white" />
+          <span class="q-ml-sm">Está seguro de guardar los datos?</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
           <q-btn
             flat
-            :disable="btnSaveDisable()"
-            color="secondary"
-            label="Guardar"
-            @click="alertSave = true"
+            label="No"
+            color="negative"
+            v-close-popup
+            @click="cargarDatos()"
           />
-        </div>
-      </div>
-      <q-dialog v-model="alertSave" persistent>
-        <q-card>
-          <q-card-section class="row items-center">
-            <q-avatar icon="warning" color="warning" text-color="white" />
-            <span class="q-ml-sm">Está seguro de guardar los datos?</span>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn
-              flat
-              label="No"
-              color="negative"
-              v-close-popup
-              @click="cargarDatos()"
-            />
-            <q-btn
-              flat
-              label="Guardar"
-              color="accent"
-              v-close-popup
-              @click="updateUser()"
-            />
-          </q-card-actions>
-        </q-card>
-      </q-dialog>
-    </div>
-  </q-page>
+          <q-btn
+            flat
+            label="Guardar"
+            color="accent"
+            v-close-popup
+            @click="updateUser()"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
 </template>
 <script setup>
 import { ref, computed } from "vue";