Remove extra steps to Datasource

[jvwong]

Description of new feature

Related to #687

We have a 'Datasource' toggle that shows a dropdown labelled with the current datasource. The user needs to look across the the screen to the datasource label, then select from the dropdown.

Question: Is there a simpler way to offer this?

Motivation for new feature

Reduce the amount of work needed by a user to filter.

[CaitlinOCallaghan]

Would it be preferable to move the drop down to the right of the screen or to move the 'Datasource' to the left?

Or

One thing to note is that the results count and the data sources are on the same canvas and replace each other, rather than cover. Therefore, if datasources is open then the results count disappears even if they are no longer 'on top' of each other (as seen in the second option). However, if this option is preferred, I can work to fix the replacement.

[jvwong]

Maybe ditch the 'Datasource' toggle in your second image?

[CaitlinOCallaghan]

So remove the 'Datasource' header and have the filter drop down appear upon loading?

[jvwong]

Yes. Simple dropdown to select datasource.

[CaitlinOCallaghan]

Okay! :)

[CaitlinOCallaghan]

Here is what it looks like on full screen:

If you decrease screen width, the filter menu slides with the rest of the search page so that it is always at the edge of the description box. It also fits on phone views. My only concern is that when you open the menu on the phone, the display is:

Does this mean the filter menu will be slightly cut off when opened on phone?

[jvwong]

I think these things always depends on the phone/browser. I could live without filtering on small devices. What do you think?

[CaitlinOCallaghan]

I agree, because the filter bar does show up on the screen; however, it's when you open it that a portion may be cut off on smaller phones.

[CaitlinOCallaghan]

Are there any more changes that I should make, or can I submit a pull request?

[jvwong]

Let's go with this.

[maxkfranz]

The dropdown only looks like that in the Chrome debug mode in the browser. It doesn't get all of the details right when it's in the "mobile phone simulator" mode. If you use a real iPhone, you'll get the proper rolodex UI for the select box.