mobile: first mobile ui attempts

src/components/dialogs/RouterDialog.jsx

@@ -56,7 +56,7 @@ const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
 );
 
 export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit, width }: Props) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog control-dialog-big" style={{ width }}>
     {!routerPoints && noPoints({ routerCancel })}
     {routerPoints === 1 && firstPoint({ routerCancel })}
     {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}

src/components/dialogs/TrashDialog.jsx

@@ -13,11 +13,11 @@ type Props = {
 export const TrashDialog = ({
   clearPoly, clearStickers, clearAll, clearCancel, width,
 }: Props) => (
-  <div className="control-dialog" style={{ width }}>
+  <div className="control-dialog control-dialog-big" style={{ width }}>
     <div className="helper trash-helper">
       <div className="helper__text danger">
         <Icon icon="icon-trash-4" />
-        <div className="big upper">Удалить:</div>
+        <div className="big upper desktop-only">Удалить:</div>
       </div>
       <div className="helper__buttons">
         <div className="button-group">
@@ -28,7 +28,7 @@ export const TrashDialog = ({
             Стикеры
           </div>
           <div className="button router-helper__button" onClick={clearAll}>
-            Удалить все
+            ВСЕ
           </div>
         </div>
         <div className="button primary router-helper__button" onClick={clearCancel}>

src/components/panels/EditorPanel.jsx

@@ -63,13 +63,11 @@ class Component extends React.PureComponent<Props, void> {
             <UserLocation />
           </div>
 
-          <div className="status-bar padded">
+          <div className="status-bar padded desktop-only">
             {distance} км&nbsp;
             <Icon icon="icon-cycle" size={32} />
             {
-              <span>{
-                toHours(estimated)
-              }</span>
+              <span>{toHours(estimated)}</span>
             }
           </div>
         </div>
@@ -143,6 +141,7 @@ class Component extends React.PureComponent<Props, void> {
               className={classnames({ primary: changed, disabled: !changed })}
               onClick={this.startSaveMode}
             >
+              <span className="desktop-only">СХОРОНИТЬ</span>
               <Icon icon="icon-check-1" />
             </button>
           </div>

src/styles/colors.less

@@ -23,3 +23,5 @@
 
 @bar_shadow: rgba(0,0,0,0.3) 0 2px 0, inset rgba(255, 255, 255, 0.05) 1px 1px;
 @dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
+
+@mobile_breakpoint: 768px;

src/styles/dialogs.less

@@ -22,6 +22,10 @@
     pointer-events: all;
   }
 
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+  }
+
 }
 
 .dialog-content {

src/styles/main.less

@@ -113,3 +113,7 @@ body {
 .pointer {
   cursor: pointer;
 }
+
+@media (max-width: @mobile_breakpoint) {
+  .desktop-only { display: none; }
+}

src/styles/panel.less

@@ -153,12 +153,23 @@
   background: #222222;
 }
 
+.panel-user {
+  z-index: 1;
+
+  @media (max-width: @mobile_breakpoint) {
+    flex-direction: column-reverse;
+
+    .control-sep {
+      opacity: 0;
+      height: 10px;
+    }
+  }
+}
+
 .control-dialog {
-  background: rgba(30, 30, 30, 0.95);
   position: absolute;
   right: 10px;
   bottom: 68px;
-  border-radius: @panel_radius;
   z-index: 3;
   color: white;
   box-sizing: border-box;
@@ -172,15 +183,38 @@
 
   &.control-dialog-big {
     min-width: 555px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
 
   &.control-dialog-medium {
     min-width: 460px;
+
+    @media (max-width: @mobile_breakpoint) {
+      min-width: 100%;
+      max-width: 100%;
+      width: 100% !important;
+      left: 0;
+      padding: 0 10px;
+    }
   }
+
 }
 
 .control-dialog-provider {
   width: 500px;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 100%;
+    left: 0;
+    padding: 0 10px;
+  }
 }
 
 .helper {
@@ -189,6 +223,10 @@
   font-weight: 200;
   font-size: 1em;
   display: flex;
+
+  background: #222222;
+  border-radius: @panel_radius;
+  box-shadow: @bar_shadow;
 }
 
 
@@ -387,6 +425,10 @@
   &.top-control {
     width: 150px;
     justify-content: flex-start;
+
+    @media (max-width: @mobile_breakpoint) {
+      width: 100px;
+    }
   }
 
   svg {

src/styles/user-button.less

@@ -18,6 +18,14 @@
 
   user-select: none;
   cursor: pointer;
+
+  @media (max-width: @mobile_breakpoint) {
+    width: 0;
+
+    .user-button-fields {
+      display: none;
+    }
+  }
 }
 
 .user-button-picture {
@@ -74,7 +82,11 @@
   border-radius: @panel_radius;
   padding: 0;
   box-sizing: border-box;
-  z-index: -1
+  z-index: -1;
+
+  @media (max-width: @mobile_breakpoint) {
+    left: 58px;
+  }
 }
 .user-panel-title {
   font-size: 20px;