Move skin "subtitle" markup that contains redirect and breadcrumbs
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	Feb 26 2019, 8:51 PM

Description

If you visit https://en.m.wikipedia.org/wiki/Barack?redirect=no&mobileaction=beta you'll see a "redirect page" subtitle in the top of the article

Screen Shot 2019-02-26 at 11.40.30 AM.png (423×925 px, 44 KB)

Various extensions add HTML here - examples include subpages on MediaWiki.org (e.g. Reading/Web on mediawiki.org and breadcrumbs on Wikivoyage (at top of page South east Asia > Singapore )

These do not work too well with AMC appearing to the right of tabs

Screen Shot 2019-02-21 at 11.58.46 AM.png (377×622 px, 33 KB)

Let's move these to a more appropriate position and make some styling tweaks for both AMC and standard mode.

Acceptance criteria

Move subtitle below page actions
Add a top margin

Mockups available in T217197#4992081

Developer notes

These are outputted in minerva.mustache by

{{{subtitle}}}

which comes from MinervaTemplate->data which is populated inside prepareQuickTemplate which contains an all powerful hook that many extensions exploit....

We will move these above #bodyContent and below heading-holder

<div class="pre-content heading-holder"></div>
<div class="pre-content subtitle">subtitle goes here</div>
<div id="bodyContent">

We should add a margin-top/bottom of 10px

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/MinervaNeue	master	+4 -0	Empty subtitle elements should not have margin
	mediawiki/skins/MinervaNeue	master	+7 -1	Subtitle appear below page actions

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved	Goal	ovasileva	T198313 [GOAL] Advanced mobile contributions
		Resolved		Jdrewniak	T217197 Move skin "subtitle" markup that contains redirect and breadcrumbs

Event Timeline

Jdlrobson created this task.Feb 26 2019, 8:51 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 26 2019, 8:51 PM

Jdlrobson added a project: Advanced Mobile Contributions.Feb 26 2019, 8:51 PM

Jdlrobson updated the task description. (Show Details)

@Jdlrobson how exactly do extensions add HTML here? I see the bread-crumbs showing up on Wikivoyage

Screen Shot 2019-02-26 at 22.53.13.png (414×678 px, 67 KB)

And I'm looking at the minvera.mustache template, but I'm not sure where extensions hook in to do that.

Jdlrobson updated the task description. (Show Details)Feb 26 2019, 10:09 PM

@Jdlrobson I think it makes sense to move them in between hatnotes and the article content. I imagine this content structure map isn't complete (side note, it'd be great if we maintained something like this on one of our project pages to help people, and ourselves, understand how Vector transposes into Minerva/MFE), but here is what I've got so far:

Here are before/after screenshots of the two pages you mentioned, given the location for {{subtitle}} that I'm suggesting:

before	after	link to page
		https://en.m.wikipedia.org/wiki/Barack?redirect=no
		https://en.m.wikivoyage.org/wiki/Singapore
		https://www.mediawiki.org/wiki/Reading/Web/Projects/In-page_Navigation

This is technically possible. If https://phabricator.wikimedia.org/T217197#4992081 is what we want to do, just some advice on the margins and font-size would be helpful.

@Jdlrobson we can leave the font-size as is. Assuming it would be inside this div <div id="bodyContent" class="content"> (?) the right/left margins will be taken care of, so we should just need margin-top:10px. If it isn't inside that div we should just mirror its margin, which is margin: 0 16px;.

Flagged revs is another example:
https://id.m.wikipedia.org/wiki/Si_Doel_Anak_Sekolahan

Screen Shot 2019-03-05 at 11.21.39 AM.png (267×369 px, 43 KB)

HTML:

<div class="pre-content heading-holder">
				<div class="page-heading">
					<h1 id="section_0"><i>Si Doel Anak Sekolahan</i></h1>
					<div class="tagline"></div>
				</div>
				
				<div id="mw-fr-reviewnotice" class="plainlinks flaggedrevs_preview"><a class="external text" href="//id.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;oldid=14069903&amp;diff=cur">16 perubahan</a> pada versi ini merupakan <a href="/wiki/Bantuan:Validasi_halaman" title="Bantuan:Validasi halaman">revisi tunda</a>.
