processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.3k stars 1.27k forks source link

Signup Section is not aligned properly. #2989

Closed rahulrana701 closed 3 months ago

rahulrana701 commented 5 months ago

p5.js version

1.9.0

What is your operating system?

Windows

Web browser and version

chrome://121.0.6167.85

Actual Behavior

The signup form is not properly aligned as login form. this is the login form and this is how signup form should be aligned

Screenshot 2024-02-05 011207

but signup page is not like that , we need to put some extra spacing above

Screenshot 2024-02-05 011225

Expected Behavior

signup form should look like this

Screenshot 2024-02-05 011331

Steps to reproduce

Steps:

  1. Go to SignUp Section
rahulrana701 commented 5 months ago

@lindapaiste I would like to work on it

Keshav-0907 commented 5 months ago

@rahulrana701, I don't think it's a bug. The form-container is vertically centered and introducing padding will lead to UI disruption on various screen sizes.

Moreover, the current version also ensures that the majority of the content is visible to the user.

lindapaiste commented 5 months ago

@rahulrana701, I don't think it's a bug. The form-container is vertically centered and introducing padding will lead to UI disruption on various screen sizes.

Moreover, the current version also ensures that the majority of the content is visible to the user.

Yeah, it's not a bug that the two titles are in different places. That is by design. The content is centered vertically on the screen.

I can possibly see the argument that the title is close to the top on screens with a small height. In that case we would want to add some sort of margin or padding which is equal on both the top and the bottom so that things stay centered. It would serve as the minimum top spacing for screens with a height of < ~730px. But we need to be aware that any blank space which we add on top will cause more text on the bottom to be hidden off-screen.

rahulrana701 commented 5 months ago

@lindapaiste i will fix that by today

raclim commented 3 months ago

Thanks for reporting this!

I think in light of some other issues we probably won't implement this for now, especially since this was originally part of the UI. I'm going to close this issue and its affiliated PR, but I'm also down to revisit this down the line if other folks see this as an issue or would like to explore more in-depth design changes for this page.