diff --git a/frontend/app/map/infoBox/infoBox.js b/frontend/app/map/infoBox/infoBox.js index 299f58f2..789eca3a 100644 --- a/frontend/app/map/infoBox/infoBox.js +++ b/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"); + } }); }); diff --git a/frontend/app/map/infoBox/infoBox.scss b/frontend/app/map/infoBox/infoBox.scss index 79c545d2..442a6fec 100644 --- a/frontend/app/map/infoBox/infoBox.scss +++ b/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; diff --git a/frontend/app/map/lines/lines.js b/frontend/app/map/lines/lines.js index 9777aec2..c5c0e6ab 100644 --- a/frontend/app/map/lines/lines.js +++ b/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 = [ ]; diff --git a/frontend/app/map/lines/lines.scss b/frontend/app/map/lines/lines.scss index c01cf47e..bbdb75c1 100644 --- a/frontend/app/map/lines/lines.scss +++ b/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; + } } } diff --git a/frontend/app/map/lines/view-line.html b/frontend/app/map/lines/view-line.html index d5332c9a..a72c5627 100644 --- a/frontend/app/map/lines/view-line.html +++ b/frontend/app/map/lines/view-line.html @@ -1,5 +1,5 @@
- +

{{line.name}}

@@ -14,7 +14,7 @@
-

{{line.name}}

+
Distance
{{line.distance | fmRound:2}} km ({{line.time | fmFormatTime}} h {{line.mode | fmRoutingMode}})
@@ -22,7 +22,6 @@
Climb/drop
 {{line.ascent}} m /  {{line.descent}} m
-