aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-05-31 15:19:11 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:55 +0300
commit7d907285356628a6c9478ee655a333fb191cdb5d (patch)
treee156e10dabd806e17335bbb7ebfd59b3e8892a6c
parentb6983fd90a1ec09630bb0996e13669c07cf0b594 (diff)
Thread styling
-rw-r--r--vnext/src/ui/Avatar.css7
-rw-r--r--vnext/src/ui/Message.css4
-rw-r--r--vnext/src/ui/Thread.css13
-rw-r--r--vnext/src/ui/Thread.js62
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>&nbsp;&middot;&nbsp;</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>&nbsp;&middot;&nbsp;</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>
)) : (