Page MenuHomePhabricator

Search bar in Explore should be part of the app bar, *not* in card content
Closed, ResolvedPublic

Description

The unexpected behavior is evident when the feed is shown in multiple columns on tablets and landscape mode on larger devices.

Expected

Search bar appears in the flex space of the Explore tool bar outside of the card content shown in columns.

In the news - multi-column layout.png (600×960 px, 138 KB)

Actual

Search bar is the first item in the feed and appears within the first column of cards.

Screenshot_20170721-173752.png (1×1 px, 622 KB)

NOTE: May be fixed depending on the solution for T170831

Event Timeline

Change 368104 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Set full span layout parameter on SearchCardView

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

I found a slick little fix, if it meets the design requirements...

Change 368174 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Limit width of search box in the feed.

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

Change 368104 merged by jenkins-bot:
[apps/android/wikipedia@master] Set full span layout parameter on SearchCardView

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

Change 368174 merged by jenkins-bot:
[apps/android/wikipedia@master] Limit width of search box in the feed.

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

hi Michael – looks great! I should have fleshed out details about the width of the search bar when in multiple card mode (if cards are in single column the search bar is the same width as the cards). Will post detailed spec for that tomorrow!

Hey @Mholloway – here's the red line with the search width behavior, whereby on single columns the width is the same as the cards, but in multi-column mode it is 2/3rd of the total card content width.

Feed spacing on single and multi-column.png (1×2 px, 438 KB)

Change 368944 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Feed design tweaks, pt. 1: adjust card margins

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

Change 368944 merged by jenkins-bot:
[apps/android/wikipedia@master] Feed design tweaks, pt. 1: adjust card margins

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

Change 369433 had a related patch set uploaded (by Mholloway; owner: Mholloway):
[apps/android/wikipedia@master] Feed design tweak #2: Update search bar width limiting

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

Change 369433 merged by jenkins-bot:
[apps/android/wikipedia@master] Feed design tweak #2: Update search bar width limiting

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

This looks great!

Nexus 5
main-MainActivity-08082017202625.png (1×1 px, 194 KB)
Pixel
Screenshot_20170808-204329.png (1×1 px, 1 MB)
Pixel landscape
Screenshot_20170808-204326.png (1×1 px, 1 MB)
Nexus 7
main-MainActivity-08092017100132.png (1×800 px, 791 KB)
Nexus 7 landscape
main-MainActivity-08092017100204.png (1×800 px, 534 KB)

Test using Nexus 5 (Android 6.0.1), Pixel (7.1.2) and Nexus 7 () on Wikipedia v2.6.200-alpha-2017-08-08

ABorbaWMF subscribed.

Tested on a Nexus 4 with Android 5.1 and a Pixel with Android 7.1.1 on 2.6.201-alpha-2017-08-11

Looks good to me too.