Page MenuHomePhabricator

[20hrs] Prototype first few feature ideas for desktop improvements
Open, HighPublic

Description

User story

As a current user, I would like to give feedback on desktop improvement ideas via a prototype

Background

We would like to set up a prototype for the first few feature ideas for desktop improvements for the following reasons:

  • Getting feedback from editors (via central notice)
  • Using it within the team to view and discuss the features we'll be building

Design

https://projects.invisionapp.com/freehand/document/kcGxw6AaG

Acceptance criteria

Create a prototype of the new skin that includes the following:

  • opt-in/opt-out toggle
  • new header
  • collapsible sidebar
  • language links moved to the header

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 17 2019, 11:10 AM
ovasileva triaged this task as High priority.Oct 17 2019, 11:10 AM
Quiddity updated the task description. (Show Details)Oct 17 2019, 10:39 PM
Quiddity added a subscriber: Quiddity.

A couple of weeks ago @santhosh reached out to me to show his side-project https://wikivue.netlify.com
(source code at https://gitlab.com/santhoshtr/wikivue/tree/master/src)

It's a client-rendered/offline-capable Wikipedia app written in Vue.js. I've played around with it and I think it provides a good model for how we can build prototypes for the desktop refresh project.

Although we could use the project directly, there were a few things that I wanted to do a little differently. So I spun up a new project with vue-cli, copied over all of Santhosh's state & API handling, and structured the project in a way that mimics the mediawiki core/skin architecture. The source is available here: https://github.com/j4n-co/wikipedia-vue-prototype

The project is structured as multiple single page apps. The "core" api responses are available here:
https://wikipedia-vue-protoype.netlify.com

The core API responses wrapped in the Vector skin
https://wikipedia-vue-protoype.netlify.com/vector

Phase 1 with a modified logo
https://wikipedia-vue-protoype.netlify.com/p1

Phase 2 with the hamburger icon
https://wikipedia-vue-protoype.netlify.com/p2

Phase 3 with the sticky header
https://wikipedia-vue-protoype.netlify.com/p3

ovasileva renamed this task from Prototype first few feature ideas for desktop improvements to [20hrs] Prototype first few feature ideas for desktop improvements.Mon, Oct 28, 5:24 PM