steve-ochoa / osu_cs_361_longbourn

Longbourn Foxes Team Repo
1 stars 3 forks source link

Search Result (Cards) Are Displayed Unevenly on Screen (grids issue) #35

Open seokhchoi opened 3 years ago

seokhchoi commented 3 years ago

After user performs a search, the results are returned in cards. However, depending on the size of screen, the result cards are displayed unevenly. Most likely, this is due to issue with how grids are displayed.

Precise Steps to Reproduce Results 1) Choose different sized screens (e.g., mobile vs. monitor, large font setting vs. small, etc.) 2) From landing page, click "Find Your Expert" button 3) Perform a search that yields multiple results (e.g., "python" for "skills")

On some screens, result cards are not aligned properly vertically (see gap right side of screen below) image

On other screens, cards are not aligned properly horizontally (see Guido Von Rossum oddly placed in grid) image

contip commented 3 years ago

the first issue is a breakpoints thing. we ideally have rows of 3 cards each, but if the user's screen size is too narrow, this will reduce to only displaying 2 cards across. if the screen size is really narrow, it will only show 1 card at a time. there isn't really any getting around that, although ideally everything should be centered.

when search results include a non-complete row (last pic with Guido van Rossum), those results should be centered. I was unable to accomplish this on my first attempt. will focus on more pressing issues first and then revisit this

contip commented 3 years ago

figured this out.. addressed here 280c6bd5cd4f513580c952ce4b8e532f260eb38d

non-rows of 3 are now properly centered, vertical card height is held constant per row

image

image

image