GLYCAM-Web / website

A bare-bones repo to contain public website stuff and issues related to the GLYCAM Web Django apps.
4 stars 0 forks source link

cb/download page view buttons become offcenter #106

Open Pshepp opened 2 years ago

Pshepp commented 2 years ago

Tool: Carbohydrate builder page on https://glycam.org/cb/download/

Bug Description: When viewing the page that has the structure preview page, if you change the viewing aspect ratio to a more square ratio (found with a display window size of 1242x1231), the visualize buttons (little eyeball dudes) are no longer centered on the y-axis.

To Reproduce:

  1. Do whatever you want to get to the cb/download/ page
  2. Change your window view size to 1242X1231, to do this more precisely use the developer tools with your browser

Expected behavior Eyeball buttons stay centered on a greater range of window aspect ratios

Screenshots image

Device & OS Details Using Brave Browser 107.1.45.127

Additional context Probably some annoying little nuance regarding how CSS treats buttons vs href links

cexum commented 1 year ago

Good target for Hemanth.

gitoliver commented 4 months ago

This is still an issue. Ignore my commentary I thought the text was off in the above image and that was the issue, but indeed the green eyeball icon is doing it's own thing during window resizing. https://jam.dev/c/77d46735-2298-4db8-9eaf-653152441067

danwentworthart commented 3 months ago

There is some chance it has been resolved on test.glycam.org. I have tested again using both Chrome and Brave, and can no longer replicate.

Please test on the Test site, and let me know if you are still seeing the problem?

gitoliver commented 3 months ago

Yeah on test is not aligning with the others

image
danwentworthart commented 3 months ago

Ok. I see. Shifting the scope of this ticket away from the visualize btn and into a new mission to make the entire CB Downloads table responsive enough for phones.

gitoliver commented 3 months ago

https://jam.dev/c/a674b861-14b6-4b8e-812b-fef9c75be71d This is on a laptop. Test is down so this is actual, but you can see the alignment issue with the eye and other buttons.