From 4f84e6cfbf6c6345830fe21e4506d97bfa48b438 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 11 Apr 2023 15:22:58 +0100 Subject: [PATCH 1/4] Increase pattern modal dimensions --- .../src/components/start-template-options/style.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss index 78688fef4efbd4..8f2b6f33a320d5 100644 --- a/packages/edit-site/src/components/start-template-options/style.scss +++ b/packages/edit-site/src/components/start-template-options/style.scss @@ -6,10 +6,11 @@ height: calc(100% - #{ $header-height * 2 }); } @include break-medium() { - width: 50%; + width: 95%; } @include break-large() { - height: fit-content; + height: 95%; + max-height: none; } } @@ -18,7 +19,7 @@ width: 100%; margin-top: $grid-unit-05; gap: $grid-unit-30; - grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/5)), 1fr)); .block-editor-block-patterns-list__list-item { break-inside: avoid-column; From b2584c9206fc9e1b607254cec8e0002d4d7a8b91 Mon Sep 17 00:00:00 2001 From: James Koster Date: Tue, 11 Apr 2023 16:24:27 +0100 Subject: [PATCH 2/4] grid -> flex --- .../components/start-template-options/style.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss index 8f2b6f33a320d5..b983730250353b 100644 --- a/packages/edit-site/src/components/start-template-options/style.scss +++ b/packages/edit-site/src/components/start-template-options/style.scss @@ -9,23 +9,26 @@ width: 95%; } @include break-large() { - height: 95%; - max-height: none; + max-height: 95%; } } .edit-site-start-template-options__modal-content .block-editor-block-patterns-list { - display: grid; + display: flex; + flex-wrap: wrap; + gap: $grid-unit-30; width: 100%; margin-top: $grid-unit-05; - gap: $grid-unit-30; - grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/5)), 1fr)); .block-editor-block-patterns-list__list-item { break-inside: avoid-column; margin-bottom: 0; - width: 100%; aspect-ratio: 3/4; + width: calc(50% - #{ $grid-unit-30 * 1 } / 2); + + @include break-large() { + width: calc(25% - #{ $grid-unit-30 * 3 } / 4); + } .block-editor-block-preview__container { height: 100%; From d87535e4dc5148a75e9677876f573a388699844b Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 12 Apr 2023 10:54:28 +0100 Subject: [PATCH 3/4] 3 columns on medium, 4 columns on wide --- .../src/components/start-template-options/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss index b983730250353b..3582551055a9d4 100644 --- a/packages/edit-site/src/components/start-template-options/style.scss +++ b/packages/edit-site/src/components/start-template-options/style.scss @@ -26,7 +26,11 @@ aspect-ratio: 3/4; width: calc(50% - #{ $grid-unit-30 * 1 } / 2); - @include break-large() { + @include break-medium() { + width: calc(33.333% - #{ $grid-unit-30 * 2 } / 3); + } + + @include break-wide() { width: calc(25% - #{ $grid-unit-30 * 3 } / 4); } From a0cc0a5f30823abafe1ea41cd59eb91dd0676e68 Mon Sep 17 00:00:00 2001 From: James Koster Date: Wed, 12 Apr 2023 11:13:37 +0100 Subject: [PATCH 4/4] modal height --- .../edit-site/src/components/start-template-options/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss index 3582551055a9d4..ebbc1d7421941e 100644 --- a/packages/edit-site/src/components/start-template-options/style.scss +++ b/packages/edit-site/src/components/start-template-options/style.scss @@ -3,7 +3,7 @@ // and height are used instead of max-(width/height). @include break-small() { width: calc(100% - #{ $grid-unit-20 * 2 }); - height: calc(100% - #{ $header-height * 2 }); + height: auto; } @include break-medium() { width: 95%;