Navbar

[WoH]

• Search for Pokémon
• Search for a Location
• Access the menu
• Refocus the map to the current user's location

Closes #10 and #13

[johartl]

Looks good and has everything we need. I like it!

[sacdallago]

But please: THE FONT

[WoH]

Ionic will fix that and use each platform's icons/fonts. Just wanted to get something visual in there.

[johartl]

Thinking about this again I noticed one thing that doesn't seem right. The searchbar as it is shown on the picture has a menu button on the left. However, I assume that the searchbar is only visible when showing the map and it is not shown for the about and wiki pages. This means the about and wiki pages need a different way of opening the navigation menu (probably a button on a top bar). Does this mean the button to open the navigation menu can be found at different places depending on whether the user is currently looking at the map or a wiki page? This seems like a bad idea in terms of usability.

To work around this we could do one of the following

1. Remove the button from the searchbar and instead place it on a designated "top bar" on all screens (in Android this would be called an Action Bar).
2. Make clear that the map view is the root screen of the app and every site that is opened from the map view (wiki and about) is just a subpage where the user eventually has to return to the map. In this case I think it would be okay to only show the menu button on the map screen but not on the wiki and about pages.

[johartl]

I started working on this on branch searchbar but I could still need some help. Another point we need to discuss is how we are going to parse the locations entered in the search bar (The user is probably not going to enter longitude and latitude coordinates directly). The obvious solution would be to use the Google Places API:

• Place Search
• Place Autocomplete and Query Autocomplete (not quite sure what the difference is)

The downside of using the Google API is that it's restricted to 150.000 requests per 24 hours (I suppose this should be more than enough) and requires a credit card for identification before it can be used. Are there any other free options? @sacdallago @gyachdav Would the credit card identification be an issue?

[sacdallago]

@johartl I had this problem in the past, didn't want to give my credit card and didn't like the limit on number of requests, so I found another way around this using google but without paying...

https://maps.googleapis.com/maps/api/geocode/json?address={query}

[johartl]

Awesome! I will look into that :)

[WoH]

I think we could work around this issue by using popovers or modals (more likely) for the about and wiki section, but I think a global toolbar that shows the search bar and the relevant icons in the main view are a good solution. That said, I am actually not sure, what do you think?.

[AlexanderLill]

I also agree that a global bar showing the burger menue and then, if appropriate, the search bar next to it, is a good solution. Like here but with the search bar at the location of the "Manu" label. Is that what you meant @WoH ?

PS: How did you create the Mockup in the first post?

[WoH]

@AlexanderLill I used Axure and a Android Library for the UI Elements. Yes, that's what I meant. I am not sure if this is sexy though.

[sacdallago]

@WoH you sure like the word sexy :'D

[johartl]

I included the search bar into the navbar. My idea was to let the user query for both Pokemon and locations and show the results combined a list. I submitted a feature request for partial search at https://github.com/PokemonGoers/PokeData/issues/136 .

@sacdallago The location query hack seems to work fine :)

[WoH]

Maybe just show a Search Symbol on the right side by default and fade the searchbar in, spanning over the whole Navbar (except Menu button), when clicked?

Edit: I actually think the current version works aswell, but the shadows are really confusing me.

[johartl]

Maybe like this? :D I implemented the sliding behavior btw.

[WoH]

I already switched branch as soon as I saw you pushed it. @sacdallago please suggest a different word because I'd refer to this as extremely sexy.

Edit:

[johartl]

Little change of plans. When trying to figure out how I could show the search results I realized that using a popover result list might not be the best idea. First, it's not that easy to implement properly if you have to take care of mobile devices and second, it will probably not look very nice on all platforms. So I decided to go with the standard way of doing things. The search button opens a designated search screen where the results are shown.

The result lists are actually combined for locations and Pokemon (Pokemon on the top, locations below that). Clicking on a search result will take the user to the map (location) or the PokeWiki (Pokemon). I'm only waiting for #55 to be merged then I will open a PR for this.

[WoH]

Have you ruled out modals for some specific reason? Otherwise that could possible be a good approach I think.

[WoH]

@johartl I took over where you left at and tried to see what a modal could do for us, you can have a look at: Catch-em-all/tree/navbar-modal

I haven't figured out the best way to style this, but if you move the searchbar down a bit, make the background transparent and style the results I think this has potential. If you revert the last commit, it basically looks like before, but uses a Modal instead of a whole page. This is just a very rough draft though, please don't judge coding style and my css 😢

[johartl]

I like your idea. For the website I agree that a modal looks a lot better. But I'm not sure how we can handle the different styles for iOS and Android. Every time you do something customized that also means that we have to check that it looks good on all platforms and devices and put some effort into tweaking it. I only ever looked at the app in the browser so I don't know if the differences are really significant. But for the beginning I just wanted sth. that for sure works on every device.

[WoH]

On small screens they look like new pages (as in they fill the entire screen). I want to expand on the idea though I have some ideas what else we can do with the search but that'll leak into other issues aswell.

[johartl]

Should we leave the search like this for now? There are still lots of other issues we need to take care where we need your creativity @WoH ;) I would keep your branch and if we have time towards the end of the project we can give this a restyling.

[WoH]

Let's talk about this on Tuesday, for now I agree. Great job working on this so far by the way! :+1:

[WoH]

I definitely did not work on this, but it does actually look exactly like your page now on small screens.. I just don't know where to push additional commits to. I need that next meeting in my life.

[WoH]

Should we close this and reopen since the navbar itself is pretty much done and the remaining questions should be answered in a designated issue?

[johartl]

Yes I agree. I will open a PR for this in a few minutes.