ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #313 from rkflx/pr/polish-and-fix-route-quality-visuals

Browse source 
Polish color coding + analysis tab visuals and fix a couple of related bugs
This commit is contained in:
Norbert Renner 2020-06-17 10:30:51 +02:00 • committed by GitHub
commit 4ef43652df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/style.css
View file

@ -249,22 +249,21 @@ input#trackname:focus:invalid {
margin: 0;
}
.track-analysis-header-distance {
table.dataTable.mini .track-analysis-header-distance {
text-align: right;
padding-right: 4px;
}
.track-analysis-table td {
.track-analysis-table {
font-size: small;
padding-bottom: 0.5em;
}
table.dataTable.track-analysis-table tfoot td {
font-weight: bold;
text-align: right;
padding-right: 0;
}
table.track-analysis-table tr:hover {
background-color: rgba(255, 255, 0, 0.3);
padding-right: 4px;
padding-top: 4px;
}
.track-analysis-title {
@ -276,8 +275,8 @@ table.track-analysis-table tr:hover {
}
.track-analysis-heading {
margin-top: 15px;
font-weight: bold;
margin-top: 0.7em;
margin-bottom: 0.1em;
font-size: 1.2em;
}
@ -447,13 +446,10 @@ table.dataTable thead .sorting {
background-position: center right -3px;
}
table.track-analysis-table tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: rgba(255, 255, 0, 0.2);
table.dataTable.display tbody tr:hover {
background-color: rgba(255, 255, 0, 0.3);
}
table.dataTable.hover tbody tr:hover.selected,
table.dataTable.display tbody tr:hover.selected {

16
js/control/TrackAnalysis.js
View file

@ -18,7 +18,9 @@ BR.TrackAnalysis = L.Class.extend({
overlayStyle: {
color: 'yellow',
opacity: 0.8,
weight: 8
weight: 8,
// show above quality coding (pane defined in RoutingPathQuality.js)
pane: 'routingQualityPane'
}
},
@ -226,11 +228,17 @@ BR.TrackAnalysis = L.Class.extend({
var $content = $('#track_statistics');
$content.html('');
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>')
);
$content.append(this.renderTable('highway', analysis.highway));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>')
);
$content.append(this.renderTable('surface', analysis.surface));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>'));
$content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>')
);
$content.append(this.renderTable('smoothness', analysis.smoothness));
},

15
js/plugin/RoutingPathQuality.js
View file

@ -18,13 +18,16 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-line-chart',
provider: new HotLineQualityProvider({
hotlineOptions: {
min: -15,
max: 15,
min: -8.5,
max: 8.5, // angle in degree, == 15% incline
palette: {
0.0: '#ff0000',
0.5: '#00ff00',
1.0: '#ff0000'
0.0: '#0000ff', // blue
0.25: '#00ffff', // cyan
0.5: '#00ff00', // green
0.75: '#ffff00', // yellow
1.0: '#ff0000' // red
},
outlineColor: 'dimgray',
renderer: renderer
},
valueFunction: function(latLng, prevLatLng) {
@ -42,6 +45,7 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-area-chart',
provider: new HotLineQualityProvider({
hotlineOptions: {
outlineColor: 'dimgray',
renderer: renderer
},
valueFunction: function(latLng) {
@ -54,6 +58,7 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-usd',
provider: new HotLineQualityProvider({
hotlineOptions: {
outlineColor: 'dimgray',
renderer: renderer
},
valueFunction: function(latLng) {