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

add swpieable reply ui

dev
xmcp 7 years ago
parent
0372728ca1
commit
ab9d07a41f
3 changed files with 22 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      public/index.html
  2. 19
      src/Flows.css
  3. 16
      src/Flows.js

1
public/index.html
Unescape 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
Unescape 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
Unescape 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>
); );

Write Preview
Loading…
Cancel
Save