inventaire / inventaire-client

webapp coupled to the inventaire server :books:
https://inventaire.io
47 stars 16 forks source link

entities layout: give less space to secondary info #457

Open maxlath opened 7 months ago

maxlath commented 7 months ago

such as an author's awards, which sometimes can be many, resulting in hard-to-read/useless information cluttering the top of the page, ex with https://inventaire.io/entity/wd:Q181659: Capture d’écran 2023-11-29 à 18 40 03-fullpage rect

Awards received (wdt:P166), influenced by (wdt:P737), and probably other similar properties could be turned into things more similar to, or directly reusing, RelativeEntitiesList, and be placed lower in the page (somewhere below the sub-entities lists)

jum-s commented 7 months ago

These huge text blocks have already been temporarily fixed by 8fbd0d14b14aca51903b2094eb455aa8acfd9890 since it also happens to other infoboxes

Moving awards received (wdt:P166) still feel like a good idea though.

Influenced by (wdt:P737) could have its own RelativeEntitiesList.

jum-s commented 7 months ago

Another temporary solution would be to reuse the "show more button" mechanism (aka WrapToggler). It has its inconvenients, but since its already in place on infoboxes for editions lists, it would be easy to implement: to test it, one may remove listDisplay && from the following line in infobox.svelte:

$: wrappedSize = listDisplay && infoboxHeight && infoboxHeight > wrappedInfoboxHeight
maxlath commented 7 months ago

I feel like the website, and other external lists are usually more of interest than the occupation/educated at/awards, so maybe those could be moved up (and made more readable with external sites favicons :D), letting occupation/educated at/awards at the end of that block. Then to wrap that block, maybe a max-height + overflow-y: auto, like for the summary on the right, rather than a "see more" button?

jum-s commented 7 months ago

rather than a "see more" button?

yes, i am now convinced that "see more" is not a good UX option, i was suggesting it as a temporary quick fix since its already implemented. But a more long term solution would rely on overflow-y:auto since its a common pattern.