Texts in image grid get truncated
Closed, ResolvedPublic

Description

With the new image grid implementation, texts that are too wide for the image container are truncated (with an ellipsis). Previously, they would just wrap into multiple lines. This breaks, for instance, the “cocktails” query, since you can no longer read most of the cocktail recipes.

I’m guessing that we can’t make the texts multi-line again, because the height of the image container must be constant… perhaps we can have something like a tooltip that only appears when you hover the description?

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 7 2018, 6:44 PM

Change 420236 had a related patch set uploaded (by Rammanojpotla; owner: Rammanoj):
[wikidata/query/gui@master] Fix text truncation in image grid

https://gerrit.wikimedia.org/r/420236

Change 420247 had a related patch set uploaded (by Rammanojpotla; owner: Rammanoj):
[wikidata/query/gui@master] Fix text truncation in image grid

https://gerrit.wikimedia.org/r/420247

Change 420247 abandoned by Rammanojpotla:
Fix text truncation in image grid

https://gerrit.wikimedia.org/r/420247

@Lucas_Werkmeister_WMDE made few changes locally finally used popover instead of the tooltip for better appearance of text. For single text item, it looks the following way on hover


For multi-text items, it looks the following way on hover

The two pictures are the results of the queries provided at gerrit. I guess this solves the issue. Can I patch it?

Rammanojpotla added a comment.EditedMar 27 2018, 9:15 AM

@Lucas_Werkmeister_WMDE Presently, In the above change, I am trying to display the text in form of a list in a popover. So, whenever a "View list" is hovered popover displays. Are there any more changes to be done here?

Sorry, I’m still not quite happy with this… why is the text now hidden behind this “view text” link? I don’t think that’s necessary – by default, it should still show the text (truncated if it’s too long, as before), but with the popover added when the link is hovered. Also, I don’t think the texts should be grouped in the popover, if there’s more than one text you should be able to see it without hovering.

Basically – for results where the text isn’t too long, nothing should change. Otherwise we’d be breaking a lot of existing queries. (Take, for instance, the “Italian mountains higher than 4000 m” example query – the altitude should still be visible.)

After a short discussion with Jonas – the easiest solution would probably be to integrate this into the title attribute. Currently, we set the title to just the variable name; instead, we could also append the text content of the variable after the variable name, separated by a colon. For example:

-<span title="text">lorem ipsum dolor sit amet, consectetur adipiscing elit…</span>
+<span title="text: lorem ipsum dolor sit amet, consectetur adipiscing elit…">lorem ipsum dolor sit amet, consectetur adipiscing elit…</span>
-<a href="https://commons.wikimedia.org/wiki/File:Douglas adams portrait cropped.jpg" target="_blank" class="item-link" rel="noopener" title="image">commons:Douglas adams portrait cropped.jpg</a>
+<a href="https://commons.wikimedia.org/wiki/File:Douglas adams portrait cropped.jpg" target="_blank" class="item-link" rel="noopener" title="image: commons:Douglas adams portrait cropped.jpg">commons:Douglas adams portrait cropped.jpg</a>

@Lucas_Werkmeister_WMDE But in some cases such as

<span title="birthName: Douglas Noel Adams@en-gb">Douglas Noel Adams</span>

this has to be ignored, as appending to the title gives the following result in title

birthName: Douglas Noel Adams@en-gb:Douglas Noel Adams

This lead to repetition of text two times. So this case should be ignored I guess ?

Oh, I didn’t realize we already included the text for some kinds of values (see FormatterHelper.formatValue). In that case, I guess that function should be edited to add the text in more cases (e. g. for plain text datatypes, not just if xml:lang is set but always).

Thanks @Lucas_Werkmeister_WMDE The present change works fine locally. Please specify if there is any issue with the change at https://gerrit.wikimedia.org/r/#/c/420236/ ?

Change 420236 merged by jenkins-bot:
[wikidata/query/gui@master] Fix text and image name truncation in image grid

https://gerrit.wikimedia.org/r/420236

Lucas_Werkmeister_WMDE closed this task as Resolved.Mar 29 2018, 1:47 PM
Lucas_Werkmeister_WMDE assigned this task to Rammanojpotla.

Fixed, thanks a lot @Rammanojpotla! And by the way, here’s the “cocktails” query I mentioned, slightly updated (the version in the blog post doesn’t work anymore because cocktails are now subclasses, not instances): link