From df15cddb270e7d54e1a078d1192653afafc0b78d Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 15 Feb 2019 11:56:27 +0700
Subject: [PATCH] fixed maps dialog mobile appearance

---
 config/frontend.example.js               |  2 ++
 src/components/StickerDesc.tsx           | 10 +++++++++-
 src/components/dialogs/MapListDialog.tsx |  3 +++
 src/modules/Sticker.js                   |  1 -
 src/styles/dialogs.less                  | 16 +++++++++-------
 src/utils/window.js                      |  3 +++
 6 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/window.js

diff --git a/config/frontend.example.js b/config/frontend.example.js
index e2cb328..4b3c3e3 100644
--- a/config/frontend.example.js
+++ b/config/frontend.example.js
@@ -14,3 +14,5 @@ export const COLORS = {
 };
 
 export const PROVIDER = PROVIDERS[DEFAULT_PROVIDER];
+
+export const MOBILE_BREAKPOINT = 768;
diff --git a/src/components/StickerDesc.tsx b/src/components/StickerDesc.tsx
index 784500e..5fcf697 100644
--- a/src/components/StickerDesc.tsx
+++ b/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>
diff --git a/src/components/dialogs/MapListDialog.tsx b/src/components/dialogs/MapListDialog.tsx
index a67a1e8..3a6665d 100644
--- a/src/components/dialogs/MapListDialog.tsx
+++ b/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' : ''}`);
   };
 
diff --git a/src/modules/Sticker.js b/src/modules/Sticker.js
index 012d3df..37d6f42 100644
--- a/src/modules/Sticker.js
+++ b/src/modules/Sticker.js
@@ -94,7 +94,6 @@ export class Sticker {
   };
 
   onDragStart = e => {
-    console.log('drag started');
     this.preventPropagations(e);
     this.marker.dragging.disable();
 
diff --git a/src/styles/dialogs.less b/src/styles/dialogs.less
index d1b0f18..d982860 100644
--- a/src/styles/dialogs.less
+++ b/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;
-    right: 10px;
-    width: 49px;
+    bottom: 0;
+    right: 0;
+    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;
diff --git a/src/utils/window.js b/src/utils/window.js
new file mode 100644
index 0000000..b65a456
--- /dev/null
+++ b/src/utils/window.js
@@ -0,0 +1,3 @@
+import { MOBILE_BREAKPOINT } from '$config/frontend';
+
+export const isMobile = () => (window.innerWidth <= MOBILE_BREAKPOINT);