Page MenuHomePhabricator

Add more styling rules to handle blockquotes inside issues such as Template:Proposed deletion
Closed, ResolvedPublic

Assigned To
Authored By
Jdlrobson
Jun 14 2018, 8:33 PM
Referenced Files

Description

The ambox Template:Proposed deletion is not very mobile friendly and uses a format inconsistent with the others.
e.g. Any page listed here:
https://en.wikipedia.org/w/index.php?title=Special%3AWhatLinksHere&target=Template%3AProposed_deletion_notify&namespace=0

display when ticket was writtenupdated display as of 8/22/18
Screen Shot 2018-06-14 at 1.28.40 PM.png (591×340 px, 58 KB)
reading-web-staging.wmflabs.org_w_index.php_title=Houdini_(software)&mobileaction=toggle_view_mobile(iPhone 6_7_8).png (1×750 px, 172 KB)

HTML:

<table class="plainlinks metadata ambox ambox-delete mbox-prod" role="presentation"><tbody><tr><td class="mbox-empty-cell" style="
    display: none;
"></td>
<td class="mbox-text"><div class="mw-ui-icon mw-ui-icon-minerva-warning mw-ui-icon-element mw-ui-icon-small  " title=""></div>
<div class="mbox-text-span">It is <b><a href="/wiki/Wikipedia:Proposed_deletion" title="Wikipedia:Proposed deletion">proposed that this article be deleted</a></b> because of the following concern:
<blockquote style="padding: 0;display: inline;border: none;">
<p>not enough independent sources</p>
</blockquote>
<p class="verbose">If you can address this concern by <a href="/wiki/Wikipedia:Editing_policy" title="Wikipedia:Editing policy">improving</a>, <a href="/wiki/Wikipedia:Manual_of_Style" title="Wikipedia:Manual of Style">copyediting</a>, <a href="/wiki/Help:Introduction_to_referencing_with_Wiki_Markup/1" title="Help:Introduction to referencing with Wiki Markup/1">sourcing</a>, <a href="/wiki/Wikipedia:Moving_a_page" title="Wikipedia:Moving a page">renaming</a>, or <a href="/wiki/Wikipedia:Merging" title="Wikipedia:Merging">merging</a> the page, <b>please <a class="external text" href="//en.wikipedia.org/w/index.php?title=Captivity_Records&amp;action=edit">edit this page</a></b> and do so. <i>You may remove this message if you improve the article or otherwise object to deletion for any reason</i>. Although not required, you are encouraged to explain why you object to the deletion, either in your edit summary or on the talk page. If this template is removed, <b><a href="/wiki/Wikipedia:Proposed_deletion#Nominating" title="Wikipedia:Proposed deletion">do not replace it</a></b>.</p>
<p>The article may be deleted if this message remains in place for seven days, i.e., after 19:56, 19 June 2018 (UTC).<br><small class="verbose">If you created the article, please don't be offended. Instead, consider improving the article so that it is acceptable according to the <a href="/wiki/Wikipedia:Deletion_policy" title="Wikipedia:Deletion policy">deletion policy</a>.</small><span style="display:none; speak:none;"><span id="delete-criterion">PROD</span><span id="delete-reason">Expired+%5B%5BWP%3APROD%7CPROD%5D%5D%2C+concern+was%3A+not+enough+independent+sources</span><span id="raw-delete-reason">Expired [[WP:PROD|prod]], concern was: not enough independent sources</span></span></p>
<hr style="
    display: none;
"><small><span class="verbose prod-notify-code"><b>Nominator:</b> Please consider notifying the author/project: <code>{{<a href="/wiki/Wikipedia:Substitution" title="Wikipedia:Substitution">subst</a>:<a href="/wiki/Template:Proposed_deletion_notify" title="Template:Proposed deletion notify">proposed deletion notify</a>|Captivity Records|concern=not enough independent sources}} ~~~~</code></span></small><span class="ambox-learn-more">Learn more</span></div>
</td>
</tr></tbody></table>

The blockquote in particular is problematic. Ideally, we should understand this template a little more and talk to editors about fixing this template for mobile display.

Note: Usually when this template is used another ambox is below it and the Template:Multiple issues is not used..

Developer notes

We will introduce more CSS (technical debt) to resolve this, with the knowledge that we may be able to pay this off at the end of the project as part of cleanup.

.ambox blockquote {
    margin: 0;
    padding: 0;
    font-family: inherit;
    display: inline;
}
.ambox blockquote p {
   margin: 0;
  display: inline;
}

Event Timeline

Vvjjkkii renamed this task from How should we display Template:Proposed deletion notify ? to qzaaaaaaaa.Jul 1 2018, 1:03 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from qzaaaaaaaa to How should we display Template:Proposed deletion notify ?.Jul 2 2018, 6:36 AM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

