Polish color coding + analysis tab visuals and fix a couple of related bugs #313
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Currently it is a bit difficult to guess the slope of the route for planning purposes, since even for routes in very hilly terrain the colors hardly change. Only extremely steep hills are indicated, and there is no visual difference between going uphill or downhill. By cutting off earlier, more of the route will show meaningful differences in color. Note that BRouter's gradients are already averaged compared to the maximum gradients shown on road signs, so 15% should be a good compromise (anything steeper is difficult to ride on for longer periods anyway, and rightly deserves to be colored with an alarming red). By using different colors for the min and max parameters, uphill and downhill sections should now be easy to distinguish. By introducing two more color stops, the gradient becomes much smoother, with flat sections featuring a distinctive green, where they were drawn in a muddy dark green before. Note that this approach had been implemented like this in QLandkarte GT for several years now, with great success.
Colorful routes can conflict visually with colourful maps, therefore having an outline to make the route stand out more makes sense. However, using black results in very high contrast levels, which can become distracting in itself. By using a dark gray, this should look much more balanced, while still fulfilling the original purpose.
There are some ways the look of the analysis tab can be polished: - Properly right-align the length header (it had extra margins required for the sorting arrows in the data tab) - Use the same font size for table header and body (like in the data tab) - Improve padding of the totals row (to align with the rows above) - Add missing style for headings, so they look more balanced (the CSS was already there, but the wrong class was used in the HTML) - Fine-tune vertical spacing (to help visual grouping) - Remove unused and redundant CSS - Do not show yellow hover effect over table header
When hovering over rows in the analysis tab, highlighted sections for the route could only be seen on the regular route, but not when any of the color-coded route visualisations were selected. Patch based on a similar fix for data table in d33c795.
|
Yes, of course – I’ll take a look at it in the morning :-) |
rkflx
changed the title
|
Thanks for the contribution! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(See individual commit messages for a detailed discussion of the changes.)
Before:
After:
