Page MenuHomePhabricator

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

Description

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

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

Notes from hackathon

Action items

Related Objects

StatusAssignedTask
OpenNone
Resolvedovasileva
Resolvedovasileva
DuplicateNone
ResolvedJdlrobson
Resolvedovasileva
ResolvedJdlrobson
DuplicateNone
ResolvedNone
Resolvedovasileva
ResolvedMNeisler
ResolvedJdrewniak
ResolvedJdrewniak
Resolvedovasileva
OpenNone
Resolvedovasileva
Openovasileva
OpenNone
Resolvedovasileva
OpenNone
Openalexhollender
InvalidNone
OpenNone
OpenNone

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 20 2019, 4:31 PM
ovasileva triaged this task as High priority.May 20 2019, 4:31 PM
ovasileva moved this task from Incoming to Epics/Goals on the Readers-Web-Backlog board.
alexhollender updated the task description. (Show Details)

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.

/* 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;
}
alexhollender updated the task description. (Show Details)Jun 6 2019, 4:59 PM
Quiddity moved this task from To Triage to Not ready to announce on the User-notice board.

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

Quiddity removed a subscriber: Quiddity.Aug 8 2019, 8:18 PM

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 closed this task as Resolved.Sep 9 2019, 5:02 PM
ovasileva claimed this task.