Merge pull request #165 from brown-dash/UI_Update_Eric_Ma

eric maps

1 files changed, 91 insertions, 70 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index fb15520f6..242677231 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,87 +1,108 @@
-@import "../../global/globalCssVariables.scss";
+@import '../../global/globalCssVariables.scss';
 .mapBox {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        display: flex;
-
-        .mapBox-infoWindow {
-            background-color: white;
-            opacity: 0.75;
-            padding: 12; 
-            font-size: 17;
-        }
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
 
-        .mapBox-overlayButton-sidebar {
-            background: #121721;
-            height: 25px;
-            width: 25px;
-            right: 5px;
-            display: flex;
-            position: absolute;
-            align-items: center;
-            justify-content: center;
-            border-radius: 3px;
-            pointer-events: all;
-            z-index: 1; // so it appears on top of the document's title, if shown
-    
-            box-shadow: $standard-box-shadow;
-            transition: 0.2s;
-    
-            &:hover{
-                filter: brightness(0.85);
-            }
+    .mapBox-infoWindow {
+        background-color: white;
+        opacity: 0.75;
+        padding: 12;
+        font-size: 17;
+    }
+    .mapBox-searchbar {
+        display: flex;
+        flex-direction: row;
+        width: calc(100% - 40px);
+        .editableText-container {
+            width: 100%;
+            font-size: 16px !important;
         }
-
-        .mapBox-wrapper {
+        input {
             width: 100%;
-            .mapBox-input {
-                box-sizing: border-box;
-                border: 1px solid transparent;
-                width: 240px;
-                height: 32px;
-                padding: 0 12px;
-                border-radius: 3px;
-                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-                font-size: 14px;
-                outline: none;
-                text-overflow: ellipses;
-                position: absolute;
-                left: 50%;
-                margin-left: -120px;
-            }
         }
+    }
+    .mapBox-topbar {
+        display: flex;
+        flex-direction: row;
+    }
 
-        .mapBox-sidebar-handle {
-            top: 0;
-            //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
-            width: 10px;
-            height: 100%;
-            max-height: 35px;
-            background: lightgray;
-            border-radius: 20px;
-            cursor:grabbing;
+    .mapBox-overlayButton-sidebar {
+        background: #121721;
+        height: 25px;
+        width: 25px;
+        right: 5px;
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        pointer-events: all;
+        z-index: 1; // so it appears on top of the document's title, if shown
+
+        box-shadow: $standard-box-shadow;
+        transition: 0.2s;
+
+        &:hover {
+            filter: brightness(0.85);
         }
-        .mapBox-addMarker {
+    }
+
+    .mapBox-wrapper {
+        width: 100%;
+        .mapBox-input {
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            width: 240px;
+            height: 32px;
+            padding: 0 12px;
+            border-radius: 3px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+            font-size: 14px;
+            outline: none;
+            text-overflow: ellipses;
+            position: absolute;
             left: 50%;
-            margin-left: 120px;
-            right: unset !important;
-            margin-top: -10;
-            height: max-content;
-        }
-        .searchbox {
-            display:none;
-        }
-        .mapBox-addMarker {
-            display:none;
+            margin-left: -120px;
         }
+    }
+    .mapBox-sidebar {
+        position: absolute;
+        right: 0;
+        height: 100%;
+    }
+
+    .mapBox-sidebar-handle {
+        top: 0;
+        //top: calc(50% - 17.5px);  // use this to center vertically -- make sure it looks okay for slide views
+        width: 10px;
+        height: 100%;
+        max-height: 35px;
+        background: lightgray;
+        border-radius: 20px;
+        cursor: grabbing;
+    }
+    .mapBox-addMarker {
+        left: 50%;
+        margin-left: 120px;
+        right: unset !important;
+        margin-top: -10;
+        height: max-content;
+    }
+    .searchbox {
+        display: none;
+    }
+    .mapBox-addMarker {
+        display: none;
+    }
 }
 
 .mapBox:hover {
     .mapBox-addMarker {
-        display:block;
+        display: block;
     }
     .searchbox {
-        display :block;
+        display: block;
     }
 }