Page MenuHomePhabricator

Cleanup Special:RecentChanges filters appearance on Minerva (mobile)
Closed, ResolvedPublic8 Estimated Story Points

Assigned To
Authored By
May 15 2019, 7:45 AM



Some visual cleanup required to get recent changes to display properly on a mobile screen.

There are various rules which are desktop specific (e.g. fixed widths) and certain input elements are cluttered/impossible to read (see screenshot):

Screen Shot 2019-05-15 at 9.43.15 AM.png (673×388 px, 83 KB)
Screen Shot 2019-06-11 at 14.05.12.png (1×982 px, 501 KB)
Screen Shot 2019-06-11 at 14.04.29.png (1×982 px, 564 KB)
Screen Shot 2019-06-11 at 14.04.54.png (1×982 px, 575 KB)
"Filter changes" input too smallfix horizontal scrollingline length too shorthide List of abbreviations


Per T223922

en.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=7&urlversion=2&useskin=Minerva(iPhone 6_7_8) (1).png (1×750 px, 119 KB)
en.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=7&urlversion=2&useskin=Minerva(iPhone 6_7_8) (3).png (1×750 px, 113 KB)
en.wikipedia.org_wiki_Special_RecentChanges_hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=7&urlversion=2&useskin=Minerva(iPhone 6_7_8) (2).png (1×750 px, 126 KB)

Cleanup checklist


  • page should not scroll horizontally
  • hide the list of abbreviations box
  • move Live updates button onto its own line, below changes/days filter button
  • move "View new changes since [date]" button onto its own line, below "Live updates" button
  • decrease font size of "View new changes since [date]" so that it fits on one line

Active filters box

  • move bookmark button up next to "Hide" in Active filters box so filter pills can take up the full width
  • move trash icon to bottom of Active filters box (it turns into "Restore default filters" when tapped and then becomes too wide for it's current location)
  • currently when you press "Hide" the filter buttons are still shown, but don't work. We should either make sure those hide, or just remove the hide functionality
  • tapping on the gray area of the Active filters box opens the filter menu, this shouldn't happen

Filter dropdown

  • limit the dropdown width to the width of the "Basic filters" dropdown
  • allow filter titles and descriptions to take up the full width of the menu
  • remove, or left-align, "How do these work" links
Prototype CSS
/* other review tools & saved filters container */
.mw-rcfilters-ui-table, .mw-rcfilters-ui-row, .mw-rcfilters-ui-cell {
	display: unset;

/* other review tools button */
.mw-rcfilters-ui-rcTopSectionWidget-topLinks-table {
	display: block;

/* saved filters button */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks {
	display: block;
	padding: 0;
	margin-top: 10px;

/* active filters container */

/* save filters bookmark button */ {
    position: absolute;
    top: 0;
    right: 55px;

/* clear filters trashcan button, reset default filters button */
.mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset {
    margin-top: 5px;
    padding: 0;
    display: inline-block;

/* main filters continer */

/* main filters input element */
.oo-ui-tagMultiselectWidget-input.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-iconElement.oo-ui-textInputWidget.oo-ui-textInputWidget-type-text input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

/* namespace and tags filter container */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-selectWidget-depressed.oo-ui-buttonSelectWidget {
    display: flex;
    border: 1px solid #a2a9b1;
    border-top: 0;
    border-radius: 0 0 2px 2px;

/* namespace button */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget .oo-ui-buttonOptionWidget:first-child {
    border-right: 1px solid #a2a9b1;

/* namespace and tags filter buttons */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-selectWidget-depressed.oo-ui-buttonSelectWidget div {
    width: 50%;
    text-align: left;

/* live update, view new changes, time filters container */
.mw-rcfilters-ui-filterWrapperWidget-bottom {
	width: 100%;
    flex-wrap: wrap;

/* children of above container */
.mw-rcfilters-ui-filterWrapperWidget-bottom span {
    margin-bottom: 8px;

/* time filters button */ {
    order: -2;

/* view new changes button */ {
    font-size: 14px;
    margin-top: 2px;

/* list of abbreviations legend */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    display: none;

/* time filters popup menu */

/* group results by page select box */
.mw-rcfilters-ui-changesLimitPopupWidget .oo-ui-layout.oo-ui-labelElement.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
    display: none;

Prototype patch:

Event Timeline

removing backlog for now until we set up the appropriate spikes

JTannerWMF subscribed.

It appears Web-Team-Backlog is working on this

Jdrewniak renamed this task from Cleanup Recent changes presentation on Minerva (mobile) to Cleanup Special:RecentChanges appearance on Minerva (mobile).Jun 11 2019, 12:26 PM
Jdrewniak renamed this task from Cleanup Special:RecentChanges appearance on Minerva (mobile) to Cleanup Special:RecentChanges filters appearance on Minerva (mobile).
Jdrewniak updated the task description. (Show Details)
ovasileva added a project: Web-Team-Backlog.
ovasileva moved this task from Needs Prioritization to Upcoming on the Web-Team-Backlog board.

Moving back to needs analysis for more discussion on whether any of these changes would need to be made within core

Is the level of specificity of some of the example CSS rules required, e.g. .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-selectWidget-depressed.oo-ui-buttonSelectWidget ?

Is the level of specificity of some of the example CSS rules required, e.g. .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget.oo-ui-selectWidget-unpressed.oo-ui-selectWidget-depressed.oo-ui-buttonSelectWidget ?

Likely not. I just did this as cheaply as possible for the sake of demonstration. I didn't spend the time figuring out what the right level of specificity of the selectors would be.

@Jdrewniak, @alexhollender - discussed this in grooming, but given the progress of T225499, wanted to revisit and see what portions of this task are still relevant

ovasileva set the point value for this task to 8.Jul 9 2019, 4:30 PM

From Moriel in code review:
"I don't know if it's a big deal to get rid of this, but I remember there was a reason it was here, so I'd just check to make sure that the non-mobile view still looks right. I tested it locally but my local installation doesn't have that many RecentChanges to display, so I'm flagging this to just do a bit of QA, maybe?"

Removing it messes up the alignment of the conflict message at this url:

Screenshot 2019-07-29 at 4.22.00 PM.png (539×1 px, 85 KB)

Screenshot 2019-07-29 at 4.21.50 PM.png (530×1 px, 89 KB)

I suggest scoping this rule to a media query so it only applies to 720px upwards (@width-breakpoint-tablet)
I've submitted a patch that does this. Will merge tomorrow if this change is okay.

Am a little confused now. What's the difference between this task and T225499 ? Is this an Epic ?

@Jdlrobson good point. I like breaking tasks down into smaller pieces of work, but that was confusing in this case.
There was a lot of uncertainty around how the dropdown menu in the rcfilters was going to be implemented for mobile, which is why T225499 was created.
This task is meant to account for the remaining rcfilters work, i.e: the layout & the remaining buttons.

However, in terms of our code-review & QA process, it doesn't make much sense to submit a patch that only half-fixes the rcfilters module, so this work has actually been done as part of T225499 in the patch

So I suggest moving this to sign off and using the checklist for working out what's left and cut new cards / tick the boxes if resolved.

Change 527080 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Enabling loading spinner for Recent Changes page

^ I've attached a followup patch to this ticket. That one enables the loading spinner for the filters like on desktop.

Change 527080 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Enabling loading spinner for Recent Changes page

alexhollender_WMF lowered the priority of this task from High to Medium.
alexhollender_WMF removed alexhollender_WMF as the assignee of this task.

I've resolved this. Please see T229360 for the remaining issues with Recent changes.