diff --git a/news/6.feature b/news/6.feature new file mode 100644 index 0000000..e87a440 --- /dev/null +++ b/news/6.feature @@ -0,0 +1 @@ +Compatiblity with kitconcept volto-light-theme container widths @jackahl diff --git a/package.json b/package.json index b56e070..5822748 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,12 @@ "**/*.overrides" ], "customSyntax": "postcss-less" + }, + { + "files": [ + "**/*.scss" + ], + "customSyntax": "postcss-scss" } ], "rules": { diff --git a/src/components/Logo/View.jsx b/src/components/Logo/View.jsx index ee258cd..3d666b9 100644 --- a/src/components/Logo/View.jsx +++ b/src/components/Logo/View.jsx @@ -44,8 +44,9 @@ const View = (props) => { /> ))} - -
{data.description}
} diff --git a/src/components/Logo/schema.js b/src/components/Logo/schema.js index 5cb6a5d..d260a24 100644 --- a/src/components/Logo/schema.js +++ b/src/components/Logo/schema.js @@ -36,12 +36,9 @@ export const LogoBlockSchema = (props) => { { id: 'default', title: 'Default', - fields: [ - 'logo', - 'heading', - config.blocks.blocksConfig.logo.showDescriptionField && 'description', - 'link', - ], + fields: config.blocks.blocksConfig.logo.showDescriptionField + ? ['logo', 'heading', 'description', 'link'] + : ['logo', 'heading', 'link'], }, ], properties: { diff --git a/src/theme/_main.scss b/src/theme/_main.scss new file mode 100644 index 0000000..72fa2e4 --- /dev/null +++ b/src/theme/_main.scss @@ -0,0 +1,9 @@ +//Specific styles for volto-light-theme +.block.logos .ui.stackable, +.block.logos .grid-items, +.block.logos h2.headline { + @include default-container-width(); + // Adding 2 * 10px (one for each side) we force the container to extend the value of + // the gutter to match the other blocks margin. + max-width: calc(var(--default-container-width) + 2 * 10px); +} diff --git a/src/theme/main.less b/src/theme/main.less index 42ef900..5c3fe38 100644 --- a/src/theme/main.less +++ b/src/theme/main.less @@ -92,17 +92,26 @@ .three.column.grid { .logo-image { max-width: 200px; - height: 200px; } h3 { - width: 300px; + max-width: 300px; } } - .two.column.grid { + .logo-block { + display: flex; + flex-direction: column; + align-items: center; + .logo-image { - height: 300px; + width: 100%; + max-height: 100px; + object-position: top center; + } + + h3 { + max-width: 400px; } } } @@ -114,10 +123,11 @@ .logo-image { width: 100%; + max-height: 100px; object-position: top center; } h3 { - width: 400px; + max-width: 400px; } }