Merge branch 'master' into sophie-ai-images

1 files changed, 130 insertions, 4 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 242677231..25b4587a5 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,9 +1,17 @@
-@import '../../global/globalCssVariables.scss';
+@import '../../global/globalCssVariables.module.scss';
 .mapBox {
     width: 100%;
     height: 100%;
     overflow: hidden;
     display: flex;
+    position: absolute;
+
+    .mapboxgl-map {
+        overflow: unset !important;
+    }
+    .mapboxgl-ctrl {
+        display: none !important;
+    }
 
     .mapBox-infoWindow {
         background-color: white;
@@ -14,15 +22,133 @@
     .mapBox-searchbar {
         display: flex;
         flex-direction: row;
+        gap: 5px;
+        align-items: center;
         width: calc(100% - 40px);
-        .editableText-container {
+
+        // .editableText-container {
+        //     width: 100%;
+        //     font-size: 16px !important;
+        // }
+        // input {
+        //     width: 100%;
+        // }
+    }
+
+    .mapbox-settings-panel {
+        z-index: 900;
+        padding: 10px 20px;
+        display: flex;
+        background-color: rgb(187, 187, 187);
+        font-size: 1.3em;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 7px;
+        position: absolute;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        .mapbox-style-select {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 4px;
+        }
+
+        .mapbox-terrain-selection {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 4px;
+        }
+    }
+
+    .mapbox-geocoding-search-results {
+        z-index: 900;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        position: absolute;
+        background-color: rgb(187, 187, 187);
+        font-size: 1.4em;
+        padding: 10px;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+
+        .search-result-container {
             width: 100%;
-            font-size: 16px !important;
+            padding: 10px;
+            &:hover {
+                background-color: lighten(rgb(187, 187, 187), 10%);
+            }
         }
-        input {
+    }
+
+    .animation-panel {
+        z-index: 900;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        background-color: rgb(187, 187, 187);
+        padding: 10px;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        position: absolute;
+
+        #route-to-animate-title {
+            font-size: 1.25em;
+            font-weight: bold;
+        }
+
+        .route-animation-options {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
             width: 100%;
+
+            .animation-suboptions {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                gap: 7px;
+                width: 100%;
+
+                label {
+                    margin-bottom: 0;
+                }
+
+                .speed-label {
+                    margin-right: 5px;
+                }
+
+                #divider {
+                    margin-left: 10px;
+                    margin-right: 10px;
+                }
+            }
         }
     }
+
+    .zoom-box {
+        position: absolute;
+        z-index: 900;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: white;
+        font-size: 1.4em;
+        border-radius: 5px;
+        bottom: 5px;
+        left: 5px;
+        padding: 3px;
+    }
+
     .mapBox-topbar {
         display: flex;
         flex-direction: row;