From a7480a0e561b4bf870ddc275556746286bcd099f Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 15 Aug 2019 15:50:40 +0100
Subject: [PATCH] clean SCSS and add browser notify

---
 src/index.jsx           | 21 +++++++++++++++++++++
 src/scss/infopopup.scss |  1 -
 src/scss/main.scss      |  2 --
 src/scss/map.scss       |  6 ------
 src/scss/overlay.scss   |  2 +-
 src/scss/timeline.scss  | 10 ++++++----
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/index.jsx b/src/index.jsx
index 7d5f83b..35ed318 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -10,3 +10,24 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('explore-app')
 )
+
+// Expressions from https://exceptionshub.com/how-to-detect-safari-chrome-ie-firefox-and-opera-browser.html
+
+// Opera 8.0+
+var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+// Firefox 1.0+
+var isFirefox = typeof InstallTrigger !== 'undefined';
+// Safari 3.0+ "[object HTMLElementConstructor]"
+var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
+// Internet Explorer 6-11
+var isIE = /*@cc_on!@*/false || !!document.documentMode;
+// Edge 20+
+var isEdge = !isIE && !!window.StyleMedia;
+// Chrome 1+
+var isChrome = !!window.chrome && !!window.chrome.webstore;
+// Blink engine detection
+var isBlink = (isChrome || isOpera) && !!window.CSS;
+
+if (isSafari || isEdge || isIE || isOpera) {
+  alert('Please view this website in Firefox or Chrome for best viewing. It is untested in your browser.')
+}
diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss
index a55d537..4d86ae7 100644
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -2,7 +2,6 @@
 
 .infopopup {
   width: 400px;
-  // height: 400px;
   box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
   color: $darkgrey;
   position: absolute;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 84af6c6..1c10ad5 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -17,5 +17,3 @@
 @import 'scene';
 @import 'mediaplayer';
 @import 'cover';
-
-
diff --git a/src/scss/map.scss b/src/scss/map.scss
index b9c82c1..d3e595c 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -15,12 +15,6 @@
 
   .leaflet-container {
     height: 100%;
-
-    // img.leaflet-tile {
-    //   -webkit-filter: contrast(120%) brightness(115%) grayscale(95%); /* Webkit */
-    //  filter: gray; /* IE6-9 */
-    //  filter: contrast(120%) brightness(115%) grayscale(95%); /* W3C */
-    // }
   }
 
   &.hidden {
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index d214019..332e086 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -311,7 +311,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   justify-content: center;
   padding: 20px;
   min-width: calc(100% - 40px);
-  z-index: 99999;
+  z-index: $final-level;
 }
 
 .media-player {
diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss
index ab13f0c..7789b7e 100644
--- a/src/scss/timeline.scss
+++ b/src/scss/timeline.scss
@@ -1,9 +1,11 @@
+$timeline-height: 170px;
+
 .timeline-wrapper {
   position: fixed;
   box-sizing: border-box;
   left: 110px;
   right: 0px;
-  height: 170px;
+  height: $timeline-height;
   background: rgba($black, 0.8);
   box-shadow: 0 -10px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   color: white;
@@ -13,7 +15,7 @@
 
   &.folded {
     transition: bottom 0.2s ease;
-    bottom: -170px;
+    bottom: -$timeline-height;
 
     .timeline-header .timeline-toggle p .arrow-down {
       transform: translate(0, 5px)rotate(-135deg);
@@ -187,9 +189,9 @@
 
       .drag-grabber {
         cursor: -webkit-grab;
-        cursor: -moz-grab;     
+        cursor: -moz-grab;
         fill: $offwhite;
-        opacity: 0.05;   
+        opacity: 0.05;
       }
 
       .axisBoundaries {