xmcp
7 years ago
9 changed files with 165 additions and 121 deletions
@ -1,17 +0,0 @@
|
||||
.control-bar { |
||||
display: flex; |
||||
line-height: 2em; |
||||
} |
||||
|
||||
.control-bar .refresh-btn { |
||||
flex: 0 0 100px; |
||||
color: black; |
||||
background-color: rgba(255,255,255,.9); |
||||
border-radius: 5px; |
||||
text-align: center; |
||||
} |
||||
.control-bar input { |
||||
flex: auto; |
||||
color: black; |
||||
background-color: rgba(255,255,255,.9); |
||||
} |
||||
@ -1,42 +0,0 @@
|
||||
import React, {Component} from 'react'; |
||||
import './ControlBar.css'; |
||||
|
||||
export class ControlBar extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state={ |
||||
search_text: '', |
||||
}; |
||||
this.set_search_text=props.set_search_text; |
||||
} |
||||
|
||||
on_change(event) { |
||||
this.setState({ |
||||
search_text: event.target.value, |
||||
}); |
||||
} |
||||
|
||||
on_keypress(event) { |
||||
if(event.key==='Enter') |
||||
this.set_search_text(this.state.search_text); |
||||
} |
||||
|
||||
do_refresh() { |
||||
this.setState({ |
||||
search_text: '', |
||||
}); |
||||
this.set_search_text(null); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="control-bar aux-margin"> |
||||
<a className="refresh-btn" onClick={this.do_refresh.bind(this)}>最新树洞</a> |
||||
|
||||
<input value={this.state.search_text} placeholder="搜索" |
||||
onChange={this.on_change.bind(this)} onKeyPress={this.on_keypress.bind(this)} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -1,19 +1,37 @@
|
||||
.title { |
||||
.title-bar { |
||||
z-index: 1; |
||||
position: sticky; |
||||
top: 0; |
||||
top: -6em; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 2em; |
||||
line-height: 2em; |
||||
font-size: 1.5em; |
||||
height: 9em; |
||||
background-color: rgba(255,255,255,.8); |
||||
padding: 0 50px; |
||||
box-shadow: 0 0 25px #999; |
||||
margin-bottom: 1em; |
||||
} |
||||
.title-links { |
||||
float: right; |
||||
display: inline-block; |
||||
font-size: .7em; |
||||
|
||||
.title { |
||||
font-size: 2em; |
||||
line-height: 3em; |
||||
text-align: center; |
||||
} |
||||
|
||||
.control-bar { |
||||
display: flex; |
||||
margin-top: .5em; |
||||
line-height: 2em; |
||||
} |
||||
|
||||
.control-bar .refresh-btn { |
||||
flex: 0 0 100px; |
||||
color: black; |
||||
background-color: rgba(255,255,255,.5); |
||||
border-radius: 5px; |
||||
text-align: center; |
||||
border: 1px solid black; |
||||
} |
||||
.control-bar input { |
||||
flex: auto; |
||||
color: black; |
||||
background-color: rgba(255,255,255,.5); |
||||
} |
||||
@ -1,44 +1,93 @@
|
||||
import React, {Component} from 'react'; |
||||
import './Title.css'; |
||||
|
||||
export function Title(props) { |
||||
return ( |
||||
<div className="title"> |
||||
<div className="title-links"> |
||||
<a onClick={()=>{props.callback( |
||||
const HELP_TEXT=( |
||||
<div className="box"> |
||||
<p>使用提示：</p> |
||||
<ul> |
||||
<li>为保证使用体验，请使用 Chrome 浏览器 stable 分支最新版</li> |
||||
<li>在列表中点击帖子可以显示全部回复</li> |
||||
<li>搜索框输入 #472865 等可以查看指定 ID 的树洞</li> |
||||
</ul> |
||||
<p>使用本网站时，您需要了解并同意：</p> |
||||
<ul> |
||||
<li>所有数据来自 PKU Helper，本站不对其内容负责</li> |
||||
<li>不接受关于修改 UI 的建议</li> |
||||
<li>英梨梨是我的，你们都不要抢</li> |
||||
</ul> |
||||
<p>By @xmcp</p> |
||||
<br /> |
||||
<p> |
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
</p> |
||||
<br /> |
||||
<p> |
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU General Public License for more details. |
||||
</p> |
||||
</div> |
||||
); |
||||
|
||||
class ControlBar extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state={ |
||||
search_text: '', |
||||
}; |
||||
this.set_search_text=props.set_search_text; |
||||
} |
||||
|
||||
on_change(event) { |
||||
this.setState({ |
||||
search_text: event.target.value, |
||||
}); |
||||
} |
||||
|
||||
on_keypress(event) { |
||||
if(event.key==='Enter') |
||||
this.set_search_text(this.state.search_text); |
||||
} |
||||
|
||||
do_refresh() { |
||||
window.scrollTo(0,0); |
||||
this.setState({ |
||||
search_text: '', |
||||
}); |
||||
this.set_search_text(null); |
||||
|
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="control-bar"> |
||||
<a className="refresh-btn" onClick={this.do_refresh.bind(this)}>最新树洞</a> |
||||
|
||||
<input value={this.state.search_text} placeholder="搜索 或 #PID" |
||||
onChange={this.on_change.bind(this)} onKeyPress={this.on_keypress.bind(this)} |
||||
/> |
||||
|
||||
<a onClick={()=>{this.props.callback( |
||||
'关于 P大树洞（非官方） 网页版', |
||||
<div class="box"> |
||||
<p>使用提示：</p> |
||||
<ul> |
||||
<li>为保证使用体验，请使用 Chrome 浏览器 stable 分支最新版</li> |
||||
<li>在列表中点击帖子可以显示全部回复</li> |
||||
</ul> |
||||
<p>使用本网站时，您需要了解并同意：</p> |
||||
<ul> |
||||
<li>所有数据来自 PKU Helper，本站不对其内容负责</li> |
||||
<li>不接受关于修改 UI 的建议</li> |
||||
<li>英梨梨是我的，你们都不要抢</li> |
||||
</ul> |
||||
<p>By @xmcp</p> |
||||
<br /> |
||||
<p> |
||||
This program is free software: you can redistribute it and/or modify |
||||
it under the terms of the GNU General Public License as published by |
||||
the Free Software Foundation, either version 3 of the License, or |
||||
(at your option) any later version. |
||||
</p> |
||||
<br /> |
||||
<p> |
||||
This program is distributed in the hope that it will be useful, |
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
GNU General Public License for more details. |
||||
</p> |
||||
</div> |
||||
HELP_TEXT |
||||
)}}>Help</a> |
||||
<a href="https://github.com/xmcp/ashole" target="_blank">GitHub</a> |
||||
</div> |
||||
P大树洞（非官方） |
||||
) |
||||
} |
||||
} |
||||
|
||||
export function Title(props) { |
||||
return ( |
||||
<div className="title-bar"> |
||||
<div className="aux-margin"> |
||||
<p className="title centered-line">P大树洞</p> |
||||
<ControlBar callback={props.callback} set_search_text={props.set_search_text} /> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue