Page MenuHomePhabricator

[Story] Mobile/responsive menus
Open, MediumPublic

Assigned To
None
Authored By
Jonas
Jan 9 2017, 5:09 AM
Referenced Files
F12431237: image.png
Jan 11 2018, 10:14 AM
F12295108: Screen Shot 2018-01-07 at 6.33.20 PM.png
Jan 7 2018, 10:35 AM
F12295106: Screen Shot 2018-01-07 at 6.33.32 PM.png
Jan 7 2018, 10:35 AM
F12292127: Untitled.gif
Jan 7 2018, 5:36 AM
F12261914: image.png
Jan 5 2018, 12:59 PM
F12259352: Screen Shot 2018-01-05 at 7.16.53 PM.png
Jan 5 2018, 11:17 AM
F5257317: pasted_file
Jan 9 2017, 5:09 AM
F5257274: pasted_file
Jan 9 2017, 5:09 AM

Description

As a user I would like to use query.wikidata.org on my mobile device, therefore the header and result menu and its contents should be displayed responsive and work good on mobile screens.

Header menu

pasted_file (345×408 px, 20 KB)

Result menu

pasted_file (345×529 px, 26 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jonas triaged this task as Medium priority.Jan 4 2018, 5:58 PM
Jonas added a project: Google-Code-in-2017.

So we are trying to make the drop-down menu become something like this drop-down menu right?

Screen Shot 2018-01-05 at 7.16.53 PM.png (1×676 px, 186 KB)

Untitled.gif (717×1 px, 1 MB)

(Click to view this GIF)

Change 402625 had a related patch set uploaded (by Eflyjason; owner: Eflyjason):
[wikidata/query/gui@master] Mobile/responsive menus

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

The result view's dropdown should be working too.

I changed the "Tools" from a dropdown item to a button. The design will be more consistent and also can work better on small screens.

Before:

Screen Shot 2018-01-07 at 6.33.32 PM.png (86×1 px, 43 KB)

After:

Screen Shot 2018-01-07 at 6.33.20 PM.png (88×1 px, 40 KB)

Change 402625 merged by jenkins-bot:
[wikidata/query/gui@master] Mobile/responsive menus

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

There is still a little glitch for me with the language selector:

image.png (212×900 px, 17 KB)

There is still a little glitch for me with the language selector:

@Jonas: Could that be a Google-Code-in-2018 task potentially?