Page MenuHomePhabricator
Create Task
Maniphest T217197

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

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

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

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

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterEmpty subtitle elements should not have margin
mediawiki/skins/MinervaNeue : masterSubtitle appear below page actions

Related Objects
Search...

Event Timeline

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

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


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
alexhollender triaged this task as Medium priority.EditedFeb 28 2019, 6:59 PM
alexhollender moved this task from Needs analysis to Designing/discussing right now on the Readers-Web-Backlog (Design) board.

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

beforeafterlink 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
Jdlrobson added a comment.Mar 4 2019, 6:02 PM

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.

alexhollender added a comment.Mar 5 2019, 4:46 PM

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

Jdlrobson added a comment.Mar 5 2019, 7:22 PM

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

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.
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
alexhollender added a comment.Mar 13 2019, 2:06 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 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
Jdlrobson moved this task from Upcoming to Readers-Web-Kanbanana-2019-20-Q1 on the Readers-Web-Backlog board.Jul 30 2019, 12:26 AM
Jdlrobson edited projects, added Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1); removed Readers-Web-Backlog.

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

Jdlrobson updated the task description. (Show Details)Jul 30 2019, 5:00 PM
gerritbot added a comment.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

Jdlrobson added a comment.EditedJul 30 2019, 5:04 PM

Screenshots:

Breadcrumbs:

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

Redirect:

gerritbot added a comment.Jul 30 2019, 8:26 PM

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

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

Jdlrobson added a comment.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.

alexhollender removed alexhollender as the assignee of this task.Jul 31 2019, 6:51 PM
alexhollender moved this task from Needs Design Review to Ready for Signoff on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

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.

redirectbreadcrumb
alexhollender closed this task as Resolved.Aug 1 2019, 3:59 PM
alexhollender updated the task description. (Show Details)
Jdlrobson reopened this task as Open.EditedAug 1 2019, 4:46 PM
Jdlrobson moved this task from Ready for Signoff to Needs Code Review on the Readers-Web-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

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

gerritbot added a comment.Aug 1 2019, 4:47 PM

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 comment.Aug 1 2019, 5:48 PM

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

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

Jdrewniak claimed this task.Aug 6 2019, 5:06 PM
Jdrewniak closed this task as Resolved.Aug 8 2019, 1:44 PM
Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL