Can I render different elements based on responsiv...

# fritz2

[Pitel]

Can I render different elements based on responsivenes? For example, show lists instead of tables on mobiles.

[Christian Hausknecht]

We have already discussed such ability, but until today there is no special support for realizing this.

But there is some kind of workaround:
• Use containers for the different structures that should depend on breakpoints
• apply a display=none to those, which are not part of the desired breakpoint (so we use the styling capabilities, that offer such a functionality!)
Iirc we use this within our KitchenSink project - but I can't remember exactly where. (But you can scan the sources to find such a construct as example)

It might be possible too, that there is already some better approach built into the core or styling module, but I am quite uncertain about! (Especially as there is no example in the KitchenSink and nothing mentioned within the release notes)

[Pitel]

I figures out the display=none way, but it somehow feels "dumb" to have multiple imlpemeentations of the same thing running in the same time, and one is just hidden.

What do you mean by the first bullet point?

It would be nice if there is some store/flow of breakpoints which I can subscribe to and decide here what I want to render. Something like

breakpoints.data.render {
  when (it) {
    SD -> //small list
    else -> // large table
  |
}

[Christian Hausknecht]

What do you mean by the first bullet point?

Exactly what you have figured out 😉 (Just to have one container to apply the display=none onto)

@your proposal: Yes that's what we have thought about!

[Pitel]

https://gist.github.com/Pitel/d5016cc6af0d0cc20e21151db5189760

I came up with this. Do you want a pull request? If yes, where should I put in fritz's directory hierarchy?

It's not the prettiest solution. I've wanted to use flows more, but I couldn't figure it out. 😞

[Christian Hausknecht]

Thx for your proposal!

We will review it and give you feedback asap 🙂