bugfix

src/Common.js

@@ -146,27 +146,43 @@ 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() {
+    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,
         });
     }
-    on_end(event) {
-        if(!this.state.moved)
-            this.props.callback(event);
-    }
 
     render() {
         return (

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>
         )
     }

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);

src/UserAction.css

@@ -10,7 +10,7 @@
 }
 .reply-sticky {
     position: sticky;
-    bottom: 0;
+    bottom: 1em;
 }
 
 .reply-form textarea {