Page MenuHomePhabricator

Homepage: tabbed menu should have border bottom
Open, HighPublic

Description

In order to be consistent with AMC, the tabbed menu on the mobile homepage should have a border bottom.

The desired result can preferably be achieved with:

.minerva__tab-container {
  box-shadow: inset 0px -1px 0px 0px rgba(200,204,209,1);
}

or, as a fallback, with:

.minerva__tab-container {
  border-bottom: 1px solid #C8CCD1;
}

Event Timeline

SBisson created this task.Jun 12 2019, 7:07 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 12 2019, 7:07 PM
MMiller_WMF renamed this task from Tabbed menu should have border bottom in order to be consistent with AMC to Homepage: tabbed menu should have border bottom.Jun 12 2019, 10:14 PM
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added subscribers: Catrope, kostajh, Etonkovidova and 4 others.
JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 14 2019, 11:36 AM

@Cntlsn could you please comment on this? I see a border-top on page-actions-menu, not a border-bottom for the tabs

The screenshot in the task description has the border bottom touching the active tab underline, while the AMC tabs do not appear that way.

Looping in @alexhollender as this was part of the work to keep the homepage design consistent with AMC.

  • About the first issue: my perspective is that the Homepage is now the first instance of a page with the AMC layout not featuring the page-actions-menu, but more will potentially come in the future (since probably the page-actions-menu could be redundant / not-active for some pages). The tabbed menu would still need border bottom in this scenarios. I would choose to have border-bottom for the tabs an no border-top for the page-actions-menu, but I'm not sure about the existence of any instances of the page-actions-menu withouth a tabbed menu?
  • About the second issue: I always thought it was a bug, or at least it looked buggy to me. It's usually a good practice for tabs design to have a border bottom (or drop shadow or different bg color) for the tabs container, and for it to touch the active tab underline. See OOUI TabSelectWidget (frameless)

@kostajh @Cntlsn first the easy one: the small gap between the tab underline and the border below is indeed a bug. My apologies for not looping you in on this task which will fix that: T225230.

Regarding the tab menu not having a bottom border: as you mentioned @Cntlsn perhaps there will be other uses for the tabbed menu without the page-actions-menu below in the future (I could see us wanting to do this on special pages like Watchlist, or History), though there aren't plans I know about for such use. Perhaps one option for now is just to create a border below that element but not include it in the component yet? It seems like the alternative would be to create a configurable border as part of the component, and then just make sure it's turned off in cases where it's sitting on-top of another element that already has a border?

Cntlsn closed this task as Declined.Wed, Aug 7, 11:53 AM

Declining this in favor of the new task for all UI fixes at T230014

Cntlsn reopened this task as Open.Mon, Aug 12, 1:59 PM

Re-opening per request at T230014#5409086

Cntlsn triaged this task as High priority.Mon, Aug 12, 2:00 PM
Cntlsn updated the task description. (Show Details)Mon, Aug 12, 4:12 PM

Change 530604 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage: add bottom border to the minerva tabs

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