umap icon indicating copy to clipboard operation
umap copied to clipboard

text formatting infobubble is difficult to read

Open Hugo-Trentesaux opened this issue 5 years ago • 7 comments

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.

Hugo-Trentesaux avatar Jun 26 '20 15:06 Hugo-Trentesaux

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

Spielmops avatar Nov 24 '20 19:11 Spielmops

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

Hugo-Trentesaux avatar Nov 26 '20 09:11 Hugo-Trentesaux

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

Spielmops avatar Nov 26 '20 17:11 Spielmops

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.

PeskyPotato avatar Apr 02 '24 18:04 PeskyPotato

@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 👍

davidbgk avatar Apr 02 '24 19:04 davidbgk

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.

PeskyPotato avatar Apr 03 '24 12:04 PeskyPotato

Thank you all, looks much better now.

Spielmops

Spielmops avatar Jun 23 '24 06:06 Spielmops