bugfix

6 years ago · 0bde2b459c
5 changed files with 45 additions and 12 deletions
--- a/public/index.html
+++ b/public/index.html
@ -2,7 +2,7 @@
 <html lang="zh">
 <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="%PUBLIC_URL%/static/favicon/256.png">
    <meta name="format-detection" content="telephone=no">

--- a/src/Common.js
+++ b/src/Common.js
@ -146,26 +146,42 @@ export class ClickHandler extends PureComponent {
    constructor(props) {
        super(props);
        this.state={
-            moved: false,
+            moved: true,
+            init_y: 0,
+            init_x: 0,
        };
        this.on_begin_bound=this.on_begin.bind(this);
        this.on_move_bound=this.on_move.bind(this);
        this.on_end_bound=this.on_end.bind(this);
+
+        this.MOVE_THRESHOLD=3;
    }

-    on_begin() {
+    on_begin(e) {
+        //console.log('click',e.screenY,e.screenX);
        this.setState({
            moved: false,
+            init_y: e.screenY,
+            init_x: e.screenX,
        });
    }
-    on_move() {
-        this.setState({
-            moved: true,
-        });
+    on_move(e) {
+        if(!this.state.moved) {
+            let mvmt=Math.abs(e.screenY-this.state.init_y)+Math.abs(e.screenX-this.state.init_x);
+            //console.log('move',mvmt);
+            if(mvmt>this.MOVE_THRESHOLD)
+                this.setState({
+                    moved: true,
+                });
+        }
    }
    on_end(event) {
+        //console.log('end');
        if(!this.state.moved)
            this.props.callback(event);
+        this.setState({
+            moved: true,
+        });
    }

    render() {
--- a/src/Flows.js
+++ b/src/Flows.js
@ -344,7 +344,6 @@ class FlowSidebar extends PureComponent {
                               area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
                    <div className="box box-tip flow-item">登录后可以回复树洞</div>
                }
-                <br />
            </div>
        )
    }
--- a/src/Sidebar.css
+++ b/src/Sidebar.css
@ -20,8 +20,6 @@
    position: fixed;
    top: 0;
    height: 100%;
-    width: calc(100% - 700px);
-    padding: 1em;
    background-color: rgba(255,255,255,.7);
    overflow-y: auto;
    padding-top: 2em;
@ -41,12 +39,32 @@
 .sidebar-title {
    text-shadow: 0 0 3px white;
    font-weight: bold;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    line-height: 3em;
+    padding-left: .5em;
+    padding-bottom: .5em;
+    margin-bottom: -.5em;
+    background-image: linear-gradient(top,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%);
+    pointer-events: none;
+}
+.sidebar-title a {
+    pointer-events: initial;
+}
+
+.sidebar, .sidebar-title {
+    padding-left: 1em;
+    padding-right: 1em;
 }

@media screen and (max-width: 1300px) {
    .sidebar, .sidebar-title {
        width: 550px;
-        padding: 1em .5em;
+    }
+    .sidebar, .sidebar-title {
+        padding-left: .5em;
+        padding-right: .5em;
    }
    .sidebar-on .sidebar, .sidebar-on .sidebar-title {
        left: calc(100% - 550px);
--- a/src/UserAction.css
+++ b/src/UserAction.css
@ -10,7 +10,7 @@
 }
 .reply-sticky {
    position: sticky;
-    bottom: 0;
+    bottom: 1em;
 }

 .reply-form textarea {