Show aliases as a list

[waldyrious]

This makes it easier to parse items that have many aliases .

Before:

After:

Note: The way I implemented the change in this PR is probably a terribly hacky way to go about it, but I think it gets the idea across :) feel free to adjust the code to something more elegant!

[addshore]

Code wise this looks fine.
However, from a UX perspective, it would be great to keep the Yes, No, Skip buttons in the same place through questions.
With a list, this is less likely to happen as the list length can change.

Perhaps we could just pop the list of current aliases below the buttons?

[waldyrious]

Good point about keeping the placement of the buttons. This is already not the case due to layout issues like #44, but I agree it is a good goal to have. With that in mind, yeah, the only solution is to place the aliases below the buttons, since the length is variable.

That said, it's still not guaranteed that this will keep the buttons in place, because the question itself can wrap depending on its length, so if we decide to move the aliases, we need to also make changes to the question, e.g. make its container have a height sufficient to hold two lines (which should cover the vast majority of the cases except for pathological ones, I'm guessing).

[waldyrious]

A compromise would be to still show the aliases as list items, but change the CSS to show them inline, styled as "pills", i.e. with a border or background to help them be distinguished from each other. For example, in this case it would look something like this:

Is "sixth-generation era" an English alias for Q129784, "sixth generation of video game consoles"?

Current Aliases: 128-bit era history of video game consoles (sixth generation) sixth generation 128-bit age sixth video game console generation sixth generation (video game consoles) sixth generation in terms of video game consoles

This wouldn't fix the issue of buttons moving if there are many aliases, but at least it would make it occur less frequently than having a regular list styling where each item always takes up a full line.

[addshore]

I like lots of the ideas in here! especially pills!
Generally I think the whole UI could do with a bit of TLC :D

[waldyrious]

I like lots of the ideas in here! especially pills!

Sure, let me know how you'd like me to proceed. Btw, what's TLC?

[addshore]

TLC -> Tender love and care :)

[addshore]

A compromise would be to still show the aliases as list items, but change the CSS to show them inline, styled as "pills", i.e. with a border or background to help them be distinguished from each other. For example, in this case it would look something like this:

I think lets try and do this!

[waldyrious]

Ok! Not sure when I'll have the time to work on this, but hopefully I will be able to cook something up in the coming weeks :)