Add 'about' dialog, opened from legend button

[dhowe]

Idea here is to add a 5th 'about' button (nicely designed) to the legend which will pop up something like below:

[shadoof]

I think I'd somewhat prefer the now-familiar three-bar icon for this purpose rather than the work 'about' as the sole actual button in this context. Having one word/bit-of-text active suggests the others might be (and they are not) so an icon would more rational design.

[dhowe]

Well, it is a bit more complex than that, when considering the mobile case (where we can't even get to the legend now). So my suggestion was to use the three bars to get to the legend. The legend could then have some kind of subtle about button (maybe just a question mark), which would then pop up some info.

The problem from my perspective is that if you come to the rednoise page you don't get any context whatsoever, not even a title or author...

[shadoof]

Gotcha. I would be OK with an 'always-there' three-bar icon, top-left at rednoise and, given what you say, an "about" button would be totally cool.

[dhowe]

agreed

[Real-John-Cheung]

preview: (nothing will happen when clicking on the question mark button yet)

[dhowe]

This looks good -- we need to provide you with the text for the about overlay. For now you can use placeholder text of about the same length (and size) as the RotVH overlay above.

Am I correct that we need to consider 4 cases, @shadoof?

1. Desktop, minimal (as on New River)
2. Mobile, minimal (same)
3. Desktop, with-legend (ELO, legend to lower right)
4. Mobile, with-legend (same)

In the latter 2 cases I guess we don't need the 3-bars, just the legend and about '?'

[dhowe]

@Real-John-Cheung I've commited an initial about-dialog on the 'about-dialog' branch and hooked it up to the question-mark button. Can you work some css magic to make it look/work like this one.

• [x] Should be modal/centered, but only visible after the '?' button in the legend is clicked
• [x] Should close when X is clicked (links in text should open in new tabs)
• [x] The 3-bars (and legend) should be hidden when about-dialog is open
• [x] Should be responsive (also the legend itself and '?' button)
• [x] Question-mark button should be center-aligned vertically

[dhowe]

@shadoof please give the dialog (below) a check (the long-words and dashes make it difficult to lay out) Feel free to change the text as you like (this is just the first sentence from NR)

@Real-John-Cheung pls check the vertical alignment of elements in the legend (looks like 'found' is 1 px higher somehow)

[shadoof]

Seems good to me. Closing.

[dhowe]

@Real-John-Cheung pls check the vertical alignment of elements in the legend (looks like 'found' is 1 px higher somehow)

[Real-John-Cheung]

should be aligned now