form styling

hlxsites · Feb 13, 2024 · 407c631 · 407c631
1 parent aacc81a
commit 407c631
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 16 deletions.
diff --git a/blocks/form/form.css b/blocks/form/form.css
@@ -11,7 +11,7 @@
     --form-font-size-xs: 16px;
     --form-background-color: var(--background-color-primary);
     --form-padding: 0;
-    --form-columns: 1;
+    --form-columns: 12;
     --form-field-horz-gap: 40px;
     --form-field-vert-gap: 20px;
     --form-invalid-border-color: #ff5f3f;
@@ -50,6 +50,8 @@
     --form-wizard-background-color: #f2f2f2;
     --form-wizard-border-color: #757575;
     --form-wizard-number-color: var(--button-primary-color);
+    --form-max-width: 100%;
+    --form-grid-gap: 0 30px;
 }
 
 form output {
@@ -78,22 +80,31 @@ main .form > div:not(:first-child) {
 }
 
 main .form form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--form-field-vert-gap) var(--form-field-horz-gap);
-    align-items: start;
+    display: grid;
+    grid-template-columns: repeat(var(--form-columns), minmax(0, 1fr));
+    gap: var(--form-grid-gap);
+    padding: var(--form-padding);
+    max-width: var(--form-max-width);
 }
 
 main .form form fieldset {
+    display: grid;
+    align-content: flex-start;
+    gap: var(--form-fieldset-grid-gap);
+    grid-template-columns: repeat(var(--form-fieldset-columns), minmax(0, 1fr));
     border: var(--form-fieldset-border);
-    margin: var(--form-fieldset-marign);
-    width: 100%;
+    margin: var(--form-fieldset-margin);
+    padding: var(--form-fieldset-padding);
 }
 
 main .form form fieldset fieldset {
     padding: 0;
 }
 
+main .form form .field-wrapper {
+    grid-column: span 12;
+}
+
 main .form .field-description {
     color: var(--form-label-color);
     font-size: var(--form-font-size-xs);
@@ -389,6 +400,50 @@ main .wizard  .current-wizard-step.field-wrapper:last-of-type ~ .form-wizard-but
         margin-top: -160px;
         margin-left:  var(--wizard-left-titlebar-width);
     }
+
+    main .form form .field-wrapper.col-11 {
+        grid-column: span 11;
+    }
+
+    main .form form .field-wrapper.col-10 {
+        grid-column: span 10;
+    }
+
+    main .form form .field-wrapper.col-9 {
+        grid-column: span 9;
+    }
+
+    main .form form .field-wrapper.col-8 {
+        grid-column: span 8;
+    }
+
+    main .form form .field-wrapper.col-7 {
+        grid-column: span 7;
+    }
+
+    main .form form .field-wrapper.col-6 {
+        grid-column: span 6;
+    }
+
+    main .form form .field-wrapper.col-5 {
+        grid-column: span 5;
+    }
+
+    main .form form .field-wrapper.col-4 {
+        grid-column: span 4;
+    }
+
+    main .form form .field-wrapper.col-3 {
+        grid-column: span 3;
+    }
+
+    main .form form .field-wrapper.col-2 {
+        grid-column: span 2;
+    }
+
+    main .form form .field-wrapper.col-1 {
+        grid-column: span 1;
+    }
 }
 
 @media (width >= 1200px) {

diff --git a/blocks/form/submit.js b/blocks/form/submit.js
@@ -1,5 +1,3 @@
-import { checkValidation } from './util.js';
-
 function submitSuccess(e, form) {
   const { payload } = e;
   if (payload?.body?.redirectUrl) {

diff --git a/blocks/form/transform.js b/blocks/form/transform.js
@@ -100,7 +100,8 @@ export default class DocBaseFormToAF {
         const source = Object.fromEntries(Object.entries(item).filter(([_, v]) => (v != null && v !== '')));
         let field = { ...source, ...this.#initField() };
         this.#transformFieldNames(field);
-
+        field.id = field.id || getId(field.name);
+        field.value = field.Value || '';
         if (this.#isProperty(field)) {
           this.#handleProperites(formDef, field);
         } else {
@@ -114,12 +115,6 @@ export default class DocBaseFormToAF {
       }
     });
 
-    formDef.items = formDef.items.map((fd) => ({
-      ...fd,
-      id: fd.id || getId(fd.name),
-      value: fd.Value || '',
-    }));
-
     return formDef;
   }