diff --git a/RELEASE.md b/RELEASE.md index c4661ced3..dbb28c26e 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -43,6 +43,9 @@ ## Versione X.X.X (dd/mm/yyyy) +### Migliorie + +- Migliorato il focus sulle immagini in edit del blocco Immagine quando queste sono allineate a sinistra o a destra. ### Fix - Risolto un problema di visualizzazione degli argomenti indicati come altri argomenti nel blocco Argomenti quando il loro numero รจ esiguo diff --git a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss index 1f79d377c..847dbe203 100644 --- a/src/theme/ItaliaTheme/Blocks/_imageBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_imageBlock.scss @@ -13,12 +13,105 @@ } } - &.left, - &.right { - margin-bottom: 0; - } - .external-link { display: none; } + + &.align.left, + &.align.right { + img { + margin-bottom: 0.5rem; + } + } +} + +.cms-ui { + .block.image:has(.align.left), + .block.image:has(.align.right) { + img.small, + img.medium, + img.large { + max-width: 100%; + } + } + + .block-editor-image { + &.right, + &.left { + .ui.drag.block.image { + z-index: 99; + max-width: 50%; + margin-top: 0.2rem; + margin-bottom: 0.3rem; + + .block.image, + .block.image img { + margin-bottom: 0; + } + } + + &:has(img.small) { + .ui.drag.block.image { + max-width: 15%; + } + } + + &:has(img.medium) { + .ui.drag.block.image { + max-width: 25%; + } + } + + &:has(img.large) { + .ui.drag.block.image { + max-width: 50%; + } + } + } + + /* Image right */ + &.right { + .block.image { + float: right; + } + + .ui.drag.block.image { + margin-left: 1rem; + } + + .drag.handle.wrapper { + left: 50%; + } + + /* Drag and drop icon position */ + &:has(img.large) { + .drag.handle.wrapper { + left: 50%; + } + } + + &:has(img.medium) { + .drag.handle.wrapper { + left: 75%; + } + } + + &:has(img.small) { + .drag.handle.wrapper { + left: 85%; + } + } + } + + /* Image left */ + &.left { + .block.image { + float: left; + } + + .ui.drag.block.image { + margin-right: 1.7rem; + } + } + } }