sidebar floating

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;

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 = {}