Improve look of section navigation cards when at least one section has an image

zinc-collective / convene

An Operating System for the Solidarity Economy

https://convene.zinc.coop

Other

56 stars 19 forks source link

Improve look of section navigation cards when at least one section has an image #2302

Closed anaulin closed 1 month ago

anaulin commented 2 months ago

https://github.com/zinc-collective/convene/issues/1988

This PR refines the look of the section navigation component:

when at least one of the sections has an image an others don't, it inserts a colored image placeholder in all the cards that don't have an image
when at least one of the sections has a description text, it makes sure that all the cards have the same description height, even if they don't have a description text

Before

After

rosschapman commented 2 months ago

@anaulin nice use of clamping!

tumblr_739e7c4118f7faa703eb056660fd6874_2b5c42d9_500

anaulin commented 1 month ago

Hmm, yeah, I sort of don't love this. I was envisioning something more "pictorial" that could be auto-generated as stand-ins for missing pictures, but my result looks more like A VERY LARGE TITLE THAT SOMETIMES DOESN'T FIT.

@zspencer @rosschapman would something like this be better? Or do you like it more with the text? This version randomizes the background color for a more placeholder-y look, and removes the text:

(The height of the bottom row needs to be adjusted to match the top row with the description, but that's a different issue.)

zspencer commented 1 month ago

ooo, I like that quite a bit! The pastels are lovely!

rosschapman commented 1 month ago

@anaulin looks good. Will passing the no_padding variant option to card.with_header remove the spacing so that colored area is flush against the card container?

anaulin commented 1 month ago

@rosschapman removing that margin is one of several remaining TO-DOs in this PR (see the PR description for my full list so far)

anaulin commented 1 month ago

@zspencer @rosschapman I've gone back and cleaned up the implementation, and updated the screenshots in the PR description. Please have a final look!

anaulin commented 1 month ago

This is in production now. I notice that on Piikup's entrance, some of the sections aren't showing an image, but are also not getting the placeholder image:

So this needs some revisiting, to make sure that the check to see if there is a hero image for a room is correct.

I also noticed:

there a lot more rooms visible in the section navigation if you log in
- it would be nice to add a little indicator to the cards to signify that a card/room won't be listed for logged-out people, maybe something like a little icon with a crossed-out eye and a tooltip; that way Space administrators could see more clearly at a glance what will be visible to regular users
we really should order the sections alphabetically (until we let users set an order, at least), right now it feels kinda haphazard