diff options
author | Vitaly Takmazov | 2018-06-28 13:11:27 +0300 |
---|---|---|
committer | Vitaly Takmazov | 2023-01-13 10:37:53 +0300 |
commit | c3cd88c90cf3866324af4b12ab573a0392681c74 (patch) | |
tree | 93c9acd929ebff9ec04e2e6952e80e2d7da00f69 | |
parent | 4a0583e6e6737fefb2f39bf6ed0f37be4524a8b5 (diff) |
Thread styling
-rw-r--r-- | vnext/src/components/Thread.js | 129 | ||||
-rw-r--r-- | vnext/src/style/main.css | 3 |
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} </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> · </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} </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> · </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; |