Replies: 4 comments
-
Thanks @axelpezzo! Viewport switching has been on our radar for some time (#6), but it's non trivial without the use of iframe. Puck doesn't use an iframe because of the numerous trade-offs, not least because it makes it very difficult to do drag-and-drop. In terms of responsive data, this is most likely a user-land problem, but there's nothing stopping you doing that now with something like this: fields: {
paddingMobile: { type: "string" },
paddingDesktop: { type: "string" },
},
defaultProps: {
paddingMobile: 'medium',
paddingMobile: 'large',
}
render: ({ paddingMobile, paddingDesktop }) => {
return (<div className={classNames({
`padding-mobile--${[paddingMobile]}`: !!paddingMobile,
`padding-desktop--${[paddingDesktop]}`: !!paddingDesktop
})}>
Hello, world
</div>);
} This will render the following by default <div class="padding-mobile--medium padding-desktop--large">
Hello, world
</div> |
Beta Was this translation helpful? Give feedback.
-
Thanks for the response. About the viewport switching, it just a suggestion, maybe could be just a max-width size set by a button? Maybe it's too simple and I'm not considering all the entire picture. Beside, the solution proposed for the handling of the mobile padding could be Ok if I have just few of it properties. If I have multiple css properties there is any chance to have a collapsable tab in order to organize the fields? Something like:
|
Beta Was this translation helpful? Give feedback.
-
Unfortunately setting max width doesn't work because it doesn't trigger responsive media queries in CSS - these are based on the viewport size (which are distinct in an iframe). One solution is simply to resize your window (although Puck doesn't currently go full screen) In regards to collapsible tabs, absolutely - we're tracking that in #64 . |
Beta Was this translation helpful? Give feedback.
-
Moving to discussions |
Beta Was this translation helpful? Give feedback.
-
Hello guys, first of all: great work!
There is any chance to add the support to handle the responsive to the Puck Editor?
I mean, could be great have this two options:
Adding at the top of the editor the capabilities to change the render screen size chosing between desktop, tablet and smartphone.
Add for each component's fields the capabilities to add breakpoints in order to save different data for each one (e.g. padding or margin)? E.g.: for the component X I have the padding field but I want to have different values for desktop, tablet and smartphone.
Beta Was this translation helpful? Give feedback.
All reactions