Problem/Motivation

One thing that is bugging me every time I install Drupal 8 (thanks for the shiny new design! loving it):
the progress bar goes much too far to the right:

Installer progress bar before

This is probably just an oversight. The right padding should at least match the padding the page has on the left. I noticed that not only the progress bar, but everything is too far to the right.

Proposed resolution

Just match the right padding to the left padding.
I gave body.install-page #page a right-padding of 3.5 em and made the entire container a bit narrower (740px instead of 770) so it remains about the same width.
As the progress bar still does not look right with this, I gave it a further 2em margin to the right.

Installer progress bar after
So that's my initial patch. Patch uploaded in first comment, as without posting the issue first, there is no issue number.

Files: 
CommentFileSizeAuthor
#14 2094445-before.png1.01 MBLewisNyman
#14 2094445-after.png1013.72 KBLewisNyman
#13 drupalcore_fixinstallercss_2094445_12.patch869 bytesOuti
PASSED: [[SimpleTest]]: [MySQL] 58,702 pass(es).
[ View ]
#12 drupalcore_fixinstallercss_2094445_12.patch869 bytesOuti
PASSED: [[SimpleTest]]: [MySQL] 58,704 pass(es).
[ View ]
#9 drupalcore_fixinstallercss_2094445_9.patch787 bytesOuti
Test request sent.
[ View ]
#7 Screen Shot 2013-09-22 at 15.43.36.png1.22 MBLewisNyman
#6 installer-padding.png396.25 KBpameeela
#5 drupalcore_fixinstallercss_2094445_5.patch1002 bytesOuti
PASSED: [[SimpleTest]]: [MySQL] 58,344 pass(es).
[ View ]
#4 Screen Shot 2013-09-21 at 15.37.51.png598.1 KBLewisNyman
#1 drupalcore-fixinstallercss-2094445.patch611 byteseigentor
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch drupalcore-fixinstallercss-2094445.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
progress-bar-2.png83.33 KBeigentor
progress-bar-before-2.png130.62 KBeigentor

Comments

Status:Active» Needs review
Issue tags:+CSS, +installer
StatusFileSize
new611 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch drupalcore-fixinstallercss-2094445.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Status:Needs review» Needs work

The last submitted patch, drupalcore-fixinstallercss-2094445.patch, failed testing.

Issue tags:+css-novice

Title:Fix installer right padding - make it look balancedFix installer padding
StatusFileSize
new598.1 KB

I also noticed this vertical spacing issue when the page takes up the height of the viewport. There should be some blue spacing before and after the white container. It would be good to fix it here.

Screen Shot 2013-09-21 at 15.37.51.png

Status:Needs work» Needs review
StatusFileSize
new1002 bytes
PASSED: [[SimpleTest]]: [MySQL] 58,344 pass(es).
[ View ]

The patch should set the margins and paddings in a symmetric way and add a margin on the top and the bottom of the page.

Status:Needs review» Reviewed & tested by the community
StatusFileSize
new396.25 KB

Looks good.

Screenshot:

installer-padding.png

Status:Reviewed & tested by the community» Needs work
StatusFileSize
new1.22 MB

Ah, just noticed that the container is no longer centered...

Screen Shot 2013-09-22 at 15.43.36.png

Title:Fix installer padding Fix installer right padding - make it look balanced

After some discussion and head bashing, I think it's best to deal with the vertical padding separately and simply fix the right padding issue in this patch.

StatusFileSize
new787 bytes
Test request sent.
[ View ]

I removed the lines I added or changed on the last patch while trying to add some space between the top and the bottom of the white container and the navigator window.

Status:Needs work» Needs review

Status:Needs review» Needs work

+++ b/core/themes/seven/install-page.css
@@ -50,7 +51,6 @@ body.install-page {
     padding: 1em 0 1em 2em;
@@ -62,6 +62,7 @@ body.install-page {
     padding-left: 50px; /* LTR */

We also need to change the RTL styling now that we've changed the LTR

Status:Needs work» Needs review
StatusFileSize
new869 bytes
PASSED: [[SimpleTest]]: [MySQL] 58,704 pass(es).
[ View ]

StatusFileSize
new869 bytes
PASSED: [[SimpleTest]]: [MySQL] 58,702 pass(es).
[ View ]

Status:Needs review» Reviewed & tested by the community
StatusFileSize
new1013.72 KB
new1.01 MB
new1.01 MB

Looks good! Here are some before/after screenshots:

2094445-before.png2094445-after.png

O.K. this fixes the vertical margin issue, but leaves out the stuff why I originally created the issue...
-- edit --
Or maybe not.
I'll have a look at the patch first.

O.K. my bad, fixes the right padding issue.
Can't see any change on vertical margin, though.
http://screencast.com/t/CAQ8JwNlFTBh

Did this get lost, or would it be another issue?
Keeping things incremental would be in favor of creating another issue for it.

Yeah let's deal with it in another issue, I think the best action is to re-open #2032895: Follow-up use better technique for vertical centering

Status:Reviewed & tested by the community» Fixed

Committed and pushed to 8.x. Thanks!

Automatically closed -- issue fixed for 2 weeks with no activity.