Thread styling

2 files changed, 62 insertions, 70 deletions

diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index e0b25bf9..e9f08ccb 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -83,78 +83,67 @@ export default class Thread extends React.Component {
             }
           </li>
         </ul>
-        {
-          <React.Fragment>
+        {!this.state.loading ? (
+          <ul id="replies">
             {
-              this.props.visitor.uid > 0 && msg.mid &&
-              <div className="title2">
-                <img style={{ display: 'none' }} src={markReadTracker(msg, this.props.visitor)} />
-                <h2>{msg.replies && `Replies (${msg.replies})`}</h2>
-              </div>
-            }
-            {!this.state.loading ? (
-              <ul id="replies">
-                {
-                  this.state.replies.map((msg) => (
-                    <li id={msg.rid} key={msg.rid} className="msg">
-                      <div className="msg-cont">
-                        <div className="msg-header">
-                          {!msg.user.banned ? (
-                            <React.Fragment>
-                              <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
-                                <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
-                              </span><Avatar user={msg.user} />
-                            </React.Fragment>) : (
-                              <React.Fragment>
-                                <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
-                              </React.Fragment>
-                            )
-                          }
-                          <div className="msg-ts">
-                            <a href={`/${msg.user.uname}/${msg.mid}`}>
-                              <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
-                                title={moment.utc(msg.timestamp).local().format('lll')}>
-                                {moment.utc(msg.timestamp).fromNow()}
-                              </time>
-                            </a>
-                            {msg.replyto > 0 &&
-                              (
-                                <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
-                              )}
-                          </div>
-                        </div>
-                        <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
-                        {
-                          msg.photo &&
-                          <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
-                            <img itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
-                          </p>
-                        }
-                        <div className="msg-links">
-                          {
-                            this.props.visitor.uid > 0 ? (
-                              <React.Fragment>
-                                {this.state.active === msg.rid || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
-                                {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
-                              </React.Fragment>
-                            ) : (
-                                <React.Fragment>
-                                  <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
-                                </React.Fragment>
-                              )
-                          }
-                        </div>
+              this.state.replies.map((msg) => (
+                <li id={msg.rid} key={msg.rid} className="msg">
+                  <div className="msg-cont">
+                    <div className="msg-header">
+                      {!msg.user.banned ? (
+                        <React.Fragment>
+                          <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
+                            <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
+                          </span><Avatar user={msg.user} />
+                        </React.Fragment>) : (
+                          <React.Fragment>
+                            <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
+                          </React.Fragment>
+                        )
+                      }
+                      <div className="msg-ts">
+                        <a href={`/${msg.user.uname}/${msg.mid}`}>
+                          <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
+                            title={moment.utc(msg.timestamp).local().format('lll')}>
+                            {moment.utc(msg.timestamp).fromNow()}
+                          </time>
+                        </a>
+                        {msg.replyto > 0 &&
+                          (
+                            <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
+                          )}
                       </div>
-                    </li>
-                  ))
-                }
-              </ul>) : (
-                <React.Fragment>
-                  <Spinner /><Spinner /><Spinner />
-                </React.Fragment>
-              )}
-          </React.Fragment>
-        }
+                    </div>
+                    <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
+                    {
+                      msg.photo &&
+                      <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+                        <img itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
+                      </p>
+                    }
+                    <div className="msg-links">
+                      {
+                        this.props.visitor.uid > 0 ? (
+                          <React.Fragment>
+                            {this.state.active === msg.rid || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
+                            {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
+                          </React.Fragment>
+                        ) : (
+                            <React.Fragment>
+                              <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
+                            </React.Fragment>
+                          )
+                      }
+                    </div>
+                  </div>
+                </li>
+              ))
+            }
+          </ul>) : (
+            <React.Fragment>
+              <Spinner /><Spinner /><Spinner />
+            </React.Fragment>
+          )}
       </React.Fragment>
     )
   }
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 33d4f867..b5d4ea0e 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -482,6 +482,9 @@ article .tags > a,
     overflow: hidden;
     text-indent: 10px;
 }
+#replies .msg-cont {
+    margin: 0;
+}
 #replies .msg-txt,
 #private-messages .msg-txt {
     margin: 0;