Working on a responsive image list item -- help?

[Tim_Stewart]

I spent my first little while learning about appgyver data/REST/Authentication, and now that I’m confident I can do the things I’ll need to do, I’m setting out to see if I can make one app use the same design across all form factors so I set out to create a responsive list.

I have to admit I didn’t even see list items on the components list (I guess I just didn’t think to scroll down enough), and I had previously done a lot of figuring to create my own. Once I did realize they existed I assumed they would obviously be responsive.

I couldn’t imagine anybody making them would not make them that way, but I soon realized I’d have to figure it out myself.

Here is what I’ve got so far:

It’s looking pretty good until I have one list item on its own line.

I assume this must be because I’ve found (and used) the super helpful ‘Grow to fill free space’ option under growing and shrinking, however in this case I think it looks silly to have the list separator go all the way to the right hand side.

> side note: It would be great to have access to a vertical list item separator for this use-case (multi column lists)

Can anyone think of a simple way around this?

Perhaps I should find a more complex way to express my width formula and avoid using ‘Grow to fill free space’?

IF(systemVars.dimensions.window.width < 400 || systemVars.dimensions.viewport.width < 400,“100%”,“400”)

I realized that if I want to test the web preview responsiveness that I needed to also check window width, not just the viewport so that I can adjust my browser window to quickly check all sizes and flow.

Am I approaching this all wrong and there is already a set of responsive cards/lists/repeaters that I just haven’t stumbled upon yet?

While I’m here, I presume it’s worth mentioning that the images in the Large Image List don’t appear at all in the web preview. I had to go into isolation mode and add a border and set a static height in order to get my little image squares.

The appgyver app on mobile shows the default (placholder) images just fine however.

Also, Is there a way I can enable rotation in the preview app, so I can check landscape rendering on my mobile devices?

I apologize for putting so many questions in the same email… I suppose most of them are related at least.

Update:
I found the social post card and thought I’d see if that was easier… same issue for me, not sure what I’m missing

[Tim_Stewart]

I managed to figure it out I think:

If nobody has any suggestions, I guess this is good. For those interested, I placed the ‘Rating card with image’ from the marketplace inside a horizontal flow container with wrapping children, then converted it to a container so I could replace the image with a lotte for fun. I allowed the parent container to justify content to the left and instead of allowing the ‘card’ to grow, I made my width logic super nested to handle correct columns over 3000px, like so:

IF(systemVars.dimensions.window.width < 834 || systemVars.dimensions.viewport.width < 834,“100%”,IF(systemVars.dimensions.window.width < 1234 || systemVars.dimensions.viewport.width < 1234,“50%”,IF(systemVars.dimensions.window.width < 1634 || systemVars.dimensions.viewport.width < 1634,“33%”,IF(systemVars.dimensions.window.width < 2034 || systemVars.dimensions.viewport.width < 2034,“25%”,IF(systemVars.dimensions.window.width < 2434 || systemVars.dimensions.viewport.width < 2434,“20%”,IF(systemVars.dimensions.window.width < 2834 || systemVars.dimensions.viewport.width < 2834,“16%”,IF(systemVars.dimensions.window.width < 3234 || systemVars.dimensions.viewport.width < 3234,“14%”,“400”)))))))

once I figured out my magic number was 400+34 it was easy to go from there.

Is there a better way??

[Mevi]

Hi,

I would probably just rather set a min/max width to the card and let it grow and shrink according to the size, using a grid layout. Your solution is fine as well, just a little more complex to write