diff options
author | 2019-05-31 15:19:11 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:55 +0300 | |
commit | 7d907285356628a6c9478ee655a333fb191cdb5d (patch) | |
tree | e156e10dabd806e17335bbb7ebfd59b3e8892a6c /vnext | |
parent | b6983fd90a1ec09630bb0996e13669c07cf0b594 (diff) |
Thread styling
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/ui/Avatar.css | 7 | ||||
-rw-r--r-- | vnext/src/ui/Message.css | 4 | ||||
-rw-r--r-- | vnext/src/ui/Thread.css | 13 | ||||
-rw-r--r-- | vnext/src/ui/Thread.js | 62 |
4 files changed, 52 insertions, 34 deletions
diff --git a/vnext/src/ui/Avatar.css b/vnext/src/ui/Avatar.css index 7bdb3115..f48f2b9e 100644 --- a/vnext/src/ui/Avatar.css +++ b/vnext/src/ui/Avatar.css @@ -1,6 +1,5 @@ .Avatar { display: flex; - width: 100%; } .msg-avatar { max-height: 48px; @@ -19,9 +18,3 @@ padding: 6px; vertical-align: middle; } - -@media screen and (min-width: 450px) { - .Avatar { - width: 300px; - } -} diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css index d724703f..126fcd6a 100644 --- a/vnext/src/ui/Message.css +++ b/vnext/src/ui/Message.css @@ -74,6 +74,10 @@ blockquote { .msg-media { text-align: center; } +.msg-media img { + max-width: 100%; + height: auto; +} .msg-links { color: #88958d; font-size: small; diff --git a/vnext/src/ui/Thread.css b/vnext/src/ui/Thread.css new file mode 100644 index 00000000..52b52f14 --- /dev/null +++ b/vnext/src/ui/Thread.css @@ -0,0 +1,13 @@ +#replies { + background: #fff; + border: 1px solid #eee; + padding: 12px; +} + +.msg-bubble { + background: rgb(238, 238, 238); + color: rgb(34, 34, 34); + padding: 6px 12px; + margin-left: 48px; + margin-bottom: 12px; +} diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js index e7ccb032..b625ecad 100644 --- a/vnext/src/ui/Thread.js +++ b/vnext/src/ui/Thread.js @@ -14,6 +14,8 @@ import { format, embedUrls } from '../utils/embed'; import { getMessages, comment, markReadTracker } from '../api'; +import './Thread.css'; + function Comment({ msg, visitor, active, setActive, postComment }) { const embedRef = useRef(); const msgRef = useRef(); @@ -26,8 +28,8 @@ function Comment({ msg, visitor, active, setActive, postComment }) { } }, []); return ( - <div className="msg-cont"> - <div className="msg-header"> + <div> + <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}> <Avatar user={msg.user}> <div className="msg-ts"> {msg.replyto > 0 && @@ -36,35 +38,41 @@ function Comment({ msg, visitor, active, setActive, postComment }) { )} </div> </Avatar> + <div className="msg-links"> + { + visitor.uid > 0 ? ( + <> + {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>} + </> + ) : ( + <> + <span> · </span>{active === msg.rid || <Button>Reply</Button>} + </> + ) + } + </div> </div> - { - msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} /> - : - <div className="msg-txt" ref={msgRef}> - <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} /> + <div className="msg-bubble"> + { + msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} /> + : + <div ref={msgRef}> + <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} /> + </div> + } + </div> + { + msg.photo && + <div className="msg-media"> + <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}> + <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /> + </a> </div> - } - { - msg.photo && - <div className="msg-media"> - <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}> - <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /> - </a> - </div> - } + } <div className="embedContainer" ref={embedRef} /> <div className="msg-links"> { - visitor.uid > 0 ? ( - <> - {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>} - {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>} - </> - ) : ( - <> - <span> · </span>{active === msg.rid || <Button>Reply</Button>} - </> - ) + active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput> } </div> </div> @@ -154,7 +162,7 @@ export default function Thread(props) { <ul id="replies"> { !loading ? replies.map((msg) => ( - <li id={msg.rid} key={msg.rid} className="msg"> + <li id={msg.rid} key={msg.rid}> <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} /> </li> )) : ( |