Two column format in sign in/up page
What does this MR do and why?
In this MR we re-introduce the two column layout, for medium and wider screen sizes in the sign in/up pages, only if there is a custom description (see below).
For smaller screen size, it collapses into a single column and the description background turns gray.
Background:
Several aspects of the appearance of the sign-in page can be modified under Admin > Settings > Appearance > Sign in/Sign up page.
Some companies have lengthy descriptions in the sign in/up pages with detailed information about their company setup.
Before the restyle_login_page feature flag was introduced, these pages
had a two column layout. This layout suited very much those companies.
After the redesign, these pages changed to one column layout.
Changelog: changed
Closes #378004 (closed)
Closes #386487 (closed)
Screenshots or screen recordings
Sign in (with long description)
| Before | After | |
|---|---|---|
| medium-large screens |  |
 |
| small screens |  |
 |
Sign in (with short description)
| Before | After | |
|---|---|---|
| medium-large screens |  |
 |
| small screens |  |
 |
Sign up
| Before | After | |
|---|---|---|
| medium-large screens |  |
 |
| small screens |  |
 |
Some things that are not working perfectly
- Selecting different tabs makes the the sign in box to move vertically: this is because the columns are vertically centered and they contain different number of element. This could be minimized by vertically aligning to the top.
Screen_Recording_2023-04-27_at_18.35.42
- (Pre-existent) The page is scrollable, even when the content could fit on the viewport:
Screen_Recording_2023-04-27_at_18.55.17
- (Pre-existent) The remember me checkbox is not hidden behind the footer:
Screen_Recording_2023-04-27_at_18.56.18
How to set up and validate locally
- Go to Admin > Settings > Appearance > Sign in/Sign up page
- Add a custom description for the sign in/up pages.
- On an incognito window play with the sign in page: https://gdk.test:3443/users/sign_in
- On an incognito window play with the sign up page: https://gdk.test:3443/users/sign_up
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.