6.36 KB, image/png
8.77 KB, image/png
7.94 KB, image/png
16.16 KB, image/png
814 bytes, patch
|Details | Diff | Splinter Review|
449 bytes, patch
|Details | Diff | Splinter Review|
In the Swedish locale, the text "Search the Knowledge Base" is translated into "Sök i kunskapsbasen," which only spans one row. This makes the search box look completely broken. As a side-note, the text should actually break, as it's wider than the search box. But the underlying issue with the ugly appearance when only using one line probably needs to be fixed anyway.
John, do you have any suggestions on how to fix this? For the one-row case, it should be a fairly simple thing to just make sure the search box still remains at the bottom. However, for the three-row case, I'm not sure how to best handle it.
Created attachment 342050 [details] Text on two rows -- the normal case Just for reference, this is how it's supposed to look like. :)
Targeting to 1.4 to keep it on the radar. This makes the search box look very ugly, and the fix should be very trivial.
Assignee: nobody → paul.craciunoiu
Target Milestone: Future → 1.4
I have some ideas on this. They're not mutually exclusive: 1) Make sure the text does not overlap where it shouldn't (including outside the search box; forces text to be on 2 lines) 2) Make the search input of fixed position(i.e. it doesn't go "up" if text is only one line, or "down") 3) Make the font smaller (to allow 3 lines) 4) Make the text "box" as large as possible, as long as it looks good 5) Cut off text that is too long The first two are pretty much required. We can also get a larger image, but that is more work. The one I'm skeptical about is 3) -- text too small is bad UX.
I think 3) is pretty much required too if we want it to work for locales like fr - see http://support.mozilla.com/tiki-approve_staging_page.php?locale=fr Feel free to experiment with those two extreme cases (1 line and 3 lines). :)
(In reply to comment #7) > Feel free to experiment with those two extreme cases (1 line and 3 lines). :) I'll do so, and post some screenshots soon.
Created attachment 387542 [details] search box 1,2,3 lines in Fx3 Here's an implementation, those are actual screenshots from the page in Firefox 3. In this implementation, if the text goes past 3 lines, it simply doesn't show up (no scrollbar, no overlapping, just hidden). My only concern is cross-browser compatibility. It should work fine, but there may be minor positioning issues (to be QA'd)
Looks good to me based on the attachment. Needs to be tested on Windows+Mac and on other browsers.
I also tested with Georgia on Ubuntu and it looks just as good. Correcting myself, though, if the text exceeds 3 lines, it will go under the search input. I would think that's not a big issue, however, since we won't have over 3 lines. But if we do, the text needs to be even smaller. I committed this in r29538 on stage. We need some QA on multiple browsers and OSs
http://screencast.com/t/l3US70Ajwm on XP IE6 http://screencast.com/t/E65KP2c6p on XP IE7 http://screencast.com/t/7ETy1PRkaG on Mac Safari 4 http://screencast.com/t/rvf9uXKa on XP Chrome. Paul,can you resolve it so i can mark it as verified. Thanks
Created attachment 387754 [details] [diff] [review] patch, v1 This is the patch that I committed to production for Raymond to test. Raymond, also, if you can test how it looks with 3 lines, that would be great! I set up a link for you here: https://support-stage.mozilla.org/ro/kb/Clearing+private+data
(In reply to comment #13) > This is the patch that I committed to production I meant staging, of couse. Raymond: ping?
broken in opera
(In reply to comment #16) > Created an attachment (id=390942) [details] > Broken in Opera Raymond can you please test on stage?
http://screencast.com/t/OkXq1aAXEjt in ie7 http://screencast.com/t/zYxM1vwMU in Chrome http://screencast.com/t/sdAhX05fs5 in safari Version 4.0.2 http://screencast.com/t/rsIxoawn in opera 10.00 Beta 2 http://screencast.com/t/6dZbB5X1lHZ in firefox 3.5.1
It looks like for the first three the text should be a bit smaller and it could use less padding at the top. Perhaps a few pixels across all browsers would be fine.
Created attachment 392975 [details] [diff] [review] patch to patch, v1 This will reduce the padding from the top by a bit, and center the text. With that, I think all cases display reasonably well. The trick here is using table-cell display to center the text vertically. That doesn't work so well on some browsers but overall it seems okay. Waiting on David's input before we resolve this. Also, Raymond: could you post the same screenshots for a search box with 2 rows? (which will be the most common) E.g. German: http://support-stage.mozilla.org/de/kb/Private%20Daten%20l%C3%B6schen Finally, I think if we start having locale-specific CSS files, we can address problems more specifically for other languages. See bug 438314 for that.
Comment on attachment 392975 [details] [diff] [review] patch to patch, v1 Eric isn't reviewing patches anymore AFAIK.
Attachment #392975 - Flags: review?(smirkingsisyphus) → review?(james)
After looking in several locales, this seems fine now. I have not applied the new patch, but it doesn't seem to make it really better on any of the locales I checked (fr, de, ro, uk, en-US) so let's just leave it off. Unfortunately, the browsers in which it doesn't look great are the ones that don't support "display: table-cell" (ie: IE). If necessary we can tweak the IE-only style sheets.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
Attachment #392975 - Flags: review?(james)
You need to log in before you can comment on or make changes to this bug.