Fix elevation plot in infoBox

frontend/app/map/infoBox/infoBox.js

@@ -21,7 +21,10 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
 					nw: el.find(".ui-resizable-handle")
 				},
 				minHeight: 100,
-				minWidth: 250
+				minWidth: 250,
+				stop: () => {
+					el.find(".html").children().trigger("resizeend");
+				}
 			});
 		});
 

frontend/app/map/infoBox/infoBox.scss

@@ -17,8 +17,8 @@
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
 	margin-bottom: 0;
 
-	width: 350px;
-	height: 200px;
+	width: 415px;
+	height: 265px;
 
 	.panel-body {
 		padding: 0;

frontend/app/map/lines/lines.js

@@ -15,6 +15,11 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 		let openLineHighlight = null;
 		let openElevationPlot = null;
 
+		let linePopupBaseScope = $rootScope.$new();
+		linePopupBaseScope.persistentSettings = {};
+		linePopupBaseScope.client = map.client;
+		linePopupBaseScope.className = css.className;
+
 		setTimeout(() => {
 			// Make sure that the renderer is added to the map
 			L.polyline([], {pane: "shadowPane"}).addTo(map.map).remove();
@@ -59,8 +64,7 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 		let elevationPlot = L.control.elevation({
 			theme: "steelblue-theme",
 			position: "bottomright"
-		}).addTo(map.map);
-		$(elevationPlot._container).detach();
+		});
 
 		var linesUi = {
 			_addLine: function(line, _doNotRerenderPopup) {
@@ -134,11 +138,9 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 				delete linesById[line.id];
 			},
 			showLineInfoBox: function(line) {
-				var scope = $rootScope.$new();
+				var scope = linePopupBaseScope.$new();
 
-				scope.client = map.client;
 				scope.line = line;
-				scope.className = css.className;
 
 				scope.edit = function() {
 					linesUi.editLine(scope.line);
@@ -153,7 +155,23 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 				};
 
 				let template = $(require("./view-line.html"));
-				template.find(".fm-elevation-plot").append(elevationPlot._container);
+
+				openLine = {
+					hide: map.infoBox.show(template, scope, () => {
+						openLine = null;
+						openLineHighlight.remove();
+					}).hide,
+					id: line.id
+				};
+
+				openLineHighlight = L.polyline([ ], {
+					pane: "shadowPane",
+					interactive: false
+				}).addTo(map.map);
+				openLineHighlight._path.style.filter = 'url(#fmLinesBlur)';
+
+				linesUi._addLine(line, true); // To render the openLineHighlight
+
 
 				elevationPlot.clear();
 
@@ -171,21 +189,13 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
 					});
 				}, true);
 
-				openLine = {
-					hide: map.infoBox.show(template, scope, () => {
-						openLine = null;
-						openLineHighlight.remove();
-					}).hide,
-					id: line.id
+				let drawElevationPlot = () => {
+					elevationPlot.options.width = template.find(".tab-pane.active").width();
+					template.find(".fm-elevation-plot").empty().append($(elevationPlot.onAdd(map.map)).addClass("leaflet-control"));
 				};
 
-				openLineHighlight = L.polyline([ ], {
-					pane: "shadowPane",
-					interactive: false
-				}).addTo(map.map);
-				openLineHighlight._path.style.filter = 'url(#fmLinesBlur)';
-
-				linesUi._addLine(line, true); // To render the openLineHighlight
+				template.filter(".content").on("resizeend", drawElevationPlot);
+				setTimeout(drawElevationPlot, 0);
 			},
 			_makeLineMovable: function(line) {
 				var markers = [ ];

frontend/app/map/lines/lines.scss

@@ -1,6 +1,6 @@
 :local(.className) {
-	margin-top: 44px !important;
-	height: calc(100% - 86px) !important;
+	margin-top: 29px !important;
+	height: calc(100% - 71px) !important;
 	padding: 5px;
 
 	.nav-tabs {
@@ -9,9 +9,17 @@
 		left: 0;
 		right: 0;
 		padding: 5px 5px 0 5px;
+
+		> li > a {
+			padding: 2px 15px;
+		}
 	}
 
 	.tab-content {
-		padding: 10px;
+		padding: 0 10px;
+
+		h2 {
+			margin-top: 10px;
+		}
 	}
 }

frontend/app/map/lines/view-line.html

@@ -1,5 +1,5 @@
 <div class="content container-fluid" ng-class="className">
-	<uib-tabset active="active">
+	<uib-tabset active="persistentSettings.activeTab">
 		<uib-tab heading="Info">
 			<h2>{{line.name}}</h2>
 			<dl class="dl-horizontal">
@@ -14,7 +14,7 @@
 			</dl>
 		</uib-tab>
 		<uib-tab heading="Elevation plot">
-			<h2>{{line.name}}</h2>
+			<div class="fm-elevation-plot"></div>
 			<dl class="dl-horizontal">
 				<dt class="distance">Distance</dt>
 				<dd class="distance">{{line.distance | fmRound:2}} km <span ng-show="line.time != null">({{line.time | fmFormatTime}} h {{line.mode | fmRoutingMode}})</span></dd>
@@ -22,7 +22,6 @@
 				<dt class="elevation" ng-show="line.ascent != null">Climb/drop</dt>
 				<dd class="elevation" ng-show="line.ascent != null"><span uib-tooltip="Total ascent"><span class="glyphicon glyphicon-triangle-top"></span> {{line.ascent}} m</span> / <span uib-tooltip="Total descent"><span class="glyphicon glyphicon-triangle-bottom"></span> {{line.descent}} m</span></dd>
 			</dl>
-			<div class="fm-elevation-plot"></div>
 		</uib-tab>
 	</uib-tabset>
 </div>