Adjust fields when opening the registration navigation (#927)

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

src/components/ADempiere/Field/index.vue

@@ -20,14 +20,14 @@
     <el-col
       v-if="isDisplayedField"
       key="is-panel-template"
-      :xs="24"
+      :xs="sizeField.xs"
-      :sm="12"
+      :sm="sizeField.sm"
-      :md="8"
+      :md="sizeField.md"
-      :lg="8"
+      :lg="sizeField.lg"
-      :xl="8"
+      :xl="sizeField.xl"
       :class="classField"
     >
-      <el-form-item>
+      <el-form-item :class="classFrom">
         <template slot="label">
           <field-options
             :metadata="fieldAttributes"
@@ -103,6 +103,30 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    classFrom() {
+      if (this.field.componentPath === 'FieldTextLong' || this.field.componentPath === 'FieldImage') {
+        return 'from-text-long'
+      }
+      return 'from-field'
+    },
+    sizeField() {
+      if (this.field.isShowedRecordNavigation) {
+        return {
+          xs: this.field.size.xs,
+          sm: this.field.size.sm * 2,
+          md: this.field.size.md * 2,
+          lg: this.field.size.lg * 2,
+          xl: this.field.size.xl * 2
+        }
+      }
+      return {
+        xs: this.field.size.xs,
+        sm: this.field.size.sm,
+        md: this.field.size.md,
+        lg: this.field.size.lg,
+        xl: this.field.size.xl
+      }
+    },
     // load the component that is indicated in the attributes of received property
     componentRender() {
       if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
@@ -310,10 +334,16 @@ export default {
   /**
    * Separation between elements (item) of the form
    */
+  .from-text-long {
+    max-height: 300px;
+    min-height: 250px;
+  }
+  .from-field {
+    max-height: 100px;
+  }
   .el-form-item {
     margin-bottom: 10px !important;
     margin-left: 10px;
-    // this.field.isShowedRecordNavigation
     margin-right: 10px;
   }
 

src/utils/ADempiere/references.js

@@ -514,9 +514,9 @@ export const YES_NO = {
   size: {
     xs: 14,
     sm: 8,
-    md: 8,
+    md: 6,
-    lg: 3,
+    lg: 6,
-    xl: 6
+    xl: 4
   }
 }