| Nikki | |
| Oct 18 2018, 5:40 PM |
| F27791200: image.png | |
| Jan 4 2019, 5:22 PM |
| F27791204: image.png | |
| Jan 4 2019, 5:22 PM |
| F27683926: image.png | |
| Dec 20 2018, 11:04 AM |
| F27684491: image.png | |
| Dec 20 2018, 11:04 AM |
| F27557477: Screenshot_2018-12-14 sandbox.png | |
| Dec 14 2018, 5:33 PM |
| F27557315: image.png | |
| Dec 14 2018, 5:24 PM |
| F27555600: image.png | |
| Dec 14 2018, 3:27 PM |
| F27317353: image.png | |
| Nov 27 2018, 6:49 AM |
Problem:
The Glosses of different Senses are not vertically aligned. This makes the Lexeme page look messy.
Example:
https://www.wikidata.org/wiki/Lexeme:L21966
https://test.wikidata.org/wiki/Lexeme:L121
Screenshots:
BDD
GIVEN a Lexeme with several Senses
THEN the Glosses of all Senses are in the same line vertically
Acceptance criteria:
I can't reproduce this issue on Firefox or Chrome. Can you give more details on what is your browser?
-.-
Nikki tried Vivaldi 1.14, Edge and IE11 and I tried Chromium. I can reproduce it logged in and logged out.
This is a problem with table layouting in IE11, Edge and some older Chrome versions.
From some preliminary testing on IE 11, it seems like adding an explicit width attribute to the first table cell (i.e. .wikibase-lexeme-sense-gloss-language) resolves that problem. However, that might not be optimal if the language codes are ever replaced by language names. Currently there is a min-width and a max-width declaration, with the latter being regularly ignored by the browsers.
Side-note: I noticed that the language code and the gloss value are not perfectly vertically aligned. The gloss value has some vertical 1px padding that the language code is missing and that causes the slight misalignment.
@Greta_Doci_WMDE @Lydia_Pintscher
This is an example where long language names are already breaking the layout: https://www.wikidata.org/wiki/Lexeme:L3338#S1
Setting the width to 100px and removing max-width and min-width as mentioned above, fixes that problem as well.
(h/t to @Lucas_Werkmeister_WMDE for providing the query to find it and to @Jakob_WMDE for providing the list of languages)
Yep, this happens in all versions of browsers, not only at the old ones.
Setting the width to 100px and removing max-width and min-width as mentioned above, fixes that problem as well.
I'll prepare a patch with this change if no one has any better idea.
(h/t to @Lucas_Werkmeister_WMDE for providing the query to find it and to @Jakob_WMDE for providing the list of languages)
<3
That screenshot also shows that the language name and gloss text have slightly different baselines :/
More testing: Looks like fixing width will not resolve our problem completely. As seen in the screenshot below, all the other glosses are aligned depending on the longest language name.
Note: if we want to solve this by wrapping the language name (not saying we should, just an option), we could add some indent to the language name to make it clear that the wrapped lines are not new languages:
padding-left: 1em; text-indent: -1em;
If we want to go ahead with Lucas idea we should also increasing the width value up to 220px, so we would only have the longest language to be wrapped.
Otherwise if we leave it 'width: 100px' it will look like the pic below and its confusing.
Change 482307 had a related patch set uploaded (by Greta WMDE; owner: Greta Doçi):
[mediawiki/extensions/WikibaseLexeme@master] width and padding was changed so glosses of all senses to be in the same line vertically
Patch looks good, for me while testing locally this has gone from this:
To this:
+2ed :)
Change 482307 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] width and padding was changed so glosses of all senses to be in the same line vertically