From db9455655b8a4f2f41f0bd5a8796fdaa051b2804 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Thu, 21 Nov 2024 00:11:40 -0600 Subject: [PATCH] unset default aspect ratio in schema & minor fixes to transform & spacings --- .../src/components/Blocks/Image/schema.js | 1 - .../src/components/Blocks/Teaser/schema.js | 1 - .../volto-light-theme/src/theme/_layout.scss | 1 - .../src/theme/_variables.scss | 6 +++++- .../src/theme/blocks/_image.scss | 16 +++++++--------- .../src/theme/blocks/_introduction.scss | 4 ++++ .../src/theme/blocks/_separator.scss | 2 +- .../src/theme/blocks/_teaser.scss | 2 +- .../volto-light-theme/src/transforms/to6.ts | 18 +++++------------- 9 files changed, 23 insertions(+), 28 deletions(-) diff --git a/packages/volto-light-theme/src/components/Blocks/Image/schema.js b/packages/volto-light-theme/src/components/Blocks/Image/schema.js index 9a454b56..2157f15b 100644 --- a/packages/volto-light-theme/src/components/Blocks/Image/schema.js +++ b/packages/volto-light-theme/src/components/Blocks/Image/schema.js @@ -52,7 +52,6 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => { ['1', '1:1'], ['16 / 9', '16/9'], ], - default: '1', }; schema.properties.description = { diff --git a/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js b/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js index 9364a496..c71dbc5a 100644 --- a/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js +++ b/packages/volto-light-theme/src/components/Blocks/Teaser/schema.js @@ -13,7 +13,6 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => { ['1', '1:1'], ['16 / 9', '16/9'], ], - default: '16 / 9', }; return schema; diff --git a/packages/volto-light-theme/src/theme/_layout.scss b/packages/volto-light-theme/src/theme/_layout.scss index 70be9799..266cf8c9 100644 --- a/packages/volto-light-theme/src/theme/_layout.scss +++ b/packages/volto-light-theme/src/theme/_layout.scss @@ -220,7 +220,6 @@ External link removal for all the blocks. & > .block.search .searchBlock-container, & > .block h2.headline, & > .block.heading .heading-wrapper, - & > .block.introduction .block-container, & > .block.teaser .teaser-item.default, & > .block.highlight .teaser-description-title, & > table, diff --git a/packages/volto-light-theme/src/theme/_variables.scss b/packages/volto-light-theme/src/theme/_variables.scss index b443cd73..a3e166b6 100644 --- a/packages/volto-light-theme/src/theme/_variables.scss +++ b/packages/volto-light-theme/src/theme/_variables.scss @@ -143,10 +143,14 @@ $secondary-grey: #ececec !default; --link-color: #0070a2; // Comment out following line to turn links the same color as the text --link-foreground-color: var(--link-color); + + // It is possible to set an aspect ratio for all images, using the folowing CSS custom property: + // --image-aspect-ratio: 16/9; } // Image Aspect Ratio -$aspect-ratio: var(--image-aspect-ratio, 16/9) !default; +$aspect-ratio: 16/9 !default; + // Weights $thin: 100 !default; diff --git a/packages/volto-light-theme/src/theme/blocks/_image.scss b/packages/volto-light-theme/src/theme/blocks/_image.scss index 7c759f0c..98f5ae1b 100644 --- a/packages/volto-light-theme/src/theme/blocks/_image.scss +++ b/packages/volto-light-theme/src/theme/blocks/_image.scss @@ -21,14 +21,12 @@ figure { margin-bottom: 0 !important; } - &.align.left.has--backgroundColor--grey, - &.align.right.has--backgroundColor--grey { - margin-top: 0; - - figure { - // Paddings do not collapse, so we have to substract the ever - // present padding bottom for every block - padding-top: $heading-text-top-spacing - $block-vertical-space; + &.has--block-width--default, + &.has--block-width--narrow, + &.has--block-width--full { + figure:not(.left, .right) { + margin-top: $spacing-large; + margin-bottom: $spacing-large; } } @@ -36,7 +34,7 @@ figure { img { width: 100% !important; height: auto; - aspect-ratio: var(--image-aspect-ratio, $aspect-ratio); + aspect-ratio: var(--image-aspect-ratio, auto); } &.right { diff --git a/packages/volto-light-theme/src/theme/blocks/_introduction.scss b/packages/volto-light-theme/src/theme/blocks/_introduction.scss index f50f16ec..d850dfab 100644 --- a/packages/volto-light-theme/src/theme/blocks/_introduction.scss +++ b/packages/volto-light-theme/src/theme/blocks/_introduction.scss @@ -39,6 +39,10 @@ margin-bottom: $block-vertical-space; } + .block-container { + @include default-container-width(); + } + h2 { @include highlight-title(); margin-bottom: $spacing-large; diff --git a/packages/volto-light-theme/src/theme/blocks/_separator.scss b/packages/volto-light-theme/src/theme/blocks/_separator.scss index 6165b5cc..17689cba 100644 --- a/packages/volto-light-theme/src/theme/blocks/_separator.scss +++ b/packages/volto-light-theme/src/theme/blocks/_separator.scss @@ -19,7 +19,7 @@ @include variable-container-width(); &::after { - width: var(--layout-container-width); + width: calc(100cqw - 2 * $horizontal-space-small-screens); max-width: inherit; } } diff --git a/packages/volto-light-theme/src/theme/blocks/_teaser.scss b/packages/volto-light-theme/src/theme/blocks/_teaser.scss index f0066d58..76576925 100644 --- a/packages/volto-light-theme/src/theme/blocks/_teaser.scss +++ b/packages/volto-light-theme/src/theme/blocks/_teaser.scss @@ -1,6 +1,6 @@ // Override the Image component `aspect-ratio` .teaser-item .image-wrapper img { - aspect-ratio: $aspect-ratio !important; + aspect-ratio: var( --image-aspect-ratio, $aspect-ratio) !important; } // Block Teaser Standalone diff --git a/packages/volto-light-theme/src/transforms/to6.ts b/packages/volto-light-theme/src/transforms/to6.ts index 9f938987..66d87d5e 100644 --- a/packages/volto-light-theme/src/transforms/to6.ts +++ b/packages/volto-light-theme/src/transforms/to6.ts @@ -71,23 +71,15 @@ export function migrateToVLT6ColorAndWidthModel(data: BlocksFormData) { delete block.styles.align; } - if ( - block['@type'] === 'image' && - block?.align && - (block?.align === 'wide' || block?.align === 'full') - ) { + if (block['@type'] === 'image' && !['left', 'right'].includes(block?.align)) { block.styles = { ...block.styles, - 'blockWidth:noprefix': findStyleByName(NORMALIZED_WIDTHS, block.align), + 'blockWidth:noprefix': block.styles?.['blockWidth:noprefix'] ?? findStyleByName( + NORMALIZED_WIDTHS, + block?.align === 'wide' ? 'default' : (block?.align === 'center' ? 'narrow' : block.align), + ), }; block.align = 'center'; } - - if (block['@type'] === 'image' && !block?.styles?.['blockWidth:noprefix']) { - block.styles = { - ...block.styles, - 'blockWidth:noprefix': findStyleByName(NORMALIZED_WIDTHS, 'default'), - }; - } } }