Background
This task will cover the creation of the new logo for the header, following the guidelines created in T245190: Implement guidelines around logos creation. This will allow us to update the logo and continue with the remainder of the planned features, such as the collapsible sidebar.
After determining how to structure the new logo file itself T244486, we have to place the logo into the header for the new desktop improvements experience.
Prototype
Design
| legacy Vector | Vector Neue |
|---|---|
 |  |
A few design details (source): The logo should be left-aligned with the text in the sidebar. The content can be pushed down slightly to give the horizontal logo more breathing room.
- header height: fixed at 54px
- header padding-top: 10px
- header padding-bottom: 5px
- for now we can leave the alignment of the user-links as-is, which should result in them being top-aligned with the logo element
Technical notes:
- The current Vector layout places the logo inside the sidebar (.mw-panel) instead of in the header. For the new experience, this changes means removing the old logo from the sidebar and adding the new logo into the header.
- The header placement is technically below the content in Vector, but restructuring the header is not required for this task.
Acceptance criteria
- the alt text of the wordmark is the project name
- the alt text of a the icon is the project name with icon in brackets and subject to i18n
- the tagline has alt text that is configurable per project
- the site
- if no wordmark is defined the site title will be used in its place
- wordmark, icon and tagline are all optional. The absence of all three will show an h1 with the site title
- patch has been signed off by performance team
- old vector continues to show the old logo
- a new ResourceLoader module will be needed to ship the css for old Vector. It will eventually not be loaded in new Vector
- the header height has been increased in new Vector
- the header height remains unchanged in legacy Vector
QA steps
- the header height has been increased in new Vector
- the header height remains unchanged in legacy Vector
- there is no increase in CSS bytes for legacy Vector
- the legacy Vector logo remains unaffected
- the new Vector logo displays when I am using the new Vector version
- There is a storybook entry that allows us to test different logo combinations
Sign off steps
- Logo will be an image tag meaning changes to the logo will need to take into account caching and suboptimal CSS hacks such as hiding img tags with display none. Product has documented this.
- Serve SVGs only with no PNG fallback. For grade C browsers we will display text.
- Product has documented this pointing to the percentage of our users that have SVG support.
Developer notes
Some sample logos can be found here: T245190#5939228
Use the following config when testing:
$wgLogos = [
'icon' => 'https://di-logo-sandbox.firebaseapp.com/img/globe.png',
'tagline' => [
'alt' => 'the free encyclopedia',
'src' => 'https://di-logo-sandbox.firebaseapp.com/img/tagline/en-tagline-117-13.svg',
'width' => 117,
'height' => 13,
],
'1x' => 'https://en.wikipedia.org/static/images/project-logos/enwiki.png',
'wordmark' => [
'src' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg',
'width' => 116,
'height' => 18,
],
];Areas of risk
- We will need to load an additional stylesheet on the new Vector while not loading it on old Vector
- We will need to increase the header height in Vector. This will require lots of careful changes across multiple elements. The fact that this height depends on the logos also adds a lot of complexity given the absolute positioning of Vector. We will likely have to use flex box to get the vertical alignment and revisit the absolute positioning possibly relying on some sort of ResourceLoader LESS variable here. HERE BE DRAGONS
- We need to make a decision about how to separate old Vector and new Vector in templates. Personally I would suggest two master templates and a single config flag which chooses between them. The template data would be shared by the two templates to encourage us to generalise that code.
- Per @Krinkle use of flex box will mean we need to consider the grade C experience and how broken the experience looks. We may want to punt this to a separate task prior to releasing.
