Last modified: 2012-08-04 21:10:56 UTC
Created attachment 10563 [details] Drop down example - open The 'More filters' drop-down menu on the Article Feedback Page need to be restyled. We would like to remove the borders around 'More feedback' until the user clicks on that link, to match our latest mockup, at this URL: http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/article-feedback-page.png The design idea for the filters drop down is to modify the style but keep the functionality (following the premise of minimally impacting implementation). To that end, Pau made a quick modification of CSS for the current prototype: border:none; background: none; width: 130px; color: #0645AD; cursor: pointer; The result is shown in the attached graphics (before and after). Can you please implement this design as requested above, either using the exact code proposed above or a variant that accomplishes the same goal?
Created attachment 10564 [details] Drop down example - closed
Created attachment 10565 [details] Feedback-Page-Dropdown-Menu-Article-Links-Bugs-Chrome-Safari.png Note that the drop-down menu's background gradient appears on Chrome and Safari, but does not appear on Firefox, as shown by this new screenshot of both Chrome and Firefox side by side (Feedback-Page-Dropdown-Menu-Article-Links-Bugs-Chrome-Safari.png). There is also a slight alignment issue on Firefox, with the drop down appearing a couple pixels above the baseline of other links on that line. Ideally, we would like it to match the mockup exactly, so it looks like another text link with a small down arrow next to it, with none of the chrome from the drop-down menu.
Browser support for form field styling is sketchy at best. Pau's CSS is already included, so I'll have to investigate some other options. There needs to be time for Roan to review and merge all of the changes for this week, so I don't have much time to fix this before the launch. If I'm unable to find a solution before COB today, would you like me to leave the select as is for launch, make it entirely unstyled, or hold off on launching the redesign until it can be fixed?
Hi Reha, I am sorry to hear that form field styling is not well supported on different browsers. However, I think it is OK to include this version of the drop-down menu for deployment tomorrow, while we investigate other options. Tanks for changing what you could this morning!
It seems that there is no cross-browser support for styling the select element, and custom components using js requires effort to make them accessible. I made a test with the default style for Firefox and Chrome and they integrate well with the design: http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/default-selectors.png
OK, based on Pau's tests and our Skype conversation, I recommend that we go with the default drop-down menu style for 'More feedback'. We would also like to change the 'Comments' link to say 'All Comments', for clarity. Reha, do you think we can still squeeze in these final two changes for tomorrow's deployment?
Submitted to gerrit: https://gerrit.wikimedia.org/r/7151 (this includes the All Comments change, but not removing the drop-down styles)
Removed the custom select styles and fixed the all comments link. Same gerrit link.
Thanks, Reha. Looks good to me on prototype on Safari, but on Firefox the 'More Feedback' drop down is truncated: http://prototype.wikimedia.org/release-en/Special:ArticleFeedbackv5/Golden-crowned_Sparrow See attached screenshot (Feedback-Form-Display-Issues-Dropdown-Featured-Label.png). There is also an inconsistency with how 'Featured' and 'Resolved' labels wrap around, which is illustrated in the screenshot, but which I will address in another bug.
Created attachment 10578 [details] Feedback-Form-Display-Issues-Dropdown-Featured-Label.png
Another issue with the drop-down menu is that it doesn't refresh if you select one of the menu items (e.g.: helpful), then click on one of the filter links (e.g. 'Most Relevant'), it still says 'Helpful' even if 'Most Relevant' is now selected/ What I would expect here is that the drop-down menu should update back to 'More filters' when you click on either 'Most Relevant' or 'All comments'.
Fixed and submitted to gerrit (same link), and prototype has been updated.
