Page MenuHomePhabricator

Tagline should be centered beneath wordmark
Closed, ResolvedPublic2 Estimated Story Points

Description

Description

The tagline should be centered beneath the wordmark like so:

image.png (329×434 px, 5 KB)

Currently:

beta (incorrect)centered (correct)
LTR
Screen Shot 2020-05-06 at 12.10.43 PM.png (70×207 px, 9 KB)
link
Screen Shot 2020-05-06 at 12.11.18 PM.png (88×237 px, 12 KB)
RTL
Screen Shot 2020-05-06 at 12.11.33 PM.png (76×223 px, 11 KB)
link
Screen Shot 2020-05-06 at 12.11.52 PM.png (71×220 px, 10 KB)

The logo+wordmark+tagline is using flexbox. We want to ensure that the logo still looks good on browsers that don't support flexbox.

I think one solution would be:

  • make the .mw-logo-container element a flexbox with the following CSS
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
  • add margin: 0 auto to the tagline (and make sure it comes before the margin-top: 5px
QA

Skipping QA steps here? We need to ensure this on a code-only level, we don't have any example to test the impact of this change

That's probably better of done as separate story in storybook

Event Timeline

@alexhollender margin: 0 auto; is sufficient for horizontal centering in both evergreen and old browsers, whether flexbox is supported or not, as I've written before.
While the flexbox and align rules on the parent (-container) make the intent more explicit, those only add complication and extra rules without practical benefit.
I note that I've asked to add the necessary rule a few times (phab, 1, 2, 3, 4, etc.)

What is the expected behaviour if the tagline is wider than the wordmark? Assuming the horizontal centering is expected in that case too, the .mw-logo-wordmark class needs a margin: 0 auto; rule as well.

Change 595707 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [modern] Center the logo tagline beneath the wordmark

https://gerrit.wikimedia.org/r/595707

@alexhollender margin: 0 auto; is sufficient for horizontal centering in both evergreen and old browsers, whether flexbox is supported or not, as I've written before.
While the flexbox and align rules on the parent (-container) make the intent more explicit, those only add complication and extra rules without practical benefit.
I note that I've asked to add the necessary rule a few times (phab, 1, 2, 3, 4, etc.)

What is the expected behaviour if the tagline is wider than the wordmark? Assuming the horizontal centering is expected in that case too, the .mw-logo-wordmark class needs a margin: 0 auto; rule as well.

Thanks for raising this question. I think part of the complexity here is that there is no official version of the logo+wordmark+tagline aside from the usage on the site. Since currently in Vector all taglines are centered underneath the wordmark, regardless of length, I think it's a sensible starting point. It would make sense for us to take a step back at some point, and evaluate the identity system (i.e. logo+wordmark+tagline) and figure out if we want part of the system to be that when the tagline is longer than the wordmark we left-align them. But that feels a bigger decision than I'd like to take on right now. So we'll stick with the status quo, as determined by the current version of Vector.

ovasileva set the point value for this task to 2.May 13 2020, 5:34 PM

Change 595707 merged by jenkins-bot:
[mediawiki/skins/Vector@master] [modern] Center the logo tagline beneath the wordmark

https://gerrit.wikimedia.org/r/595707

Edtadros subscribed.

@Volker_E, is this intended to be tested in Beta?

Re-assigning to you @Edtadros. Think we can move it to QA in Prod after next week's train, or still opt for sign-off.

Screen Shot 2020-06-02 at 3.09.58 PM.png (792×2 px, 287 KB)

did a quick confirmation in production on fawiki - looks good. Resolving.