search

elimu-ai / webapp

🖥 Web application for hosting Android applications and educational content
https://hin.elimu.ai
MIT License
30 stars 56 forks source link

Enhancement of CSS on Card Size in Image List #1503

Open Shubham-Vishwakarma opened 2 years ago

Shubham-Vishwakarma commented 2 years ago

Enhancement of Card Alignment This is an enhancement of card alignment wherever possible

To Reproduce Steps to reproduce the behavior:

  1. After Sign in Go to 'http://eng.elimu.ai/content/multimedia/image/list'
  2. Scroll down to the pages
  3. You can see the card are not properly aligned

Expected behavior Each row should have 3 cards of the same width and height

Screenshots image

Additional context Possible solution

  1. Define a max-width to the card
  2. For the images inside the card, either resize them to the same size using photoshop or a similar tool OR Define fixed size and set overflow to hidden.
  3. If you have an any better idea, please go ahead with it.
nya-elimu commented 2 years ago

Corresponding JSP file: https://github.com/elimu-ai/webapp/blob/main/src/main/webapp/WEB-INF/jsp/content/multimedia/image/list.jsp

nya-elimu commented 2 years ago

By the way, we have a similar UI issue at http://eng.elimu.ai/content/contributor/list

Screen Shot 2022-01-25 at 9 21 44 PM
nya-elimu commented 2 years ago

@Shubham-Vishwakarma Would you like some assistance on this issue? 🙂