search

kalutheo / elm-ui-explorer

https://package.elm-lang.org/packages/kalutheo/elm-ui-explorer/latest
MIT License
215 stars 25 forks source link

Consider displaying the story in the iframe? #87

Closed mbylstra closed 2 years ago

mbylstra commented 3 years ago

Hi. Very nice project.

I've run into a problem with a component I have that uses the css display: fixed to take over the whole screen. The problem is that once it takes over the whole screen, there no way to click on the Elm UI Explorer "chrome". If the story was displayed in an iframe (like Storybook does), then it would only take over the iframe, and UI Explore menu and buttons would remain usable. I'd also like to make a plugin that displays the story inside various mobile device dimensions (instead of the entire page). I think that's only possible if the story is displayed in a frame (the iframe changes size depending on which device dimensions you choose).

Example:

image
mbylstra commented 3 years ago

Actually, I've found a workaround. I can use the chrome/firefox dev tools mobile device tool, and then just click the browser back button to make the UI Explorer menu/buttons re-appear. Still, it'd be nice if there was a mobile dimensions plugin built in, and I didn't need. This would also be necessary if I wanted to use the "controls" plugin for a component like this.

kalutheo commented 3 years ago

Hello @mbylstra thanks for your findings, An other solution I thought about is to have a fullscreen mode that we can toggle with the keyboard or with a button that hides all the UIExplorer navigation and only displays the canvas with your component. That way you can use the chromeDevtools on the fullscreen mode and test responsively. This seems the easiest way to fix this behavior