Page MenuHomePhabricator

Homepage: mobile submodule headers
Closed, ResolvedPublic

Description

The submodule headers of the start module don't have correct styling. The div is not inheriting the correct subset of parameters from .growthexperiments-homepage-module .growthexperiments-homepage-module-header, .growthexperiments-homepage-module h2.growthexperiments-homepage-module-header

CurrentDesired

Correct styling could be achieved with the following:

body.mw-special-Homepage .overlay-content .growthexperiments-homepage-module-mobile-overlay .growthexperiments-homepage-module-section-header {
  font-size: 1.1em;
  font-weight: bold;  
}

Details

Related Gerrit Patches:
mediawiki/extensions/GrowthExperiments : masterStart: remove padding top from first submodule
mediawiki/extensions/GrowthExperiments : masterStart: update submodules header

Event Timeline

SBisson created this task.Jun 12 2019, 7:13 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 12 2019, 7:13 PM
MMiller_WMF renamed this task from The submodule headers of the start module don't have correct styling to Homepage: mobile submodule headers.Jun 12 2019, 10:25 PM
MMiller_WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added subscribers: kostajh, Catrope, Cntlsn and 4 others.
JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 14 2019, 11:35 AM
Cntlsn closed this task as Declined.Aug 7 2019, 11:53 AM

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

Cntlsn reopened this task as Open.Aug 12 2019, 1:55 PM

Re-opening per request at T230014#5409086

Cntlsn triaged this task as Medium priority.Aug 12 2019, 1:57 PM
Cntlsn updated the task description. (Show Details)

Changed task description with css details about desired styling.
Moving to ready for development column.

Cntlsn updated the task description. (Show Details)Aug 12 2019, 3:21 PM

Change 530593 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Start: update submodules header

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

Change 530593 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Start: update submodules header

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

Etonkovidova added a subscriber: RHo.

@RHo - I see font-size: 1.3em; for .growthexperiments-homepage-module-section-header :

The spacing has been increased (see the screenshots for betalabs and testwiki). As a result, less content fits into the viewport.

betalabstestwiki
RHo added a comment.Aug 21 2019, 12:14 PM

Thanks @Etonkovidova for pointing out the spacing. I think this is mainly due to the 1st "account created" step having extra top padding:

@SBisson - can we remove the 1em top padding from the body.mw-special-Homepage .overlay-content class?

@SBisson - can we remove the 1em top padding from the body.mw-special-Homepage .overlay-content class?

That padding on .overlay-content applies to all modules. Removing it is especially bad for Help and Mentorship. In the patch below, I propose removing the equivalent space from the first Start submodule. It has the same effect on the Start module without side-effects on other modules.

Change 531492 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Start: remove padding top from first submodule

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

One more patch to review.

Change 531492 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Start: remove padding top from first submodule

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

The padding is removed:

betalabstestwiki

Note:
@RHo - please review the spacing. The browser emulator even misinterprets the buttons position:

The real device does not display the bug, but the spacing is really bigger than in production:

testwikibetalabs

please review the spacing. The browser emulator even misinterprets the buttons position:

That looks a lot like T230629: Start module (overlay and server-side rendered view) layout broken in Firefox

Based on reviewing betalabs version on my device as well the spacing and header style is fixed, but the weird button rendering is also happening on my mobile Firefox browser (I've added details to T230629 linked by @kostajh).

Betalabs on Android device, Chrome browser
Betalabs on Android device, Firefox browser

Moving this task to PM sign-off, but perhaps we can prioritize fixing the Firefox bug?

@Etonkovidova -- I'm confused about this. Did you notice that issue with button overlap in spacing in browsers other than mobile Firefox? Are you saying that everything looks good here except for that one browser? Or are there other issues?

@Etonkovidova -- I'm confused about this. Did you notice that issue with button overlap in spacing in browsers other than mobile Firefox? Are you saying that everything looks good here except for that one browser? Or are there other issues?

  • In my comment I mentioned that the issue with overlapping buttons is observed in the browser emulator.
  • @RHo confirmed the limited scope of the issue on a real device (FF on Android)
  • @kostajh created T230629

We need to prioritize T230629 which is currently in Incoming work on our workboard.

@Etonkovidova -- now that T230629 is finished, should we also consider this task resolved?

MMiller_WMF closed this task as Resolved.Sep 24 2019, 5:24 PM

Thank you!

@Etonkovidova -- now that T230629 is finished, should we also consider this task resolved?

The correct formatting seems to be in place - checked on testwiki wmf.24.