Search bar is overlapping in mobile view

[MariusBluem]

App name (Files, Contacts, ...) should disappear when you click on the search bar.

I think the problem is caused because of the new transparent search bar introduced with the Nextcloud rebranding.

Client configuration

Browser:
Safari
Operating system:
iOS 9.3 on iPhone 6s

cc @jancborchardt @nextcloud/designers

[Bugsbane]

Yeah, and there are even bigger problems if there's a notification (which covers both and makes the search bar close when you start typing in it at all).

Personally, I would have the app name shrink into a right facing carat / arrow when the search bar is expanded, and if it's clicked on, the search bar closes and the app name becomes visible again.

Then I'd put notifications inbetween the blue header bar and the white section (with the hamburger menu button and the breadcrumb path at the top), so it pushed the white section down.

[jancborchardt]

Personally, I would have the app name shrink into a right facing carat / arrow when the search bar is expanded, and if it's clicked on, the search bar closes and the app name becomes visible again.

Good call, that would fix the issue at hand.

Then I'd put notifications inbetween the blue header bar and the white section (with the hamburger menu button and the breadcrumb path at the top), so it pushed the white section down.

The thing here is that the top area of an app might be very important so we can’t really put anything there. In any case, placement of the notification is a different discussion. Can you open a separate issue for that? :)

[Bugsbane]

OK, I've opened an issue for the notifications over at #301

Regarding the overlapping search bar, on second thought, rather than hiding away the app name, and the menu to change apps behind a carat that the user may not be able to figure out is even interactive, what about if we inserted the search bar (when the user taps the search icon) as below. It would be closed by tapping anywhere outside the search box, or search would be activated by tapping the triangle / phone's keyboard "search" button:

This way the app menu is available as it always is elsewhere without any changes to it's interaction, and there is more room for and emphasis on the search text.

[williambargent]

👍 I really like that idea for mobile, especially how its the same style apposed for the notifications #301

[jancborchardt]

I'd really prefer having the search bar in the header. The other elements are not needed when searching, this is also how Android solves it. Another factor is that going to a second line for just the bar takes up too much vertical space on mobile (remember the keyboard will also be open, so even less content visible).

[Bugsbane]

OK. I can see how with the keyboard, we could run short of vertical real estate. My main concern is making it clear how to access the app menu. While people really shouldn't need to access the app menu while searching, I've stopped mid-search many times to do just that when, for example, I remembered what might be another way to find what I need (say, the music app if I'm looking for an mp3), or I remembered something else I wanted to do along the way.

Maybe if we just keep the downwards carat that already opens the app menu (and would also close the search bar) and just shrink the app name away, rather than a right carat that does nothing but close the search bar, and then forces another click to open the menu? If we had space, if live to at least get a small icon of the app being used between the carat and the Nextcloud logo.

I think ideally we'd go the route of being responsive by having the app name+ carat most of the time, and then when the search bar is opened and we don't have enough space, first drop to a small app icon and downwards carat that opens the app menu, but then drop the app icon if there isn't space for it, and finally only drop the carat if there isn't even that minimal slave either.

[jancborchardt]

Instead of overthinking it, we can also just make the background color of the search bar blue as well.

We of course need to take care of that for theming, but that is also true for the background color of the log in screen and the primary action button color.

[Bugsbane]

Yes, we can certainly get by with a simpler, less multifaceted airman than ideal, posted above. Even the most minimal solution though should still avoid breaking the users ability to open the app menu imo. That's a big break in interaction consistency and functionality.

[jancborchardt]

Pull request to fix this at #450 :)

Btw @Bugsbane – that’s exactly why I always advocated that the logo should also open the menu instead of »Files«. Guess we could do that on mobile or so.

[Bugsbane]

I always advocated that the logo should also open the menu instead of »Files«.

Makes sense. I mean, the Nextcloud logo should stand for all of Nextcloud, which conceptually is much better represented by the contents of the app menu, than just the files app. If we're switching this for the mobile view though, shouldn't we keep it consistent and also have it work that way in the desktop view? I mean I know it breaks with tradition, but it would provide an interface that was more consistent across devices.

[jancborchardt]

Fixed via #450, please also review the backports:

• stable10: [stable10] fix searchbox background #622
• stable9: [stable9] fix searchbox background #623