Page MenuHomePhabricator

[EPIC] Display core version of recent changes page for AMC users
Closed, ResolvedPublic

Assigned To
Authored By
May 20 2019, 4:30 PM


User story

As an experienced editor, I would like to be able to access the entire functionality of the history page from my mobile device so that I can perform my work on mobile

Acceptance criteria

  • all desktop functionality (with tentative exceptions TBD) will be available on mobile

Design notes

Basic mockup - these mockups show what's possible with relatively little CSS overrides. Below there is a "refined mockup" that goes a bit further in terms of cleaning up the filter section and naturally would require more CSS.

full pagetime range and # of results filter menusaved filters menu
image.png (1×395 px, 159 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)

The two main components to consider here are:

1. Filters
  • can we display them in a modal or should we try to use the native multi-select element?
  • there are a lot of elements related to the filters, some of which we might want to consider removing:
    • Search, allows typeahead search for filter names
    • Saved filters, allows users to access saved filters
    • Saving new filters, allows users to save new filters
    • active filters pill things, allows users to see which filters are currently active and remove them
    • Restore default filters button
    • Highlighting results
    • "How do these work" links on filter headings
    • "Tell us what you think about these filtering tools" link
filters as native select elementsfilters in a modal
image.png (740×838 px, 163 KB)
image.png (735×1 px, 269 KB)
2. List of recent changes
  • how much control over formatting do we have?
  • can we re-use some of the stuff from the history page?
Other considerations
  • remove live updates?
  • can we somehow disable "Group results by page" setting?
Refined mockup

image.png (1×395 px, 154 KB)

Notes from hackathon

Action items

Related Objects

ResolvedBUG REPORTovasileva

Event Timeline

ovasileva moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.

I think the most efficient way to work on the design here is to play around with the CSS in production. Here is some CSS I wrote and the resulting look of the page (i.e. visiting recent changes on mobile using Minerva skin). I assume a lot of the selectors could be simplified. I started to work on the filters menus, however there seems to be some javascript that is defining styles directly on the elements after the CSS loads, so until we disable that there isn’t much you can do with CSS. Though I do think if we disabled that js the CSS to make this work would be relatively minimal.

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)

/* 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;

As I understand this is ready to be signed off and resolved. All desktop features should be available on mobile now.

Moving back to goals column - let's finish all the open tasks before signing this off

Moving back to goals column - let's finish all the open tasks before signing this off

The remaining tasks are for the non-AMC mode or for OOjs UI issues (which are going to be time consuming to fix). I thought we were descoping these and doing the bare minimum to get AMC up and running, but the fact we're fixing them too makes me super happy! 🙏🙏🙏

Quiddity edited subscribers, added: Quiddity; removed: jmatazzoni.

(Just moving tag to parent task.)

The only remaining subtask is T229360 which is a tracking task and reflects the state of this task much better. I think this can be signed off with that in mind.

ovasileva claimed this task.