From e9c404c06f47a0ad6c2a2775795a58b3f3d3a160 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 28 Feb 2019 16:03:24 +0100
Subject: css goodies

---
 site/assets/css/applets.css | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'site/assets/css/applets.css')

diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index aa9ce47f..729737fe 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -143,6 +143,9 @@
 
 /* tabulator */
 
+.tabulator {
+  font-family: 'Roboto', sans-serif;
+}
 .tabulator-row {
   transition: background-color 100ms cubic-bezier(0,0,1,1);
   background-color: rgba(255,255,255,0.0);
-- 
cgit v1.2.3-70-g09d2


From d8ea57ede73087e0590bc98c7a018f3f185d057a Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 28 Feb 2019 16:40:21 +0100
Subject: div over leaflet map

---
 client/map/index.js         | 38 ++++++++++++++++++++++++++------------
 site/assets/css/applets.css | 22 ++++++++++++++++++++++
 2 files changed, 48 insertions(+), 12 deletions(-)

(limited to 'site/assets/css/applets.css')

diff --git a/client/map/index.js b/client/map/index.js
index d38855bf..53d9439d 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -2,25 +2,25 @@ import L from 'leaflet'
 import './leaflet.bezier'
 
 const arcStyles = {
-  'edu': {
+  edu: {
     color: 'rgb(245, 246, 150)',
     fillColor: 'rgb(245, 246, 150)',
     opacity: 0.5,
     weight: '1',
   },
-  'company': {
+  company: {
     color: 'rgb(50, 100, 246)',
     fillColor: 'rgb(50, 100, 246)',
     opacity: 1.0,
     weight: '2',
   },
-  'gov': {
+  gov: {
     color: 'rgb(245, 150, 100)',
     fillColor: 'rgb(245, 150, 150)',
     opacity: 1.0,
     weight: '2',
   },
-  'mil': {
+  mil: {
     color: 'rgb(245, 0, 0)',
     fillColor: 'rgb(245, 0, 0)',
     opacity: 1.0,
@@ -79,17 +79,31 @@ export default function append(el, payload) {
   }
 
   // ....i dont think the sort order does anything??
-  citations.sort((a,b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
-  .forEach(citation => {
-    const address = citation.addresses[0]
-    const latlng = [address.lat, address.lng].map(n => parseFloat(n))
-    if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
-    addMarker(map, latlng, citation.title, address.name)
-    addArc(map, source, latlng, arcStyles[address.type])
-  })
+  citations.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b))
+    .forEach(citation => {
+      const citationAddress = citation.addresses[0]
+      const latlng = [citationAddress.lat, citationAddress.lng].map(n => parseFloat(n))
+      if (Number.isNaN(latlng[0]) || Number.isNaN(latlng[1])) return
+      addMarker(map, latlng, citation.title, citationAddress.name)
+      addArc(map, source, latlng, arcStyles[citationAddress.type])
+    })
 
   console.log(paper)
 
   const rootMarker = addMarker(map, source, paper.title, paper.address)
   rootMarker.openPopup()
+
+  // a transparent div to cover the map, so normal scroll events will not be eaten by leaflet
+  const mapCover = document.createElement("div")
+  mapCover.classList.add("map_cover")
+  mapCover.innerHTML = "<div class='cover_message'>Click here to explore the map</div>"
+  mapCover.querySelector('div').addEventListener('click', () => {
+    el.removeChild(mapCover)
+  })
+  function stopPropagation(e) {
+    e.stopPropagation()
+  }
+  mapCover.addEventListener('mousewheel', stopPropagation, true)
+  mapCover.addEventListener('DOMMouseScroll', stopPropagation, true)
+  el.appendChild(mapCover)
 }
diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index 729737fe..e84fcfc2 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -140,6 +140,28 @@
 .map {
   margin-bottom: 20px;
 }
+.map_cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  background: rgba(0,0,0,0.8);
+  z-index: 9998; /* site header is 9999 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 36px;
+  transition: opacity 0.4s cubic-bezier(0,0,1,1);
+  opacity: 1;
+}
+.desktop .map_cover {
+  opacity: 0;
+}
+.desktop .map_cover:hover {
+  opacity: 1;
+}
 
 /* tabulator */
 
-- 
cgit v1.2.3-70-g09d2