Page MenuHomePhabricator
Create Task
Maniphest T223363

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

Assigned To
None
Authored By
Jdlrobson
May 15 2019, 7:45 AM
Tags
Referenced Files
F29901643: Screenshot 2019-07-29 at 4.22.00 PM.png
Jul 29 2019, 11:25 PM
F29901642: Screenshot 2019-07-29 at 4.21.50 PM.png
Jul 29 2019, 11:25 PM
F29451331: Screen Shot 2019-06-11 at 14.04.54.png
Jun 11 2019, 12:33 PM
F29272337: 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
Jun 11 2019, 12:26 PM
F29272339: 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
Jun 11 2019, 12:26 PM
F29450811: Screen Shot 2019-06-11 at 14.05.12.png
Jun 11 2019, 12:26 PM
F29272247: 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
Jun 11 2019, 12:26 PM
F29450785: Screen Shot 2019-06-11 at 14.04.29.png
Jun 11 2019, 12:26 PM
View All 10 Files
Subscribers
Aklapper
• alexhollender_WMF
Catrope
Etonkovidova
Jdlrobson
Jdrewniak
• jmatazzoni
View All 10 Subscribers

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

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

Designs

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

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

Details

SubjectRepoBranchLines +/-
Enabling loading spinner for Recent Changes pagemediawiki/skins/MinervaNeuemaster+0 -1
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.May 15 2019, 7:45 AM
• nray added a project: Web-Team-Backlog.May 21 2019, 12:00 AM
ovasileva added a parent task: T223922: [EPIC] Display core version of recent changes page for AMC users.May 21 2019, 11:45 AM
ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.May 22 2019, 3:55 PM
ovasileva removed a project: Web-Team-Backlog.May 28 2019, 3:42 PM

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 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)
Jdrewniak updated the task description. (Show Details)Jun 11 2019, 12:33 PM
Jdrewniak mentioned this in T224655: [SPIKE] Allow recent changes to display filters in AMC mode.Jun 11 2019, 12:49 PM
ovasileva triaged this task as High priority.Jun 11 2019, 1:17 PM
ovasileva added a project: Web-Team-Backlog.
ovasileva moved this task from Needs Prioritization to Upcoming on the Web-Team-Backlog board.
ovasileva moved this task from Needs triage to MobileFrontend specific on the Mobile board.Jun 11 2019, 1:49 PM
ovasileva moved this task from MobileFrontend specific to MinervaNeue on the Mobile board.
ovasileva moved this task from Upcoming to Needs Prioritization on the Web-Team-Backlog board.Jun 11 2019, 4:35 PM

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

phuedx subscribed.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 ?

• alexhollender_WMF added a comment.Jun 11 2019, 5:52 PM
In T223363#5250356, @phuedx wrote:

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.

ovasileva moved this task from Backlog to Triaged on the Advanced Mobile Contributions board.Jun 18 2019, 11:28 PM
• alexhollender_WMF updated the task description. (Show Details)Jun 25 2019, 4:34 PM
ovasileva moved this task from Needs Prioritization to Upcoming on the Web-Team-Backlog board.Jun 26 2019, 5:09 PM
ovasileva added a subscriber: Jdrewniak.Jul 2 2019, 4:36 PM

@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
ovasileva edited projects, added Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1); removed Web-Team-Backlog.Jul 24 2019, 5:21 PM
Jdrewniak moved this task from Needs Analysis to Needs More Work on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Jul 29 2019, 5:04 PM
Jdlrobson added a comment.Jul 29 2019, 11:25 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:

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

After:
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.

Jdlrobson added a comment.Jul 29 2019, 11:41 PM

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/

Jdlrobson moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Jul 30 2019, 4:51 PM

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.

gerritbot added a comment.Aug 1 2019, 11:18 AM

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

gerritbot added a project: Patch-For-Review.Aug 1 2019, 11:18 AM
Jdrewniak added a comment.Aug 1 2019, 11:21 AM

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

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

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

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

Restricted Repository Identity mentioned this in rSKINb3c08465d79f: Update git submodules.Aug 1 2019, 5:00 PM
ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.17; 2019-08-06).Aug 1 2019, 5:00 PM
Maintenance_bot removed a project: Patch-For-Review.Aug 1 2019, 5:10 PM
ovasileva moved this task from Ready for Signoff to Needs Design Review on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Aug 6 2019, 3:13 PM

Moving to design review to check after production and potentially merge with T229360: [Tracking/Epic] Problems with RecentChanges and Watchlist advanced mobile contribution experience

• alexhollender_WMF claimed this task.Aug 6 2019, 3:24 PM
• alexhollender_WMF lowered the priority of this task from High to Medium.
• alexhollender_WMF closed this task as Resolved.Aug 18 2019, 4:23 PM
• 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.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and 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