closed livingstoneonline/livingstoneonline#15

Browse by Catalogue: Dropdowns modifications

awisnicki

1) The search box/facet dropdowns/clear button are a bit too tall. Please reduce the height. I think the search box can be made the same height as the search box in the upper right-hand corner of all site pages. I think the dropdowns/clear button can be have an even lower height than the search box. We don't want to be crushing the text inside them, but we also don't want the dropdowns so high that they feel so heavy (as they do now) on the left-hand side of the screen. Hope that makes sense.

2) Also the dropdowns, etc are a bit too wide. Right now it looks like the width is being determined by the widest addressee item. I'd suggest you determine the width by the next widest addressee item and for this long one just wrap it, but using a hanging indent:

Ancient & Honourable Company of Turners, Ladies &       Gentlemen of the (1)

3) Also, note two things about this facet: a) when it's selected, then on the next page it shows up in a wonky way in the addressee facet and b) & is showing as & (i.e., it's not being converted).

For 3a, I find that this happens whenever the given item selected is longer than the facet dropdown. Given this issue, I suggest that the item be truncated in the facet when it shown after being selected and be followed by ... Alternately, it doesn't need to be shown in the facet dropdown after being selected at all.

4) I'd suggest the "Clear" button not need to change to white font when moused over. You could make this button a different shade of gray to differentiate it.

5) It occurs to me that Year, From, and To are all narrow enough so that they could go on one line, rather than spread over two. Year could be slightly wider to differentiate it (and also because it will include "Date unknown". What do you think? I think how it works would still be obvious to the user.

6) If you're in a dropdown with all the items list and you choose the first one (the actual title of the dropdown) it returns an error.

nigelgbanks

1) The search box/facet dropdowns/clear button are a bit too tall. Please reduce the height. I think the search box can be made the same height as the search box in the upper right-hand corner of all site pages. I think the dropdowns/clear button can be have an even lower height than the search box. We don't want to be crushing the text inside them, but we also don't want the dropdowns so high that they feel so heavy (as they do now) on the left-hand side of the screen. Hope that makes sense.

Height has been changed to match the search field used elsewhere on the site.

2) Also the dropdowns, etc are a bit too wide. Right now it looks like the width is being determined by the widest addressee item. I'd suggest you determine the width by the next widest addressee item and for this long one just wrap it, but using a hanging indent:

Ancient & Honourable Company of Turners, Ladies & Gentlemen of the (1)

I think this is only referring to the display when selecting a value:

<img width="1232" alt="screen shot 2016-05-17 at 18 52 30" src="https://cloud.githubusercontent.com/assets/487373/15333189/9c97204c-1c60-11e6-8265-ad2dd136b2f4.png">

We can't adjust the widths of this display as it's controlled by the browser. The only way to support this would be to replace the select fields with a custom widget, which would take a long time and hurt cross browser support.

3) Also, note two things about this facet: a) when it's selected, then on the next page it shows up in a wonky way in the addressee facet and b) & is showing as & (i.e., it's not being converted).

For 3a, I find that this happens whenever the given item selected is longer than the facet dropdown. Given this issue, I suggest that the item be truncated in the facet when it shown after being selected and be followed by ... Alternately, it doesn't need to be shown in the facet dropdown after being selected at all.

It's now truncated but we can't display ellipses in this case as it's not supported by all browsers (the CSS property to do so does not work with select fields but does work with div's etc).

Also HTML encoded characters such as &amp; are now represented by there respective characters like &.

4) I'd suggest the "Clear" button not need to change to white font when moused over. You could make this button a different shade of gray to differentiate it.

It's now a gray color.

5) It occurs to me that Year, From, and To are all narrow enough so that they could go on one line, rather than spread over two. Year could be slightly wider to differentiate it (and also because it will include "Date unknown". What do you think? I think how it works would still be obvious to the user.

I've put them all on a single line, but we won't be showing "Date unknown" in this field, for reasons discussed in livingstoneonline/issues/4.

6) If you're in a dropdown with all the items list and you choose the first one (the actual title of the dropdown) it returns an error.

I haven't been able to reproduce this could you provide more information?

awisnicki

#1, #2, and #6 are done. Thank you! For #3, can we do it so that we don't show the facet at all, after selection, in the dropdown. For #4, sorry I think I wasn't clear. I'd prefer that it not change color at all when moused over. Instead, make the button itself a slightly darker shade of gray and the text should be static, always black. For #5, could we put the word "or" between the year and from/to dropdowns? See attached mockup. screen shot 2016-05-17 at 13 55 05

nigelgbanks

We discussed #3, on the call and settled with changing the margin during the call, that's now deployed to stage.

#4 and #5 are also deployed to stage.

awisnicki

All looks good. Thank you!