Page MenuHomePhabricator

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

Description

Description

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

"Filter changes" input too smallfix horizontal scrollingline length too shorthide List of abbreviations

Designs

Per T223922

Cleanup checklist

General

  • 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 */
.mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-cell-save {
    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 */
.oo-ui-widget.oo-ui-widget-enabled.mw-rcfilters-ui-changesLimitAndDateButtonWidget {
    order: -2;
}

/* view new changes button */
span.mw-rcfilters-ui-filterWrapperWidget-showNewChanges.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-iconElement.oo-ui-flaggedElement-progressive.oo-ui-buttonWidget.oo-ui-labelElement {
    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: https://gerrit.wikimedia.org/r/510135

Event Timeline

removing backlog for now until we set up the appropriate spikes

JTannerWMF moved this task from Inbox to External on the Growth-Team board.May 28 2019, 5:57 PM
JTannerWMF added a subscriber: JTannerWMF.

It appears Readers-Web-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)
Jdrewniak updated the task description. (Show Details)Jun 11 2019, 12:33 PM
ovasileva triaged this task as High priority.Jun 11 2019, 1:17 PM
ovasileva added a project: Readers-Web-Backlog.
ovasileva moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.
ovasileva moved this task from MobileFrontend specific to MinervaNeue on the Mobile board.

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

phuedx added a subscriber: phuedx.Jun 11 2019, 4:36 PM

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: https://en.wikipedia.org/wiki/Special:RecentChanges?goodfaith=maybebad&hidepageedits=1&hidenewpages=1&hidecategorization=1&hideWikibase=1&limit=50&days=0.0833&enhanced=1&urlversion=2
Before:


After:

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 ?

Jdrewniak added a comment.EditedJul 30 2019, 12:48 PM

@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 https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/517026/

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

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

^ 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

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

alexhollender lowered the priority of this task from High to Normal.
alexhollender closed this task as Resolved.Sun, Aug 18, 4:23 PM
alexhollender removed alexhollender as the assignee of this task.

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