Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image grid padding calculation issue #2768

Closed
zackkrida opened this issue Aug 1, 2023 · 0 comments · Fixed by #2891
Closed

Image grid padding calculation issue #2768

zackkrida opened this issue Aug 1, 2023 · 0 comments · Fixed by #2891
Assignees
@obulat
Labels
🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix 🟩 priority: low Low priority and doesn't need to be rushed 🧱 stack: frontend Related to the Nuxt frontend

Comments

@zackkrida
Copy link
Member

Description

In our "masonry-style" grid on image-only searches, there is a funky bug with calculating the image sizes. Some tall, vertical images are having their heights calculated incorrectly. This results in incorrect spacing and shifting in the hover state of these images:

Observe the misalignment in the left cat:
CleanShot 2023-08-01 at 12 43 14@2x

And the computed height of an "incorrect" image:
CleanShot 2023-08-01 at 12 43 42@2x

Compared to a correct:
CleanShot 2023-08-01 at 12 43 37@2x

This calculation is one of the trickier parts of the frontend code to understand.

Reproduction

  1. Make an image only search on Openverse.org
  2. Hover over multiple images until you notice a hover state which is positioned incorrectly. Typically on portrait-oriented images
@zackkrida zackkrida added 🟩 priority: low Low priority and doesn't need to be rushed 🛠 goal: fix Bug fix 🕹 aspect: interface Concerns end-users' experience with the software 🧱 stack: frontend Related to the Nuxt frontend labels Aug 1, 2023
@github-project-automation github-project-automation bot moved this to 📋 Backlog in Openverse Backlog Aug 1, 2023
@obulat obulat mentioned this issue Aug 25, 2023
Merged
8 tasks
@obulat obulat moved this from 📋 Backlog to 🏗 In progress in Openverse Backlog Sep 19, 2023
@obulat obulat self-assigned this Sep 19, 2023
@github-project-automation github-project-automation bot moved this from 🏗 In progress to ✅ Done in Openverse Backlog Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@obulat obulat

Labels
🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix 🟩 priority: low Low priority and doesn't need to be rushed 🧱 stack: frontend Related to the Nuxt frontend
Projects
Openverse Backlog
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve image grid WordPress/openverse
2 participants
@zackkrida @obulat