<a class="external text" href="//id.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;stable=1">Versi stabil</a> <a class="external text" href="//id.wikipedia.org/w/index.php?title=Istimewa:Catatan&amp;type=review&amp;page=Si_Doel_Anak_Sekolahan">diperiksa</a> pada <i>30 Juli 2018</i>.</div><div id="mw-fr-revisiontag" class="flaggedrevs_short flaggedrevs_draft_notsynced plainlinks noprint nomobile"><div class="flaggedrevs_short_basic"><img class="flaggedrevs-icon" src="/w/extensions/FlaggedRevs/frontend/modules/img/1.png" alt="Perubahan tertunda ditampilkan di halaman ini" title="Perubahan tertunda ditampilkan di halaman ini">[<a class="external text" href="//id.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;oldid=14069903&amp;diff=cur">perubahan menunggu tinjauan</a>]<img id="mw-fr-revisiontoggle" class="fr-toggle-arrow" src="/w/extensions/FlaggedRevs/frontend/modules/img/arrow-down.png" style="display:none;" alt="tampilkan/sembunyikan detail"></div>
<div id="mw-fr-revisiondetails-wrapper" style="position:relative;"><div id="mw-fr-revisiondetails" class="flaggedrevs_short_details" style="display:none"><a class="external text" href="//id.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;oldid=14069903&amp;diff=cur">16 perubahan</a> pada versi ini merupakan <a href="/wiki/Bantuan:Validasi_halaman" title="Bantuan:Validasi halaman">revisi tunda</a>.
<a class="external text" href="//id.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;stable=1">Versi stabil</a> <a class="external text" href="//id.wikipedia.org/w/index.php?title=Istimewa:Catatan&amp;type=review&amp;page=Si_Doel_Anak_Sekolahan">diperiksa</a> pada <i>30 Juli 2018</i>.</div>
</div>
</div>

				<ul id="page-actions" class="hlist "><li id="ca-edit" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-minerva-edit-enabled" title="Sunting bagian awal halaman ini"><a href="https://id.m.wikipedia.org/w/index.php?title=Si_Doel_Anak_Sekolahan&amp;action=edit&amp;section=0" class="edit-page">Sunting</a></li><li id="ca-watch" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-minerva-watch watch-this-article mw-ui-icon-mf-watch view-border-box" title="Pantau halaman ini"><a role="button">Pantau halaman ini</a></li><li><div class="mw-ui-icon mw-ui-icon-minerva-download mw-ui-icon-element   " title="Unduh"></div><div class="mw-ui-icon mw-ui-icon-mf-spinner mw-ui-icon-element   spinner loading" title="" style="display: none;">Memuat...</div></li><li class="mw-ui-icon mw-ui-icon-element mw-ui-icon-minerva-language-switcher language-selector" title="Baca dalam bahasa lain"><a href="/wiki/Istimewa:MobileLanguages/Si_Doel_Anak_Sekolahan">Baca dalam bahasa lain</a></li></ul>
				
				
			</div>

Jdlrobson updated the task description. (Show Details)Mar 5 2019, 10:10 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson edited projects, added Readers-Web-Backlog; removed Readers-Web-Backlog (Design).

Jdlrobson moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.

ovasileva moved this task from Triaged but Future to Upcoming on the Readers-Web-Backlog board.Mar 13 2019, 1:50 PM

Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptMar 13 2019, 1:50 PM

ovasileva updated the task description. (Show Details)Mar 13 2019, 1:51 PM

In T217197#5002681, @Jdlrobson wrote:

Flagged revs is another example:
https://id.m.wikipedia.org/wiki/Si_Doel_Anak_Sekolahan

@Jdlrobson is this also a case of a subtitle, or something different? Wondering if it belongs here or in related task?

Also, should this task be a child of T147641?

ovasileva set the point value for this task to 3.Mar 13 2019, 4:41 PM

Jdlrobson added a parent task: T216420: [EPIC] Display core version of history page.Mar 26 2019, 5:07 PM

ovasileva edited projects, added Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q3); removed Readers-Web-Backlog.Mar 26 2019, 5:29 PM

MBinder_WMF edited projects, added Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q4); removed Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q3).Apr 1 2019, 5:18 PM

Jdlrobson renamed this task from Where to put page subtitles e.g. redirect, breadcrumbs to Move skin "subtitle" markup that contains redirect and breadcrumbs.Apr 8 2019, 5:18 PM

ovasileva moved this task from Backlog to Triaged on the Advanced Mobile Contributions board.Jun 18 2019, 11:29 PM

ovasileva edited parent tasks, added: T198313: [GOAL] Advanced mobile contributions; removed: T216420: [EPIC] Display core version of history page.Jul 2 2019, 9:38 PM

MBinder_WMF edited projects, added Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1); removed Readers-Web-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q4).Jul 3 2019, 5:42 PM

