Fix image block alignment - #8262
Conversation
Documentation build overview
214 files changed ·
|
| max-width: 50%; | ||
| margin-right: 1em !important; | ||
| margin-bottom: 1em; | ||
| float: left; |
There was a problem hiding this comment.
@iRohitSingh Why is this using float for alignment?
Can we instead use a modern layout approach (flexbox, grid, or display: flow-root
| max-width: 50%; | ||
| margin-bottom: 1em; | ||
| margin-left: 1em !important; | ||
| float: right; |
There was a problem hiding this comment.
The
element with float requires clear: both on the parent.Let's try using a more modern flex box / grid approach.
| import Image from '@plone/layout/components/Image/Image'; | ||
| import clsx from 'clsx'; | ||
| import config from '@plone/registry'; | ||
| import './ImageBlock.css'; |
There was a problem hiding this comment.
Aren't we supposed to use tailwind in Seven?
|
|
||
| return ( | ||
| <div | ||
| <figure |
There was a problem hiding this comment.
We should re-use ImageView component in the Edit component
| large: data.size === 'l', | ||
| medium: data.size === 'm', | ||
| small: data.size === 's', | ||
| })} |
There was a problem hiding this comment.
We should also have
loading="lazy"
responsive={true}
| > | ||
| <Image | ||
| className={clsx({ | ||
| 'full-width': data.align === 'full', |
There was a problem hiding this comment.
Add full to the alignment actions
|
@avoinea sorry, you have to review this pr. @iRohitSingh and @TimoBroeskamp worked on same thing in sprint. We are going in favour of Timo B pr because there we are using new css rule for all the floated blocs. One css for all of them. Here is the pr if you want to review it. PR: #8261 |
4 participants
Related pr: #8261