Refactor: create responsive previews in the form builder (#7212)

impress-org · Jul 9, 2024 · a04d5a8 · a04d5a8
1 parent 2585584
commit a04d5a8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss
@@ -7,10 +7,10 @@
     flex-direction: row;
     margin: auto;
     max-width: calc(var(--two-panel-header-width) + 35.5rem);
-    padding: 0;
+    padding: 0 .5rem;
     width: 100%;
 
-    @media screen and (max-width: 71.5rem) {
+    @media screen and (max-width: 53.5rem) {
         border: solid 1px var(--givewp-grey-25);
         border-radius: var(--givewp-rounded-8);
         box-shadow: var(--givewp-shadow-sm);

diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/steps/schema-steps.tsx
@@ -4,7 +4,7 @@ import Placement from '@givewp/form-builder/components/onboarding/steps/types/pl
 const schemaSteps = [
     {
         id: 'schema-canvas',
-        attachTo: {element: '#form-blocks-canvas', on: 'right-start' as Placement},
+        attachTo: {element: '#form-blocks-canvas > div', on: 'right-start' as Placement},
         title: __('Canvas', 'give'),
         text: __('Add, reorder, and edit blocks and sections here to make up your form.', 'give'),
     },

diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss
@@ -15,6 +15,7 @@
 .interface-interface-skeleton__body {
     width: 100%;
     background-color: var(--givewp-gray-10);
+    overflow: hidden;
 }
 
 .interface-interface-skeleton__secondary-sidebar {
@@ -34,15 +35,21 @@
 }
 
 .interface-interface-skeleton__content {
-    width: 720px;
-    margin: 0 auto auto;
+    height: calc(100vh - 60px);
+    width: 100%;
+    margin: auto;
     padding: 100px 0; /* Leave room for toolbar above first block. */
     flex-grow: unset;
     box-sizing: border-box;
 
     .givewp-form-builder__design-tab & {
+        display: block;
         width: 100%;
-        max-width: 1200px;
+    }
+
+    #form-blocks-canvas {
+        display: flex;
+        justify-content: center;
     }
 
     @media screen and (max-width: 782px) {
@@ -206,6 +213,9 @@
     gap: 2rem;
 
     .block-editor-block-list__block {
+        max-width: 720px;
+        padding: 0 0.5rem;
+
         &:not([contenteditable]):focus::after {
             box-shadow: none;
         }
@@ -296,3 +306,6 @@
     }
 }
 
+.givewp-form-settings__editor .interface-interface-skeleton {
+    width: 100%;
+}
diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_form-builder.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_form-builder.scss
@@ -42,15 +42,12 @@
     border: 1px solid lightgray;
     bottom: 0;
     //color: slategray;
-    height: calc(100vh - 60px); // Account for header height above sidebar
+    height: calc(100vh - 65px); // Account for header height above sidebar
     //overflow: hidden; // The Inspector Popout needs to be visible.
-    position: fixed !important; // !important override added when migrated to WordPress - not sure why this is necessary...
-    top: 60px; // Account for header @todo move this to layout, not in the component.
     overflow-y: scroll;
 
-    &.givewp-next-gen-sidebar-primary {
-        right: 0;
 
+    &.givewp-next-gen-sidebar-primary {
         .block-editor-block-inspector {
             > h2 {
                 border-bottom: 1px solid #e0e0e0;
@@ -70,10 +67,6 @@
         }
     }
 
-    &.givewp-next-gen-sidebar-secondary {
-        left: 0;
-    }
-
     &__inner {
         padding: 1rem;
     }
@@ -249,7 +242,7 @@
         }
     }
 
-    &_visibility{
+    &_visibility {
         font-size: 0.75rem;
         line-height: 1.4;
         margin-top: -8px;
@@ -309,7 +302,8 @@
             fill: #000;
             stroke: #fff;
         }
-    };
+    }
+;
 }
 
 .iti {