Fork me on GitHub
#fulcro
<
2018-06-24
>
baptiste-from-paris12:06:54

hello friends, I am not sure if it’s the right channel but anyway > do you have any idea how can I simulate different device viewport with fulcro (local css) & devcard

baptiste-from-paris12:06:08

If someone does that I would be glad to read from you 🙂

Drew Verlee12:06:56

Has anyone written about using Fulcro with Datomic Ions? I feel like there should be nothing special in composing them (which is awesome) but having not gone to production with either, its only theoretical guess.

Daniel Hines02:06:28

You're right, it seems wonderfully straightforward in concept; but I'm curious as to others thoughts as well.

Chris Swanson13:06:18

@baptiste-from-paris I don't know of a way built-in to Fulcro, but I'm just learning so maybe there's a way. Is chrome's "device mode" not adequate? That's what I'm using to test responsive layouts in my Fulcro app

baptiste-from-paris14:06:06

I was more thinking of a devcard SPA where you can simulate device width all at once but with your computer screen (while working) without reseting everything

Chris Swanson14:06:27

oh i see, that would be nice. seems like it would be hard to make sure it was "simulating" correctly without having the browser involved somehow

Chris Swanson14:06:20

fwiw, using device mode i am able to change the simulated viewport size without resetting my app

baptiste-from-paris17:06:28

yes i know, but I had in mind a view with all the viewport size for a given UX component

baptiste-from-paris17:06:37

I have to work on this

baptiste-from-paris17:06:48

it should be faisable

tony.kay17:06:58

@baptiste-from-paris I use an iframe (React lets you render into one without loading the js into the iframe itself)

tony.kay17:06:18

The elements namespace in fulcro has it coded up

tony.kay17:06:33

let me see if I can point you to an example

tony.kay17:06:25

This is a macro I wrote for wrapping bootstrap examples in the book: https://github.com/fulcrologic/fulcro/blob/develop/src/book/book/bootstrap/helpers.cljs

tony.kay17:06:51

then, if you use defcard-fulcro instead of defcard you can embed an entire app

tony.kay17:06:04

I use it all the time, actually. Works really well, except for a somewhat limited use-case: If you use an external js lib that tries to use the js/document (for things like events to close full-screen modals) then things don’t always work right…but for pure Fulcro stuff it works very well.

tony.kay17:06:22

The iframe thing is just a rendering artifact for the most part, so other than the event thing it is just a rendering container that obeys the size you give it, isolates CSS, and can have more than one on a page.

tony.kay17:06:52

Here’s an example use of that macro from the fulcro bootstrap docs: https://github.com/fulcrologic/fulcro/blob/develop/src/book/book/bootstrap/alerts.cljs

tony.kay17:06:23

If you were to drop that component in a defcard-fulcro, it would behave as a free-standing, CSS separated, fully-functional app.

baptiste-from-paris19:06:01

@tony.kay thanks a lot for your time and this great response

baptiste-from-paris19:06:19

I thought about iframe but did not want to go that way ^^

baptiste-from-paris19:06:29

I am going to rgtry