fixed maps dialog mobile appearance

config/frontend.example.js

@@ -14,3 +14,5 @@ export const COLORS = {
 };
 
 export const PROVIDER = PROVIDERS[DEFAULT_PROVIDER];
+
+export const MOBILE_BREAKPOINT = 768;

src/components/StickerDesc.tsx

@@ -20,7 +20,13 @@ export class StickerDesc extends React.PureComponent<Props, State> {
     this.props.onChange(e.target.value);
   };
 
-  blockMouse = e => e.stopPropagation(); // todo: pass here locker for moving markers from Sticker.js
+  blockMouse = e => {
+    e.stopPropagation();
+    this.input.focus();
+  };
+
+  input: HTMLTextAreaElement;
+  // todo: pass here locker for moving markers from Sticker.js
 
   render() {
     const { text } = this.state;
@@ -30,6 +36,7 @@ export class StickerDesc extends React.PureComponent<Props, State> {
         className={classnames('sticker-desc', { is_empty: !text.trim() })}
         onMouseDown={this.blockMouse}
         onMouseUp={this.blockMouse}
+        onDragStart={this.blockMouse}
       >
         <div className="sticker-desc-sizer">
           <span
@@ -42,6 +49,7 @@ export class StickerDesc extends React.PureComponent<Props, State> {
             value={text}
             onMouseDown={this.blockMouse}
             onDragStart={this.blockMouse}
+            ref={el => { this.input = el; }}
           />
         </div>
       </div>

src/components/dialogs/MapListDialog.tsx

@@ -9,6 +9,7 @@ import {
   searchSetTab,
   setDialogActive,
 } from '$redux/user/actions';
+import { isMobile } from '$utils/window';
 import classnames from 'classnames';
 
 import { Range } from 'rc-slider';
@@ -44,6 +45,8 @@ class Component extends React.Component<Props, State> {
   };
 
   openRoute = (_id: string): void => {
+    if (isMobile) this.props.setDialogActive(false);
+
     pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
   };
 

src/modules/Sticker.js

@@ -94,7 +94,6 @@ export class Sticker {
   };
 
   onDragStart = e => {
-    console.log('drag started');
     this.preventPropagations(e);
     this.marker.dragging.disable();
 

src/styles/dialogs.less

@@ -14,11 +14,12 @@
 
   transform: translate3d(-100%, 0, 0);
   pointer-events: none;
-  transition: transform 500ms;
+  transition: transform 500ms, background-color 500ms 500ms;
 
   &.active {
     transform: translate3d(0, 0, 0);
     pointer-events: all;
+    transition: transform 500ms 250ms, background-color 250ms;
 
     .dialog-close-button {
       opacity: 1;
@@ -29,9 +30,11 @@
   @media (max-width: @mobile_breakpoint) {
     width: 100%;
     z-index: 6;
+    transform: translate3d(0, 100%, 0);
+    padding: 0 0 68px 0;
 
     &.active {
-      background: rgba(19, 45, 53, 0.8);
+      background: rgba(19, 45, 53, 0.95);
     }
   }
 
@@ -64,9 +67,10 @@
 
   @media (max-width: @mobile_breakpoint) {
     border-radius: @panel_radius;
-    bottom: 10px;
+    bottom: 0;
-    right: 10px;
+    right: 0;
-    width: 49px;
+    width: 68px;
+    height: 68px;
   }
 }
 
@@ -94,8 +98,6 @@
     width: 100%;
     left: 0;
     top: 0;
-    // background: linear-gradient(0deg, rgba(2, 13, 43, 1) 50%, rgba(2,13,43,0));
-    // background: linear-gradient(0deg, rgba(34, 34, 34, 1) 50%, rgba(34, 34, 34, 0));
     background: linear-gradient(180deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
     position: absolute;
     z-index: 5;

src/utils/window.js

@@ -0,0 +1,3 @@
+import { MOBILE_BREAKPOINT } from '$config/frontend';
+
+export const isMobile = () => (window.innerWidth <= MOBILE_BREAKPOINT);