diff --git a/history.html b/history.html index 48f87be..a45e85c 100644 --- a/history.html +++ b/history.html @@ -100,13 +100,16 @@ z-index: 5; width: 50em; box-sizing: border-box; - position: relative; + position: absolute; + top: 0; + left: 0; + background: white; box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23); + transition: left 0.5s; } #sidebar.hidden { - position: relative; - margin-left: -50em; + left: -50em; } #sidebardata { @@ -164,6 +167,7 @@ } #sidebar { + position: static; margin-left: 0em !important; width: auto; height: auto; diff --git a/history.js b/history.js index 33a790e..eab51cc 100644 --- a/history.js +++ b/history.js @@ -44,11 +44,8 @@ function main() { sb.classList.remove("hidden") else sb.classList.add("hidden") - - map.invalidateSize() } - var urls = [ config.dataPath + 'nodes.json', config.dataPath + 'graph.json' ] @@ -237,29 +234,34 @@ function mkmap(map, newnodes, lostnodes, onlinenodes, graph, showNodeinfo, showL var group = L.featureGroup(markers).addTo(map) var group_online = L.featureGroup(onlinemarkers).addTo(map) - map.fitBounds(group.getBounds()) + map.fitBounds(group.getBounds(), {paddingTopLeft: [getSidebarWidth(), 0]}) var funcDict = {} Object.keys(markersDict).map( function(k) { funcDict[k] = function (d) { var m = markersDict[k] + var bounds if ("getBounds" in m) { - var bounds = m.getBounds() - map.fitBounds(bounds) - m.openPopup(bounds.getCenter()) + bounds = m.getBounds() } else { - map.setView(m.getLatLng(), map.getMaxZoom()) - m.openPopup() + bounds = L.latLngBounds([m.getLatLng()]) } - return false + map.fitBounds(bounds, {paddingTopLeft: [getSidebarWidth(), 0]}) + m.openPopup(bounds.getCenter()) } }); return funcDict } +function getSidebarWidth() { + var small = window.matchMedia("(max-width: 60em)"); + var sb = document.getElementById("sidebar") + return small.matches ? 0 : sb.offsetWidth +} + function addLinksToMap(map, graph, showLinkinfo) { var markersDict = {}