==== Background
This task will cover the creation of the new logo for the header, following the guidelines created in {T245190}. 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
[[ http://patchdemo.wmflabs.org/wikis/380ec9d400f1bd8a573e09b015352723/w/ | DEMO ]] (patch [[ https://gerrit.wikimedia.org/r/c/585358 | 585358 ]])
==== Design
| {F31630990 width=400} | {F31630994 width=400} |
| legacy Vector | Vector Neue |
A few design details ([[ https://phabricator.wikimedia.org/T246170#5957100 | 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.
{F31674524 width=50%}
- header height — this should be determined by the height of the logo+wordmark. It would be somewhere between 44px and 54px.
- header padding — `padding: 16px 24px 12px 24px;`
- also please note the vertically centered alignment of the user links within the header space
==== 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.
- On smaller widths, the personal menu in the right side of the header should not overlap the logo, it should wrap to the next line instead.
==== 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
1) We will need to load an additional stylesheet on the new Vector while not loading it on old Vector
2) 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**
3) 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.
4) 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.