diff --git a/public/index.html b/public/index.html
index 39e2da4..81f7059 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
-
+
diff --git a/src/Common.js b/src/Common.js
index d0fab4b..023c208 100644
--- 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() {
diff --git a/src/Flows.js b/src/Flows.js
index 6aa5667..4d4973e 100644
--- 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)} /> :
登录后可以回复树洞
}
-
)
}
diff --git a/src/Sidebar.css b/src/Sidebar.css
index 8470cb7..517c24d 100644
--- 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);
diff --git a/src/UserAction.css b/src/UserAction.css
index 620c41b..aca6ff6 100644
--- a/src/UserAction.css
+++ b/src/UserAction.css
@@ -10,7 +10,7 @@
}
.reply-sticky {
position: sticky;
- bottom: 0;
+ bottom: 1em;
}
.reply-form textarea {