panels: map, logo top bar

src/styles/dialogs.less

@@ -7,9 +7,9 @@
   top: 0;
   width: 360px;
   height: 100%;
-  z-index: 3;
+  z-index: 5;
 
-  padding: 10px 10px 72px 10px;
+  padding: 10px 10px 68px 10px;
   overflow: hidden;
   box-sizing: border-box;
 

src/styles/main.less

@@ -100,3 +100,7 @@ body {
     background: rgba(255, 255, 255, 0.5);
   }
 }
+
+.pointer {
+  cursor: pointer;
+}

src/styles/map.less

@@ -67,25 +67,6 @@
   }
 }
 
-.locate-geo-button {
-  background: @bar_background;
-  width: 32px;
-  height: 32px;
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  border-radius: @panel_radius 0 0 @panel_radius;
-  z-index: 3;
-  box-shadow: @bar_shadow;
-  cursor: pointer;
-  padding: 1px;
-  box-sizing: border-box;
-
-  svg {
-    fill: white;
-  }
-}
-
 .location-marker {
   width: 20px;
   height: 3px;

src/styles/panel.less

@@ -9,27 +9,6 @@
   padding: 0 5px;
 }
 
-.control-dist {
-  background: #222222;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  font-weight: 200;
-  color: #cccccc;
-  user-select: none;
-  box-shadow: @bar_shadow;
-  position: fixed;
-  top: 10px;
-  left: 42px;
-  z-index: 2;
-  height: 32px;
-  border-radius: 0 3px 3px 0;
-
-  svg {
-    fill: #cccccc;
-  }
-}
-
 .control-sep {
   height: 44px;
   background: #222222;
@@ -336,4 +315,67 @@
   }
 }
 
+.status-panel {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  height: 32px;
+  z-index: 5;
+  display: flex;
 
+  &.bottom {
+    top: auto;
+    bottom: 68px;
+  }
+
+  &.right {
+    left: auto;
+    right: 10px;
+
+    .status-bar {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+}
+
+.status-bar {
+  background: #222222;
+  display: flex;
+  font-weight: 200;
+  color: #cccccc;
+  user-select: none;
+  border-radius: @panel_radius;
+  margin-right: 10px;
+  align-items: center;
+  justify-content: center;
+  box-shadow: @bar_shadow;
+
+  &.square {
+    width: 32px;
+  }
+
+  &.padded {
+    padding: 0 10px;
+  }
+
+  &.top-control {
+    width: 120px;
+    justify-content: flex-start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  svg {
+    fill: #cccccc;
+    margin-left: -5px;
+  }
+}
+
+.status-bar-sep {
+  height: 24px;
+  width: 1px;
+  background: #444444;
+  margin: 0 8px 0 5px;
+}