umap-project / umap

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.
https://umap-project.org
Other
1.17k stars 224 forks source link

text formatting infobubble is difficult to read #813

Open Hugo-Trentesaux opened 4 years ago

Hugo-Trentesaux commented 4 years ago

When entering a description for a marker, a help bubble displays:

Text formatting

    *simple star for italic*
    **double star for bold**
    # one hash for main heading
    ## two hashes for second heading
    ### three hashes for third heading
    Simple link: [[http://example.com]]
    Link with text: [[http://example.com|text of the link]]
    Image: {{http://image.url.com}}
    Image with custom width (in px): {{http://image.url.com|width}}
    Iframe: {{{http://iframe.url.com}}}
    Iframe with custom height (in px): {{{http://iframe.url.com|height}}}
    Iframe with custom height and width (in px): {{{http://iframe.url.com|height*width}}}
    --- for an horizontal rule

This is difficult to read for inexperienced users not familiar with this kind of markup. Maybe setting the special characters to bold could help identifying them. It has been reported to me that the vertical bar in the "Link with text" is difficult to see.

[[ http://example.com | text of the link ]] or even color would help to understand.

Spielmops commented 3 years ago

Zoom in with the browser like in any webpage: CTRL and + or CTRL and mousewheel

Hugo-Trentesaux commented 3 years ago

Zooming in will not highlight the markdown signs as I suggest. Bold font should be applied instead.

Spielmops commented 3 years ago

You are right, but if I zoom in, everything is good to read. On the other hand: a little bit of color enhances the readability - as known from editors with syntax-highlighting ... Spielmops

PeskyPotato commented 6 months ago

I've attempted to make the modal description a bit more verbose so unfamiliar users get a better understanding. I've also added more formatting to the text to improve readability. Not sure if this would help at all but a starting point.

screenshot of modal each category has a header, description and example

This would mean the translations need to be redone in each language again.

davidbgk commented 6 months ago

@PeskyPotato thank you for your suggestion! I'm a bit afraid about the size of the box with such details but I agree that it's a necessity for it to be pertinent for all users 👍

PeskyPotato commented 6 months ago

I'm a bit afraid about the size of the box with such details

This was my concern as well, on smaller screens it can be a bit much to have all that text. I'll try and condense it a little bit without trying to take out any details to see how it looks, later today. Maybe the solution might just be to have a similar output to what was there before but with a link to the documentation with a more verbose description of each.

Spielmops commented 3 months ago

Thank you all, looks much better now.

Spielmops