update map

html/map/map.js

@@ -13,38 +13,42 @@ var de1t = [50.085448739143715, 8.461733038044116];
 // title, hostname, popup, location
 var nodes = {
     pl1: {
+        country: 'pl',
         location: [52.1904441909767, 20.922122237417636],
         city: "Warsaw, Poland",
         hostname: "pl1.420129.xyz",
         datacenter: "equinix wa3",
-        description: "",
+        description: ``,
         publicKey: "v854+5m4Diqh8oGo6/sGVS7LELsreIjMujkWqwc6bWo=",
         linkLocal: "fe80::129:3"
     },
     de1: {
+        country: 'de',
         location: [49.44951340282083, 11.014075123186862],
         city: "Nuremberg, Germany",
         hostname: "de1.420129.xyz",
         datacenter: "hetzner nbg",
-        description: "Tunneled to Frankfurt. If you have a node here at hetzner nuremberg, it will go nbg -> fra -> nbg.",
+        description: `Tunneled to Frankfurt. If you have a node here at hetzner nuremberg, it will go nbg -> fra -> nbg.`,
         publicKey: "N9rGceoiFcc/obnHrqMAmVlrb/E2Br55+doekTKwNF8=",
         linkLocal: "fe80::129:2"
     },
     nl1: {
+        country: 'nl',
         location: [52.36679746122722, 4.891598348592709],
         city: "Amsterdam, Netherlands",
         hostname: "nl1.420129.xyz",
         datacenter: "scaleway AMS-1",
-        description: "I don't know where exactly",
+        description: `I don't know where exactly`,
         publicKey: "iZfLBtF6BiQvdKXx4Yl02u+OL6ls35gSpWCRmB9q4lU=",
         linkLocal: "fe80::129:1"
     },
     it1: {
+        country: 'it',
         location: [41.66806722233489, 12.503981281868477],
         city: "Rome, Italy",
         hostname: "it1.420129.xyz",
         datacenter: "c1vhosting?",
-        description: "Location also approximate, there's no evidence of the existence of the data center",
+        description: `Location also approximate, there's no evidence of the existence of the data center`,
         publicKey: "",
         linkLocal: "fe80::129:4"
     }
@@ -68,9 +72,11 @@ sidebarContent.onclick = (ev) => {
 
     console.log('a')
     //sidebarContent.removeChild(opened);
+    popup.offsetHeight;
     popup.style.height = rect.height - 20 + 'px';
     popup.style.transform = 'none';
     nodesElement.style.opacity = 1;
+    sidebarContent.style.backgroundColor = null;
 
     opened = null;
     map.closePopup();
@@ -88,7 +94,7 @@ function onNodeClick(ev, node, elem) {
     nodesElement.style.opacity = 0;
     
     ele = elem.cloneNode(true);
-    ele.innerHTML += `<br><br>Datacenter: <span class="code">${node.datacenter}</span><br>${node.description.split('\n').slice(1).join('\n')}`;
+    ele.innerHTML += `<br><br>Datacenter: <span class="code">${node.datacenter}</span><br>${node.description.split('\n').slice(1).join('<br>')}`;
     ele.onclick = (ev) => {ev.stopPropagation()};
 
     ele.classList.add('selectedNode');
@@ -104,8 +110,9 @@ function onNodeClick(ev, node, elem) {
     const destY = 72 - rect.top; // window.innerHeight / 4 
     ele.style.transform = `translateY(${destY}px)`;
     ele.style.height = window.innerHeight / 3 + 'px';
+    sidebarContent.style.backgroundColor = "#111";
     
-    opened = [ele, elem];
+    opened = [ele, elem, node];
     ev.stopPropagation();
 }
 
@@ -118,7 +125,8 @@ for (let node of Object.values(nodes)) {
     ele.onclick = (ev) => {
         marker.openPopup();
         map.panTo(node.location, {
-            padding: [1000, 1000]
+            padding: [1000, 1000], // TODO I could use this to fix the small screen issue
+            duration: 0.3
         });
         onNodeClick(ev, node, ele);
     };

html/map/style.css

@@ -19,7 +19,7 @@ html, body {
     transition: transform .3s ease, height .3s ease;
 
     text-align: left;
-    background: #222;
+    background-color: #222;
     padding: 10px 20px;
     margin: 10px;
     width: calc(100% - 60px);
@@ -45,6 +45,7 @@ html, body {
         text-align: center;
         height: 100%;
         width: 300px;
+        transition: background-color .3s ease;
 
         overflow-x: scroll;
 
@@ -83,7 +84,7 @@ html, body {
 }
 
 .leaflet-left {
-    margin-left: 320px;
+    margin-left: 310px;
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
@@ -123,18 +124,18 @@ html, body {
 @media screen and (max-width: 600px) {
     #sidebar {
         width: 100%;
-        height: 320px;
+        height: calc(50vh + 20px);
 
-        mask-image: linear-gradient(180deg, black 300px, transparent 320px);
+        mask-image: linear-gradient(180deg, black 50vh, transparent calc(50vh + 20px));
 
         #sidebarContent {
             width: 100%;
-            height: 300px;
+            height: 50vh;
         }
     }
 
     .leaflet-left {
-        margin-left: none;
+        margin-left: 5px;
-        margin-top: 320px;
+        margin-top: calc(50vh + 10px); /* looks finer without the 10px but then can't click through, so I instead added some left margin */
     }
 }