Improve desktop hour/time clicker

[3vivekb]

Make the time changer centered on the screen, not a double drop down.

I watched a senior with bad eyesight so her resolution is really low use the app. The dropdown was basically hidden below.

[Kyle-Falconer]

I'm kinda leaning towards a simpler approach on this, having three dropdowns: one for hours (1-12), one for minutes (00, 15, 30, 45), one for AM/PM.

Doing this won't be the most amazing-looking, but it would be functional for everyone.

[3vivekb]

I agree. It's the best option for Desktop. For mobile let's try to keep the same solutions. For desktop we'll maintain the same datepicker but remove the time element. For time let's have the dropdowns.

[Kyle-Falconer]

The HTML dropdown input is not easily stylized and would not be a good user experience overall. A good example of a dropdown replacement is what's on Google Maps, and replicating this experience I think would be beneficial.

As such, I've changed this to be a "large" item to represent what this turned into.

edit:

to clarify with why this would not be a good user experience, the time dropdown contains more than 60 elements, which means the selection dropdown would go off the edge of the screen.

I tried to look for a standard HTML/CSS way to limit how many elements are shown in the dropdown, and most of the solutions relied on the size attribute for the select element, which gets messy really quick between the different browsers.

Additionally, the select element (when expanded) is not styleable. While this is not a huge deal, it's better to be able to have this match the look and feel of the rest of the site.

[Kyle-Falconer]

Now that the time picker is its own element, it's taking up additional space, so it pushes other elements out of bounds.

To fix this, I'm changing the arrive/depart picker from the current look/feel to be a dropdown. This will take up less horizontal space, but still be usable.

Here's the "before":

And "after":

To help with standardizing the look of the dropdown across browsers, I've cheated a bit to add some up (▲) and down (▼) arrows using CSS: