From 60c4caf51d2ae86749dfbf063111aa8012585c0b Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Tue, 30 Jan 2024 14:34:22 -0800 Subject: [PATCH 01/12] refactor: calculate sidebar width into the skeleton body. --- .../resources/js/form-builder/src/styles/_block-editor.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 index 981186e52f..6b914b419a 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -13,7 +13,7 @@ } .interface-interface-skeleton__body { - width: 100%; + width: calc(100% - var(--givewp-sidebar-width)); background-color: var(--givewp-gray-10); } @@ -296,3 +296,6 @@ } } +.givewp-form-settings__editor .interface-interface-skeleton { + width: 100%; +} From 0ec3eb311ba53a87f432f2d94dfb9a055b77ddcd Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 29 Feb 2024 09:24:19 -0800 Subject: [PATCH 02/12] refactor: remove width calc on skeleton body --- .../resources/js/form-builder/src/styles/_block-editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index 6b914b419a..62dc28bbae 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -13,8 +13,9 @@ } .interface-interface-skeleton__body { - width: calc(100% - var(--givewp-sidebar-width)); + width: 100%; background-color: var(--givewp-gray-10); + overflow: hidden; } .interface-interface-skeleton__secondary-sidebar { From 7f6fcc50c66e4aef540326dcfea062bb9cd548be Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 29 Feb 2024 09:24:52 -0800 Subject: [PATCH 03/12] feature: add height to skeleton content --- .../resources/js/form-builder/src/styles/_block-editor.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 index 62dc28bbae..280bf3bf31 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -35,8 +35,10 @@ } .interface-interface-skeleton__content { - width: 720px; - margin: 0 auto auto; + display: block; + height: 100vh; + width: 100%; + margin: auto; padding: 100px 0; /* Leave room for toolbar above first block. */ flex-grow: unset; box-sizing: border-box; From 2fb1af4e0ab10dd7a60535579ef7adf8e7f3094e Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 29 Feb 2024 09:32:49 -0800 Subject: [PATCH 04/12] refactor: remove fixed positioning --- .../js/form-builder/src/styles/_form-builder.scss | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) 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 index 14104e00b4..4ec4da70f5 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_form-builder.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_form-builder.scss @@ -44,13 +44,10 @@ //color: slategray; height: calc(100vh - 60px); // 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 { From 3855494c2739ca0a920efe1304c4274bfb2a9c5b Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Tue, 5 Mar 2024 08:17:22 -0800 Subject: [PATCH 05/12] Refactor: adjust sidebar to fit viewheight --- .../resources/js/form-builder/src/styles/_form-builder.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 4ec4da70f5..4cd04c0f32 100644 --- 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,7 +42,7 @@ 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. overflow-y: scroll; From a836fe22457d9f9405aada087b8a4303f0f2de91 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Thu, 7 Mar 2024 09:15:35 -0800 Subject: [PATCH 06/12] refactor: align block canvas content --- .../js/form-builder/src/styles/_block-editor.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 index 280bf3bf31..dc0e406758 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -35,7 +35,6 @@ } .interface-interface-skeleton__content { - display: block; height: 100vh; width: 100%; margin: auto; @@ -44,8 +43,13 @@ 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) { From c85f32d3aee73b8ee3d18906b08e10bcbd1d0f74 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Wed, 22 May 2024 15:08:27 -0700 Subject: [PATCH 07/12] refactor: update attachTo element in shepard to respect changes in the canvas skeleton --- .../src/components/onboarding/steps/schema-steps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index d1618d8df3..a2d4cf5e6c 100644 --- 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'), }, From 8f4bf6d65b58a3840f26fb156ac340e58784a11a Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Wed, 22 May 2024 15:08:53 -0700 Subject: [PATCH 08/12] refactor: adjust max-width --- .../FormDesigns/TwoPanelStepsFormLayout/css/_container.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss index 9b515dd354..79384a1f0f 100644 --- a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss +++ b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss @@ -10,7 +10,7 @@ padding: 0; 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); From a0e5201a754d342ab1911508f7fd5a39805b0fa6 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Fri, 24 May 2024 11:52:36 -0700 Subject: [PATCH 09/12] refactor: add spacing between sidebar and 2panel --- .../FormDesigns/TwoPanelStepsFormLayout/css/_container.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss index 79384a1f0f..f0ee438070 100644 --- a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss +++ b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss @@ -7,7 +7,7 @@ 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: 53.5rem) { From 4b34aa71ce1f70da3596041fa5721cec053151c0 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Tue, 25 Jun 2024 10:41:14 -0700 Subject: [PATCH 10/12] refactor: move width of build content --- .../resources/js/form-builder/src/styles/_block-editor.scss | 2 ++ 1 file changed, 2 insertions(+) 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 index dc0e406758..75dc257b7f 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -213,6 +213,8 @@ gap: 2rem; .block-editor-block-list__block { + max-width: 720px; + &:not([contenteditable]):focus::after { box-shadow: none; } From 974299843f777aecf7736028c6fe3359c54adbee Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Tue, 25 Jun 2024 11:04:35 -0700 Subject: [PATCH 11/12] refactor: add minimal space between content and sidebars for small screens --- .../resources/js/form-builder/src/styles/_block-editor.scss | 1 + 1 file changed, 1 insertion(+) 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 index 75dc257b7f..77e916dfdc 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -214,6 +214,7 @@ .block-editor-block-list__block { max-width: 720px; + padding: 0 0.5rem; &:not([contenteditable]):focus::after { box-shadow: none; From da26bdb428addaf1ac5e152e3e72bffc7324adb4 Mon Sep 17 00:00:00 2001 From: Joshua Dinh Date: Wed, 3 Jul 2024 19:59:05 -0700 Subject: [PATCH 12/12] refactor: account for header in skeleton body content to keep sidebar from extending past the form builders visual height --- .../resources/js/form-builder/src/styles/_block-editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 77e916dfdc..cb6874c2db 100644 --- a/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss +++ b/src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss @@ -35,7 +35,7 @@ } .interface-interface-skeleton__content { - height: 100vh; + height: calc(100vh - 60px); width: 100%; margin: auto; padding: 100px 0; /* Leave room for toolbar above first block. */