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:

Currently:

beta (incorrect)centered (correct)
LTR
link
RTL
link

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

ovasileva triaged this task as High priority.May 11 2020, 5:46 PM
Demian added a comment.EditedMay 11 2020, 11:21 PM

@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
Volker_E reassigned this task from Volker_E to Edtadros.May 13 2020, 5:43 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

Volker_E updated the task description. (Show Details)May 13 2020, 8:22 PM
Edtadros reassigned this task from Edtadros to Volker_E.May 17 2020, 6:01 AM
Edtadros added a subscriber: Edtadros.

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

Volker_E reassigned this task from Volker_E to Edtadros.EditedMay 18 2020, 5:36 PM

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.

ovasileva closed this task as Resolved.Jun 2 2020, 1:10 PM


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