ovasileva edited projects, added Readers-Web-Backlog; removed Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1).Jul 24 2019, 5:25 PM

Would be nice to fix this before rolling out AMC some more:

Screenshot 2019-07-29 at 5.27.03 PM.png (335×1 px, 71 KB)

Jdlrobson moved this task from Needs Analysis to Needs Code Review on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Jul 30 2019, 4:56 PM

Jdlrobson updated the task description. (Show Details)Jul 30 2019, 5:00 PM

Change 526479 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Subtitle appear below page actions

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

gerritbot added a project: Patch-For-Review.Jul 30 2019, 5:00 PM

Screenshots:

Breadcrumbs:

Screenshot 2019-07-30 at 10.28.22 AM.png (753×1 px, 404 KB)

https://id.m.wikipedia.org/wiki/Si_Doel_Anak_Sekolahan (page triage)

Screenshot 2019-07-30 at 10.30.05 AM.png (745×1 px, 314 KB)

Redirect:

Screenshot 2019-07-30 at 10.28.49 AM.png (729×1 px, 103 KB)

Jdlrobson assigned this task to alexhollender_WMF.Jul 30 2019, 5:04 PM

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

Change 526479 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Subtitle appear below page actions

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

Gerrit Code Review <gerrit@wikimedia.org> mentioned this in rSKINcf686917dfc7: Update git submodules.Jul 30 2019, 8:27 PM

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.17; 2019-08-06).Jul 30 2019, 9:00 PM

@alexhollender got some real URLs for you now:

Note sure how to replicate the Indonesian Wikipedia one on beta cluster, so screenshot is still all I have for that one (but feel free to copy and paste HTML from https://id.m.wikipedia.org/wiki/Si_Doel_Anak_Sekolahan (page triage) into the Spain article using web inspector to get an idea.

Maintenance_bot removed a project: Patch-For-Review.Jul 30 2019, 9:11 PM

the two that I am able to test (redirect, breadcrumbs) look good, and based on the screenshot of flagged revs in T217197#5377116 I'm fine moving forward with this.

redirect	breadcrumb

@Jdlrobson just seeing this https://es.m.wikipedia.org/w/index.php?title=Xenorhina_huon&oldid=107999744. Not sure if it's a related issue but seems to be of the same nature.

IMG_432F860F893F-1.jpeg (1×750 px, 408 KB)

@alexhollender yup - here's an updated URL: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Spain&oldid=395822

Jdlrobson moved this task from Needs Design Review to Ready for Signoff on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Jul 31 2019, 8:44 PM

@Jdlrobson awesome : )

alexhollender_WMF closed this task as Resolved.Aug 1 2019, 3:59 PM

alexhollender_WMF updated the task description. (Show Details)

Looks like I've introduced a margin for disambiguation pages.. https://en.m.wikipedia.beta.wmflabs.org/wiki/Qatar

Screenshot 2019-08-01 at 9.48.20 AM.png (383×1 px, 89 KB)

Change 527146 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Empty subtitle elements should not have margin

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

gerritbot added a project: Patch-For-Review.Aug 1 2019, 4:47 PM

Change 527146 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Empty subtitle elements should not have margin

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

Gerrit Code Review <gerrit@wikimedia.org> mentioned this in rSKIN86c5f3f51238: Update git submodules.Aug 1 2019, 5:52 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 1 2019, 6:11 PM

Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Aug 1 2019, 7:11 PM

Jdrewniak claimed this task.Aug 6 2019, 5:06 PM

Jdrewniak closed this task as Resolved.Aug 8 2019, 1:44 PM

	F29931431: Screenshot 2019-08-01 at 9.48.20 AM.png
	Aug 1 2019, 4:48 PM

	F29907488: Screenshot 2019-07-30 at 10.30.05 AM.png
	Jul 30 2019, 5:30 PM

	F29907484: Screenshot 2019-07-30 at 10.28.49 AM.png
	Jul 30 2019, 5:30 PM

	F29907483: Screenshot 2019-07-30 at 10.28.22 AM.png
	Jul 30 2019, 5:30 PM

	F29907383: Screenshot 2019-07-30 at 10.04.17 AM.png
	Jul 30 2019, 5:04 PM

	F29921367: image.png
	Jul 31 2019, 6:51 PM

	F29921369: image.png
	Jul 31 2019, 6:51 PM

Move skin "subtitle" markup that contains redirect and breadcrumbsClosed, ResolvedPublic3 Estimated Story PointsActions