diff --git a/js/buttons.js b/js/buttons.js
index 2cec3125..df50eaea 100644
--- a/js/buttons.js
+++ b/js/buttons.js
@@ -231,7 +231,7 @@ export default class Buttons {
// ELEVATION PROFILE
const mapWidth = this.map._container.offsetWidth;
- var elevation_profile_width = Math.min((mapWidth - 270) * 2 / 3, 400);
+ var elevation_profile_width = Math.min((mapWidth - 290) * 2 / 3, 400);
var mobileEmbeddingStyle = this.embedding && elevation_profile_width < 200;
if (mobileEmbeddingStyle) elevation_profile_width = mapWidth * 4/5;
this.elev = L.control.elevation({
diff --git a/js/total.js b/js/total.js
index af4baca1..01bd2867 100644
--- a/js/total.js
+++ b/js/total.js
@@ -114,7 +114,8 @@ export default class Total {
showData() {
this.buttons.distance.innerHTML = (this.getDistance() / 1000).toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text);
- this.buttons.elevation.innerHTML = this.getElevation().toFixed(0).toString() + ' ' + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text);
+ this.buttons.elevation.innerHTML = '
' + this.getElevationGain().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text) +
+ '
' + this.getElevationLoss().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text);
if (this.buttons.cycling) this.buttons.speed.innerHTML = this.getMovingSpeed().toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text) + '/' + this.buttons.unit_hours_text;
else this.buttons.speed.innerHTML = this.msToTimeMin(this.getMovingPace()) + ' ' + this.buttons.unit_minutes_text + '/' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text);
this.buttons.duration.innerHTML = this.msToTime(this.getMovingTime());
@@ -172,10 +173,17 @@ export default class Total {
return tot;
}
- getElevation() {
+ getElevationGain() {
var tot = 0;
for (var i=0; i
' + this.getElevationLoss().toFixed(0).toString() + (this.buttons.km ? this.buttons.unit_meters_text : this.buttons.unit_feet_text);
if (this.buttons.cycling) this.buttons.speed.innerHTML = this.getMovingSpeed().toFixed(1).toString() + ' ' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text) + '/' + this.buttons.unit_hours_text;
else this.buttons.speed.innerHTML = this.total.msToTimeMin(this.getMovingPace()) + ' ' + this.buttons.unit_minutes_text + '/' + (this.buttons.km ? this.buttons.unit_kilometers_text : this.buttons.unit_miles_text);
this.buttons.duration.innerHTML = this.total.msToTime(this.getMovingTime());
@@ -767,11 +768,16 @@ export default class Trace {
else return this.gpx._info.moving_length / 1.60934;
}
- getElevation() {
+ getElevationGain() {
if (this.buttons.km) return this.gpx._info.elevation.gain;
else return this.gpx._info.elevation.gain * 3.28084;
}
+ getElevationLoss() {
+ if (this.buttons.km) return this.gpx._info.elevation.loss;
+ else return this.gpx._info.elevation.loss * 3.28084;
+ }
+
getMovingTime() {
return this.gpx._info.duration.moving;
}
diff --git a/res/index.css b/res/index.css
index b1dc376f..2eb0aca1 100644
--- a/res/index.css
+++ b/res/index.css
@@ -129,7 +129,6 @@ html, body {
grid-gap: 0px 0px;
justify-items: right;
align-items: center;
- grid-auto-columns: min-content;
grid-auto-rows: min-content;
}
@@ -156,18 +155,21 @@ html, body {
.panels-info {
padding-top: 0px;
+ padding-right: 0px;
font-size: 10px;
color: #777777;
}
.panels-val {
padding-bottom: 0px;
+ padding-right: 0px;
min-width: 70px;
text-align: right;
}
.panels-live {
- text-align: center;
+ padding-bottom: 0px;
+ min-width: 60px;
background-color: #f5f5f5;
font-size: 11px;
margin-right: 4px;
@@ -189,6 +191,7 @@ html, body {
}
#elevation-val {
+ min-width: 120px;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}