Homepage: mobile submodule headers
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	SBisson
	Jun 12 2019, 7:13 PM

Project Tags

Referenced Files

	F30077150: image.png
	Aug 23 2019, 1:45 PM

	F30077144: Screenshot (23 Aug. 2019 15:34:08)
	Aug 23 2019, 1:45 PM

	F30069166: IMG_8227.PNG
	Aug 23 2019, 3:17 AM

	F30074538: IMG_8227.PNG
	Aug 23 2019, 3:17 AM

	F30069118: Screen Shot 2019-08-22 at 3.26.32 PM.png
	Aug 23 2019, 3:17 AM

	F30074534: IMG_8228.PNG
	Aug 23 2019, 3:17 AM

	F30069161: IMG_8228.PNG
	Aug 23 2019, 3:17 AM

	F30052288: image.png
	Aug 21 2019, 12:14 PM

Subscribers

View All 11 Subscribers

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

Current	Desired

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 Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Start: remove padding top from first submodule	Sbisson	mediawiki/extensions/GrowthExperiments	master	+4 -0
	Start: update submodules header	Sbisson	mediawiki/extensions/GrowthExperiments	master	+6 -0

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	• Rileych	T213990 [EPIC] Growth: Newcomer homepage
Resolved	MMiller_WMF	T215983 Homepage: mobile version
Resolved	• Rileych	T230014 Homepage: layout and UI fixes
Resolved	SBisson	T225667 Homepage: mobile submodule headers

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

SBisson mentioned this in T225288: [mobile] Homepage UX/UI issues.Jun 12 2019, 7:21 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 (Sprint 0 (Growth Team)); removed: Growth-Team.

MMiller_WMF updated the task description. (Show Details)

MMiller_WMF added parent tasks: T215983: Homepage: mobile version, T225676: Homepage: mobile MVP list.

MMiller_WMF added subscribers: kostajh, Catrope, • Cntlsn and 4 others.

MMiller_WMF removed a parent task: T225676: Homepage: mobile MVP list.Jun 12 2019, 11:28 PM

MMiller_WMF moved this task from Incoming to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Jun 12 2019, 11:31 PM

JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 14 2019, 11:35 AM

Moving per @Cntlsn

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

Re-opening per request at T230014#5409086

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

• Cntlsn added a parent task: T230014: Homepage: layout and UI fixes.Aug 12 2019, 5:48 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

gerritbot added a project: Patch-For-Review.Aug 16 2019, 3:20 PM

SBisson claimed this task.Aug 16 2019, 3:20 PM

SBisson moved this task from Ready for Development to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Aug 16 2019, 7:54 PM

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

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

Maintenance_bot removed a project: Patch-For-Review.Aug 16 2019, 9:11 PM

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

Screen Shot 2019-08-19 at 3.15.15 PM.png (1,526×1,024 px, 353 KB)

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

betalabs	testwiki

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?

In T225667#5428223, @RHo wrote:

@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

gerritbot added a project: Patch-For-Review.Aug 21 2019, 1:49 PM

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

Maintenance_bot removed a project: Patch-For-Review.Aug 21 2019, 11:10 PM

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Aug 22 2019, 12:01 AM

Tgr moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Aug 22 2019, 6:13 AM

The padding is removed:

betalabs	testwiki

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

Screen Shot 2019-08-22 at 3.26.32 PM.png (467×754 px, 51 KB)

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

testwiki	betalabs

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

Screenshot (23 Aug. 2019 15:34:08) (1,080×1,920 px, 85 KB)

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?

In T225667#5455625, @MMiller_WMF wrote:

@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?

Thank you!

In T225667#5512467, @MMiller_WMF wrote:

@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.

Homepage: mobile submodule headersClosed, ResolvedPublicActions

Description

Details

Related ObjectsSearch...

Event Timeline

Homepage: mobile submodule headers
Closed, ResolvedPublic
Actions

Related Objects
Search...