I propose that we treat this the same as we treat all page issues. Are there concerns with that?

+1 for talking to editors and asking them to change it, although that seems like it can happen in a separate path.

The format is incompatible with other page issues so HTML changes are necessary. We will need to make any changes to this template on wiki (hence the Local-Wiki-Issues tag).

We could add blockquote specific styling but at the cost of yet more technical debt:

.ambox blockquote {
    margin: 0;
    padding: 0;
    font-family: inherit;
    display: inline;
}
.ambox blockquote p {
   margin: 0;
  display: inline;
}

Two options:

Screen Shot 2018-08-21 at 10.38.26 AM.png (96×838 px, 17 KB)

Screen Shot 2018-08-21 at 10.40.24 AM.png (272×827 px, 43 KB)

Jdlrobson renamed this task from How should we display Template:Proposed deletion notify ? to Add more styling rules to handle blockquotes inside issues such as Template:Proposed deletion notify.Aug 21 2018, 6:04 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Incoming to Upcoming on the Web-Team-Backlog board.

Re: task goal - I don't think <blockquote> is specifically needed. The intent of that styling is just trying to make the content of the |concerns=foo unmissable by anyone who has banner-blindness to the generic text in most amboxes. Any alternative suggestions which achieve that result (making "foo" unmissable), via changes to the default template syntax, should be fine.

@Jdlrobson Re: description text, ah, now I see why you were linking to whatlinkshere. Sorry that I removed it. :-) However you also changed the template linked again, and this time to a non-existent template! I'll fix that now. ;-)

Quiddity renamed this task from Add more styling rules to handle blockquotes inside issues such as Template:Proposed deletion notify to Add more styling rules to handle blockquotes inside issues such as Template:Proposed deletion.Aug 21 2018, 10:32 PM
Quiddity updated the task description. (Show Details)
ovasileva triaged this task as Medium priority.Aug 22 2018, 8:53 AM

The other aspect to keep in mind, is that PROD templates are only ever going to be on an article for very short periods of time. I.e. Unlike most amboxes, such as {{cleanup}}, which can linger for years, there are usually not any pages which have a PROD template for more than 7 days. Subcategories of https://en.wikipedia.org/wiki/Category:Proposed_deletion shows that there is no backlog. So inconsistent formatting might be an acceptable compromise.
There will be similar complexities with the Speedy deletion templates all of which require immediate/urgent author interaction if they object, so it would be good to consider those challenges here, too.

Jdlrobson changed the task status from Open to Stalled.Aug 23 2018, 5:20 PM

T197617 provides us an option here, to move these styles into the template which I'd prefer so I'm going to stall on that.

T197617 is relevant if the issue is specific to a particular skin. It seems like this issue is more to do with the device size regardless of which skin is in use. TemplateStyles is still a good option to fix that (using @media rules), but in that case there doesn't seem to be a need to wait on T197617.

This issue is specific to Minerva right now as Minerva has special handling for issues boxes. The blockquote styling looks fine in other skins. Media queries don't work here as the problem impacts Minerva on tablet/desktop too.

Jdlrobson changed the task status from Stalled to Open.Aug 28 2018, 2:53 PM
Jdlrobson added subscribers: Niedzielski, ovasileva.

TemplateStyles will be usable on Minerva Thursday, at which time we can flatten this per plan on wiki (no luck with talk page)

no luck with talk page

That template has 86 watchers of which only 18 have visited recent edits. It's only been a week. I might suggest waiting and spurring more conversation.

You might want to ping User:MSGJ and User:Train2104 and see if they are around and interested. They are recent editors of the template. A simple follow up post with the {{ping}} template should do the trick.

Another approach would be to post your suggested update on Wikipedia:Requested_templates where more folks might see it.

I've made some edits to the underlying templates enabled by T197617 and this is now styled nicely on Minerva - https://en.wikipedia.org/wiki/Template:Proposed_deletion/styles.css.

I'll keep watching that conversation in hope of these styles being unncessary, but this should be resolved from our perspective. @alexhollender can you take a look?

Looks good. Moving to QA.

reading-web-staging.wmflabs.org_wiki_Pequeno_Portugu%C3%AAs.png (1×800 px, 189 KB)
reading-web-staging.wmflabs.org_wiki_A._M._Sreedharan.png (1×800 px, 168 KB)
reading-web-staging.wmflabs.org_wiki_Debt_cash_flow.png (1×800 px, 183 KB)

separate question around whether or not we want to improve the display of the issue inside of the modal? @Jdlrobson @ovasileva

reading-web-staging.wmflabs.org_wiki_Pequeno_Portugu%C3%AAs (1).png (1×800 px, 252 KB)

Looks good to me, verified the new styling of the ambox template.

Looks good here as well. Resolving this. Modal looks fine to me, but I'll let @alexhollender decide on whether we need extra work here