add swpieable reply ui

2018-08-22 22:01:24 +08:00
parent 0372728ca1
commit ab9d07a41f
3 changed files with 22 additions and 14 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,7 @@
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta name="format-detection" content="telephone=no">
    <title>P大树洞（非官方）</title>
 </head>
 <body>
--- a/src/Flows.css
+++ b/src/Flows.css
@@ -6,6 +6,12 @@
    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 {
    display: inline-block;
    width: 600px;
@@ -18,8 +24,13 @@
    width: calc(100% - 625px);
    margin-left: -25px;
    padding-left: 20px;
-    overflow-x: hidden;
+    overflow-x: auto;
 }
+
+.flow-reply-row::-webkit-scrollbar {
+    display: none;
+}
+
 .flow-reply-row:empty {
    margin: 0 !important;
    display: none;
@@ -41,9 +52,9 @@

    .flow-reply-row {
        display: flex;
-        width: calc(100% - 10px) !important;
-        margin-left: 10px;
-        padding-left: 20px;
+        width: 100% !important;
+        margin-left: 0;
+        padding-left: 30px;
        margin-top: -2.5em;
        margin-bottom: -1em;
    }
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -11,6 +11,7 @@ const API_BASE=window.location.protocol==='https:' ? '/api_proxy' : 'http://www.

 const SEARCH_PAGESIZE=50;
 const CLICKABLE_TAGS={a: true, audio: true};
+const PREVIEW_REPLY_COUNT=10;

 function Reply(props) {
    return (
@@ -26,14 +27,6 @@ function Reply(props) {
    );
 }

-function ReplyPlaceholder(props) {
-    return (
-        <div className="box">
-            加载中
-        </div>
-    );
-}
-
 function FlowItem(props) {
    return (
        <div className="flow-item box">
@@ -102,8 +95,11 @@ class FlowItemRow extends Component {
            }}>
                <FlowItem info={this.info} />
                <div className="flow-reply-row">
-                    {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
-                    {this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)}
+                    {!!this.state.reply_loading && <div className="box box-tip">加载中</div>}
+                    {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>
        );