New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Documentation on adding Responsive Views #581
Comments
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 |
Hello @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. |
Thanks for replying @Oudwins 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. |
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. |
Thanks, I will check it |
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? |
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 |
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 |
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 |
Thanks Oudwins, i'll try to play around with that library a bit and learn how it solves the problem of styles |
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:
Therefore, you have a few options:
OPTION 1:
This doesn't work because content inside the iframe is outside of the context of
OPTION 2:
This doesn't work because sidebar is also resized when iframe width is changed
OPTION 3:
What am I missing?
The text was updated successfully, but these errors were encountered: