This commit is contained in:
xmcp
2019-05-19 23:26:42 +08:00
parent 5f61e189e6
commit 0bde2b459c
5 changed files with 46 additions and 13 deletions

View File

@@ -2,7 +2,7 @@
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <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"> <link rel="icon" href="%PUBLIC_URL%/static/favicon/256.png">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">

View File

@@ -146,27 +146,43 @@ export class ClickHandler extends PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state={
moved: false, moved: true,
init_y: 0,
init_x: 0,
}; };
this.on_begin_bound=this.on_begin.bind(this); this.on_begin_bound=this.on_begin.bind(this);
this.on_move_bound=this.on_move.bind(this); this.on_move_bound=this.on_move.bind(this);
this.on_end_bound=this.on_end.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({ this.setState({
moved: false, 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({ this.setState({
moved: true, moved: true,
}); });
} }
on_end(event) {
if(!this.state.moved)
this.props.callback(event);
}
render() { render() {
return ( return (

View File

@@ -344,7 +344,6 @@ class FlowSidebar extends PureComponent {
area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> : area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
<div className="box box-tip flow-item">登录后可以回复树洞</div> <div className="box box-tip flow-item">登录后可以回复树洞</div>
} }
<br />
</div> </div>
) )
} }

View File

@@ -20,8 +20,6 @@
position: fixed; position: fixed;
top: 0; top: 0;
height: 100%; height: 100%;
width: calc(100% - 700px);
padding: 1em;
background-color: rgba(255,255,255,.7); background-color: rgba(255,255,255,.7);
overflow-y: auto; overflow-y: auto;
padding-top: 2em; padding-top: 2em;
@@ -41,12 +39,32 @@
.sidebar-title { .sidebar-title {
text-shadow: 0 0 3px white; text-shadow: 0 0 3px white;
font-weight: bold; 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) { @media screen and (max-width: 1300px) {
.sidebar, .sidebar-title { .sidebar, .sidebar-title {
width: 550px; width: 550px;
padding: 1em .5em; }
.sidebar, .sidebar-title {
padding-left: .5em;
padding-right: .5em;
} }
.sidebar-on .sidebar, .sidebar-on .sidebar-title { .sidebar-on .sidebar, .sidebar-on .sidebar-title {
left: calc(100% - 550px); left: calc(100% - 550px);

View File

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