Topic: [UI Improvement] Center pages that are restrected to the left (like user settings)

Posted under Site Bug Reports & Feature Requests

Mikael the D

Member

There are pages on e621 that can't use the full width of the screen and locks all the content to the left, which looks bad on normal and big screen.
It would be great if those content, limited in width, could be centered. It would looks nicer regardless of the screen.

The affected page that disturbs me the most is the user settings page.
The login page is also quite affected by that.
Other candidate pages I've seen are : static themes, site map (in 'More'), keyboard shortcuts, potentially the Help home page (more subject to discussion) and maybe Terms of service.

SNPtheCat

Member

mikael_the_d said:
There are pages on e621 that can't use the full width of the screen and locks all the content to the left, which looks bad on normal and big screen.
It would be great if those content, limited in width, could be centered. It would looks nicer regardless of the screen.

The affected page that disturbs me the most is the user settings page.
The login page is also quite affected by that.
Other candidate pages I've seen are : static themes, site map (in 'More'), keyboard shortcuts, potentially the Help home page (more subject to discussion) and maybe Terms of service.

I don't think site map would look particularly nice when centered... or the help home page. I don't think Cinder will change any of these, but you can still fix em with custom css

Mikael the D

Member

snpthecat said:
I don't think site map would look particularly nice when centered... or the help home page.

I think "site map" looks nicer centered.
Agree on help home page. This one would need to be totally rewritten to look nice.

snpthecat said:
but you can still fix em with custom css

Done.
Here is the code :

CSS for Centering
/* Align at center pages restricted to left */

/* #a-site-map in "More", .theme-form and .theme-variable-form for "theme settings", #a-terms-of-service in "Rules" */
#a-site-map, .theme-form, .theme-variable-form, #a-terms-of-service {
	margin-left: auto;
	margin-right: auto;
}

/* user settings page, and email change */
#c-users #a-edit, #c-maintenance-user-email-changes #a-new {
	display:grid;
	place-content:center;
}

/* connexion page */
#c-sessions #a-new {
	place-content: center;
}

/* Shortcuts page (create centered grid) */
#a-keyboard-shortcuts {
	display: grid;
	grid-template-columns: repeat(5, max-content);
	place-content: center;
}
/* Make h1 take full line of Shortcuts grid */
#a-keyboard-shortcuts > h1 {
	grid-column: 1 / -1;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

Edit : I corrected CSS because it was touching Wiki edition page.

Updated