Filters UI like toggl.com

[rochecompaan]

Our Filters UI don't work well on smaller screens. Have a look at the filters for toggl.com detailed reports under "Reports -> Detailed". Do you have access to it? If not I'll post screenshots.

Our implementation doesn't have to be as elaborate as theirs but I like the fact that the filter has a compact label that doesn't change even after selecting a value and the dropdown is wide enough to select items when you click on it.

PS.: This issue is not high priority, work on this after most of the other issues are done.

[nvernooy]

@rochecompaan I'm working on changing the relative layouts and dropdowns. But the toggle.com filter do not get resized no matter the size of the screen or the windows. While in our layout everything gets moved around when the screen size changes. Should we maybe overflow the screen and make sizes stay constant when the screen size changes?

[rochecompaan]

Let's first get a version working before we address the issue of resizing. Once we have a UI similar to toggl.com implemented it should be very easy to improve to become more responsive.

[rochecompaan]

I like what I see! A few tweaks I would like to recommend:

1. Close the drop down when you click to select.
2. Add [x] in front of the search button to clear a selected filter - at the moment you have to erase the text using back space.
3. Automatically give focus to the text input when you click on the filter so that you can just start typing without having to click inside the input first.