-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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.
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
Improve frontend checkout forms html #2416
Conversation
They are useless since inputs have with: 100% and will still go on a new line
The only reason why they currently are <p> elements is to let them have the <p> padding, which instead should be set via css.
padding: none is not valid css
There's no reason to keep that class, we should set padding with css
Remove that extra span element in favor of using css to add this sign near the required fields label. This needed to add a class (field-required) to required fields contanier div. JS address is also changed so that instead of toggling span.required visibility it toggle field-required class on field container.
Input and select inside fields need to be display block so they will go on a new line without the need of the br element. Also, removes a useless html entity.
On mobile it was looking very bad, with label centered and input on the left.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Usually I would say that we should not hard code number values into scss files and use variables instead. Also px
should not be used, but rem
.
BUT: this is the default frontend that no one will ever use for their store anyways. So, I don’t care and consider these changes good changes 👍
Thanks
These changes are useful under the assumption that we should try to reduce the html provided.
This change reduces the amount of code that needs to be changed after cloning frontend views, which are often taken as guideline/initial template when developing custom views.
Also, it adds a line of css to fix how checkout content is looking on mobile:
From:
To: