Documentation on adding Responsive Views

[Oudwins]

I have looked everywhere and I cannot find a good answer as to how to do this correctly.

This seems like a feature required for almost any editor and it would be nice to have a small guide on the docs. I am happy to write it and submit a PR once I figure out how to do it correctly.

Intuitively an Iframe makes sense but I have found many problems because:

1. You only want the iframe for the actual page view or editor frame not for anything else (for example, the sidebar with the dragable components).
2. However, both the frame and the sidebar need to be inside the same . Since they all need the editor context to use the useEditor() hook, etc

Therefore, you have a few options:

OPTION 1:

<editor>
<iframe>
<frame /> // droppable area is here
</iframe>]
<sidebar /> // draggable userComponents here
</editor>

This doesn't work because content inside the iframe is outside of the context of

OPTION 2:

<editor>
<iframe>
<frame /> 
<sidebar />
</editor>

This doesn't work because sidebar is also resized when iframe width is changed

OPTION 3:

<iframe>
<editor>
<frame /> 
</editor>
</iframe>
<sidebar /> // doesn't work because sidebar needs to useEditor()

What am I missing?

[Oudwins]

I'm dumb, forgot I needed to use a react wrapper for the iframe. Have it somewhat working, I'll update here once I have it completely figured out and contribute the guide if I get the green light

[aureatelabs-parshva]

Hello @Oudwins I wanted to do a same thing. Can you help me how can I do that?

[Oudwins]

@aureatelabs-parshva Yes I have already figured out the way to do it. I have talked with the maintainer and will be writing a small guide for the docs. I'll post the PR here once its ready.

It will be a little over a month though, since I have exams ATM. Early-mid February I plan to have it done and close the issue.

[aureatelabs-parshva]

Thanks for replying @Oudwins I really appreciate your efforts.

It's wonderful that you've already made progress on this. I understand that you have exams at the moment, so it's completely understandable that it will take some time. If you could provide me with some context or details about the issue so will move further on it as it's on top priority for me.

I hope you understand.

[Oudwins]

You want to use something like react-frame-component wrapped around a div and resize the div based on what view you want to show. Using a normal iframe wont work. This is what I used -> https://www.npmjs.com/package/react-frame-component

If you are stuck as to how to add custom css and media queries dynamically. I have made an npm package for that, but its still very early. I haven't made a wrapper for react or a way for it to hook into craftjs. You may build that yourself if you want the package is this -> https://github.com/Oudwins/dstyler

Sorry that I won't be able to give you more details, I ran into a few issues that I plan to show fixes for in the guide but its too much to write up now. Play around with it, I am sure you can figure it out.

[aureatelabs-parshva]

Thanks, I will check it

[fizefeko]

Hello guys first thank you all for the support, and a special thanks to the author. Do you guys have any news on the issue?

[Oudwins]

There is a PR by me for this docs. It's still under revisión. I haven't completed it but you can read the guide already on it. Check the repo's PRs

[fizefeko]

Ok, thank you Oudwins, i'v understood how to deal with the iframe part of things but the issue is just with the dynamic styles, btw i'm using css-in-js( styled components ), so i'll try whats suggested on the docs

[Oudwins]

Handling styles is the second part of the guide I want to write. I'll try to get it done this weekend.

I plan to show multiple ways of handling it. But if you are using css in js. I would recommend you look at my library for doing this exactly

https://github.com/Oudwins/dstyler

[fizefeko]

Thanks Oudwins, i'll try to play around with that library a bit and learn how it solves the problem of styles

[alihammad99]

Hi, I think the Frame component has been added to craft.js now. But I still don't understand how to control its size to make it responsive

[Oudwins]

Checkout my open PR there is a guide @alihammad99