remove intense orange block on galery thumbnails

aaaaargZombies commented 1 year ago

I started looking at #192 because it is one of the bugs that bothers me the most on the site.

I realized that I didn't have time to tackle what is a quite a complex problem but I've hopefully made some improvements.

Description

background of thumbnails is secondary so pngs with clear backgrounds aren't displayed on the bright orange.
a flex item that expands to fill remaining space hides the orange background or collapses if not needed.

if there are more thumbnails we overflow with scroll to avoid getting a small section of dead space on the right hand side of the top row and a large dead space on the bottom row.

https://github.com/geeksforsocialchange/gfsc-v3/assets/6824891/20408f2c-361a-4695-b259-87903f2006a3

@geeksforsocialchange/developers

ivan-kocienski-gfsc commented 1 year ago

Why not set the background of the thumbnail area? is there a complex layout problem i am missing? (not accusing but curious)

aaaaargZombies commented 1 year ago

Why not set the background of the thumbnail area? is there a complex layout problem i am missing? (not accusing but curious)

Accuse away lol, yeah it's because of all the intersecting borders. we want a 2px border everywhere but that's ALOT of state to work out which sides should have borders when things move places at different layouts and are conditionally rendered depending on content. The solution here is to simulate an internal border with background color and flex gap of 2px.

geeksforsocialchange / gfsc-v3

remove intense orange block on galery thumbnails #367

Description