From be66b0b549af1e9515badae10baa05ff0430e61c Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kamgmc@gmail.com>
Date: Wed, 29 Nov 2023 23:53:35 -0300
Subject: [PATCH] Update Wagon forms

---
 src/pages/Wagon/Type/WagonTypeCreate.vue | 41 +++++++++++++++---------
 src/pages/Wagon/WagonCreate.vue          | 35 ++++++++++----------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index f4ece640a..50be4169c 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -239,8 +239,8 @@ function exceedMaxHeight(pos) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
                 <QInput
                     filled
                     v-model="name"
@@ -309,16 +309,6 @@ function exceedMaxHeight(pos) {
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                     <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
                 <QDialog
                     v-model="colorPickerActive"
                     position="right"
@@ -346,8 +336,18 @@ function exceedMaxHeight(pos) {
                         </QCardSection>
                     </QCard>
                 </QDialog>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -357,22 +357,27 @@ function exceedMaxHeight(pos) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
+
 .q-dialog {
     .q-card {
         width: 100%;
     }
 }
+
 .wheels {
     margin-left: 5%;
     display: flex;
     justify-content: space-around;
 }
+
 .wagon-tray {
     display: flex;
     height: 6rem;
+
     .position {
         width: 20%;
         border-right: 1rem solid gray;
@@ -381,21 +386,26 @@ function exceedMaxHeight(pos) {
         justify-content: flex-end;
         padding-right: 1rem;
     }
+
     .shelving {
         display: flex;
         width: 75%;
+
         .shelving-half {
             width: 50%;
             height: 100%;
+
             .shelving-up {
                 height: 80%;
                 width: 100%;
             }
+
             .shelving-down {
                 height: 20%;
                 width: 100%;
             }
         }
+
         .shelving-divisible {
             width: 1%;
             height: 100%;
@@ -403,6 +413,7 @@ function exceedMaxHeight(pos) {
             border-right: 0.5rem dashed grey;
         }
     }
+
     .action-button {
         width: 10%;
         border-left: 1rem solid gray;
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 123e01d36..0bd6f87be 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -86,9 +86,9 @@ function filterType(val, update) {
 
 <template>
     <QPage class="q-pa-sm q-mx-xl">
-        <QCard class="q-pa-sm">
-            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <div class="row q-col-gutter-md q-mb-md">
+        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+            <QCard class="q-pa-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -108,7 +108,7 @@ function filterType(val, update) {
                         />
                     </div>
                 </div>
-                <div class="row q-col-gutter-md q-mb-md">
+                <div class="row q-col-gutter-md">
                     <div class="col">
                         <QInput
                             filled
@@ -155,18 +155,18 @@ function filterType(val, update) {
                         </QSelect>
                     </div>
                 </div>
-                <div>
-                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
-                    <QBtn
-                        :label="t('wagon.type.reset')"
-                        type="reset"
-                        color="primary"
-                        flat
-                        class="q-ml-sm"
-                    />
-                </div>
-            </QForm>
-        </QCard>
+            </QCard>
+            <div class="q-mt-md">
+                <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                <QBtn
+                    :label="t('wagon.type.reset')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                />
+            </div>
+        </QForm>
     </QPage>
 </template>
 
@@ -176,7 +176,8 @@ function filterType(val, update) {
     justify-content: center;
     align-items: flex-start;
 }
-.q-card {
+
+.q-form {
     width: 70%;
 }
 </style>