Page MenuHomePhabricator

[Spike] Should the sticky header be an enhancement of the existing header or an additional header?
Closed, ResolvedPublic5 Estimated Story PointsSpike

Description

This spike is an important exploration in how we will build the sticky header feature. Going forward we have 2 options
1) Build a standalone sticky header in Vue.js (or vanilla JavaScript ) that is separate from the current header and display it as necessary.

var StickyHeader = require( './StickyHeader.vue');
new Vue( { ... }

2) Progressively enhance the existing header, hiding functionality where needed.

In this spike prototype two versions of the sticky header with the search button on the left hand side, making note of what issues you run into.

Outcome

  1. Two abandoned patches should show 2 different approaches.
  1. Summarize your findings to the team in a google doc/etherpad linked to in the description.
  • What are the pros and cons of each approach ?
  • Are there changes that could be made to the design that would make either easier? e.g. search on the right hand side.
  • Outline how you imagine the code would be invoked - e.g. on page load, on scroll event or other.
  1. Gadgets - allowing specifically configured gadgets to be added to the menu

Design

Prototype: https://di-community-round-2.web.app/Audre_Lorde

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJul 27 2021, 12:09 AM
Jdlrobson updated the task description. (Show Details)

Change 709829 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add max-width to user menu and text-overflow: ellipsis

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

nray added a subscriber: nray.

^^ Please ignore, I accidentally attached the wrong patch

Change 714088 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] POC: Progressively enhance existing header to make it sticky

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

  1. Progressively enhance the existing header, hiding functionality where needed.

Patchdemo can be seen for this by logging into the following : https://patchdemo.wmflabs.org/wikis/7d090d01c1/wiki/Water

Username: Patch Demo
Password: patchdemo1

A full writeup on this is forthcoming! Next, I will try the Vue implementation

  1. Progressively enhance the existing header, hiding functionality where needed.

Patchdemo can be seen for this by logging into the following : https://patchdemo.wmflabs.org/wikis/7d090d01c1/wiki/Water

Username: Patch Demo
Password: patchdemo1

A full writeup on this is forthcoming! Next, I will try the Vue implementation

Woah! Looks great :)

Change 714792 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] POC: Sticky Header using Vue

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

  1. Build a standalone sticky header in Vue.js (or vanilla JavaScript ) that is separate from the current header and display it as necessary.

Patchdemo can be seen for this by logging into the following : https://patchdemo.wmflabs.org/wikis/a84fea793a/wiki/Tree

Username: Patch Demo
Password: patchdemo1

Next up: Writing what I learned down!

nray removed nray as the assignee of this task.Aug 26 2021, 9:39 PM

Change 714792 abandoned by Nray:

[mediawiki/skins/Vector@master] POC: Sticky Header using Vue

Reason:

POC, feel free to reopen if helpful

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

Change 714088 abandoned by Nray:

[mediawiki/skins/Vector@master] POC: Progressively enhance existing header to make it sticky

Reason:

POC, feel free to reopen if helpful

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

Jdlrobson claimed this task.
Jdlrobson added subscribers: cjming, Jdrewniak.

We talked through this in our super happy dev time meeting (attendees: @cjming @nray @Jdrewniak and myself)

Our plan is to render a standalone and complete sticky header inside the Mustache template. This will be separate from the default menu.

Using Mustache will help us migrate this to Vue.js in the future if we deem it necessary. We'll use mw-ui-icon for the icons.
JavaScript will then be in charge of displaying the menu, wiring it up and toggling the display of certain items.

For the user menu, we will likely need to clone the user menu dropdown, changing the ID and subscribe to the https://gerrit.wikimedia.org/g/mediawiki/core/+/5c4cd08943ff6af275423ad44d0cc6212f06d11f/resources/src/mediawiki.util/util.js#419 hook to carry over gadget links.

We'll likely want to clone elements, rather than move them but we'll discuss that further as we begin implementing the different parts.

Please reopen or comment if I missed any important detail from that discussion.