newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

add swpieable reply ui

Browse Source
This commit is contained in:
xmcp
2018-08-22 22:01:24 +08:00
parent 0372728ca1
commit ab9d07a41f
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -3,6 +3,7 @@
<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, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>P大树洞（非官方）</title> <title>P大树洞（非官方）</title>
</head> </head>
<body> <body>

19
src/Flows.css
View File

@@ -6,6 +6,12 @@
box-shadow: 0 5px 20px rgba(0,0,0,.5); box-shadow: 0 5px 20px rgba(0,0,0,.5);
} }
.box-tip {
min-width: 100px;
z-index: 1;
text-align: center;
}
.left-container .flow-item { .left-container .flow-item {
display: inline-block; display: inline-block;
width: 600px; width: 600px;
@@ -18,8 +24,13 @@
width: calc(100% - 625px); width: calc(100% - 625px);
margin-left: -25px; margin-left: -25px;
padding-left: 20px; padding-left: 20px;
overflow-x: hidden; overflow-x: auto;
} }
.flow-reply-row::-webkit-scrollbar {
display: none;
}
.flow-reply-row:empty { .flow-reply-row:empty {
margin: 0 !important; margin: 0 !important;
display: none; display: none;
@@ -41,9 +52,9 @@
.flow-reply-row { .flow-reply-row {
display: flex; display: flex;
width: calc(100% - 10px) !important; width: 100% !important;
margin-left: 10px; margin-left: 0;
padding-left: 20px; padding-left: 30px;
margin-top: -2.5em; margin-top: -2.5em;
margin-bottom: -1em; margin-bottom: -1em;
} }

16
src/Flows.js
View File

@@ -11,6 +11,7 @@ const API_BASE=window.location.protocol==='https:' ? '/api_proxy' : 'http://www.
const SEARCH_PAGESIZE=50; const SEARCH_PAGESIZE=50;
const CLICKABLE_TAGS={a: true, audio: true}; const CLICKABLE_TAGS={a: true, audio: true};
const PREVIEW_REPLY_COUNT=10;
function Reply(props) { function Reply(props) {
return ( return (
@@ -26,14 +27,6 @@ function Reply(props) {
); );
} }
function ReplyPlaceholder(props) {
return (
<div className="box">
加载中
</div>
);
}
function FlowItem(props) { function FlowItem(props) {
return ( return (
<div className="flow-item box"> <div className="flow-item box">
@@ -102,8 +95,11 @@ class FlowItemRow extends Component {
}}> }}>
<FlowItem info={this.info} /> <FlowItem info={this.info} />
<div className="flow-reply-row"> <div className="flow-reply-row">
{!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />} {!!this.state.reply_loading && <div className="box box-tip">加载中</div>}
{this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)} {this.state.replies.slice(0,PREVIEW_REPLY_COUNT).map((reply)=><Reply info={reply} key={reply.cid} />)}
{this.state.replies.length>PREVIEW_REPLY_COUNT && <div className="box box-tip">
还有 {this.state.replies.length-PREVIEW_REPLY_COUNT} 条
</div>}
</div> </div>
</div> </div>
); );