search

karlomikus / vue-salt-rim

Salt Rim is a Vue based web client used for connecting to Bar Assistant server instance.
https://barassistant.app
MIT License
99 stars 17 forks source link

Improve recipe layout with smaller image #114

Closed samwise22 closed 1 month ago

samwise22 commented 1 year ago

When viewing a recipe on almost any device I find that the image takes up the entire screen, I have to scroll down to even see the rest of the image, never mind the ingredients and steps. Could the image possibly be resized and placed to the side so the text can be seen without scrolling?

zeekaran commented 3 months ago

Additionally:

  1. default EMPTY image takes up 98% of my screen
    • maybe no image should just not render an image? Seems like the obvious default
  2. images are blown up and stretched, regardless of original size
    • I only expect an image to be shrunk to a maximum size, so a super high resolution photo does not overtake the whole page
    • small images should not be made bigger, that just makes them ugly
  3. images are forced into a square aspect ratio
    • I expect the ratio to stay how I uploaded it. If I wanted it square, I would crop it

Including a screenshot when I full screen on my 3440x1440 monitor of a cocktail with no image: image

And a screenshot of a cocktail with a small rectangular photo (original, and the recipe page to see it in context, resized from 800x1100 to 500x688) zoomed, stretched, and cropped to square aspect ratio: image