I use a 13" laptop and the Tree Style Tab Firefox extension, so my browser's viewport width is only about 1100px. When I view translations on l.d.org, the filter and reset buttons are hidden by the right sidebar. If this is isn't a l.d.org-specific CSS fix, feel free to move this issue to i10n_server.

Screenshot attached

Comments

gábor hojtsy’s picture

Seen this. Would love to have suggestions on how to wrap this to keep being useable. I'd expect that if we wrap, your screen would be "polluted" vertically.

dave reid’s picture

I'd probably suggest putting the filters in a vertical style and in the right sidebar much like the solr filters on d.org. Or at least have the Filter / Reset buttons on separate line below the filter select boxes since that's how most of core does it.

avpaderno’s picture

StatusFileSize
new72.43 KB

When I look at such pages on Safari/Mac OS X, I notice that resizing the browser page the table has the same size, while the rest of the page gets resized (see the attached screenshot).

gábor hojtsy’s picture

Yeah, the reason it does not resize is that the select boxes and buttons obviously have no way to collapse in width and the text inputs we set to a certain width to be meaningful. The project input is still not wide enough to fix many of the project names, so sometimes you still need to guess in an autocomplete to whether the project you are picking is the right one. So instead of shortening it, we'd actually need to widen. That conflicts with having small screen sizes, so obviously we need to break with the all-on-one-line mantra.

gábor hojtsy’s picture

Title: l.d.org filter box does not wrap - hides submit buttons » String filter form too wide
Project: Drupal.org site moderators » Localization server
Version: » 6.x-1.x-dev
Component: Localize.drupal.org » User interface

Applied to localization server in general.

droplet’s picture

why not disalbe right sidebar or move the sidebar downward

avpaderno’s picture

The problem is more how the filter part is build.
The fact is that the form fields in that part of the page are always inline, and don't resize. Just to make an example, the form fields used by the filter in the issues queue wrap around when the page is resized (there is the problem that the table is hidden by the right sidebar, but that is more caused by the theme used).

gábor hojtsy’s picture

I'd more then welcome patches to improve the display of this form, since it came up a few times. Drupal.org's project filtering does not use a table, so it is not displaying on one line. It would be a good idea to study the markup/styling for that form and apply it here.

droplet’s picture

StatusFileSize
new3.28 KB

modify from theme_table function

gábor hojtsy’s picture

Status: Active » Needs review

Did not yet have a chance to look at the patch (note sure why does it duplicate so much code), but just marking the issue as having one needing review.

avpaderno’s picture

I had the same feeling that the patch is duplicating code when it is not necessary; then, l10n_community_theme_table_cell() is a theme function, but the function name is not correct.

droplet’s picture

StatusFileSize
new2.01 KB

Clean up

avpaderno’s picture

The patch should be formatted following the coding standards; the code that outputs HTML content should be put in a theme function.

droplet’s picture

StatusFileSize
new3.02 KB

Thanks for the reviews.
but it already a theme function ? (theme_l10n_community_filter_form)

btw, I uploaded a new patch again.

avpaderno’s picture

StatusFileSize
new2.88 KB

I changed the indentation of the code, and removed extra empty spaces at the end of the function.

gábor hojtsy’s picture

Version: 6.x-1.x-dev » 6.x-2.x-dev
StatusFileSize
new38.39 KB
new2.85 KB

I think the conceptual problem with this patch is that it tries to build an HTML structure off a data structure which was purposefully built for an HTML table. Since the original data structure is already built in a theme function, we can just modify that instead of adding another layer to try and work out something not a table from data built for a table.

Also, the CSS has code for this filter form, which then should be removed.

Here is a slightly tweaked version of the patch which produces this output:

I've added background color to this, since it looked odd without one, and melded too much into the pager and the translation form below it.

Patch is against 6.x-2.x but I think will apply unmodified to 1.x as well.

gábor hojtsy’s picture

Status: Needs review » Fixed

Committed to both branches. Thanks for your help!

gábor hojtsy’s picture

Oh, and deployed to localize.drupal.org too.

droplet’s picture

Nice !!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.