From 7d907285356628a6c9478ee655a333fb191cdb5d Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Fri, 31 May 2019 15:19:11 +0300 Subject: Thread styling --- vnext/src/ui/Avatar.css | 7 ------ vnext/src/ui/Message.css | 4 ++++ vnext/src/ui/Thread.css | 13 ++++++++++ vnext/src/ui/Thread.js | 62 +++++++++++++++++++++++++++--------------------- 4 files changed, 52 insertions(+), 34 deletions(-) create mode 100644 vnext/src/ui/Thread.css 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 ( -
-
+
+
{msg.replyto > 0 && @@ -36,35 +38,41 @@ function Comment({ msg, visitor, active, setActive, postComment }) { )}
+
+ { + visitor.uid > 0 ? ( + <> + {active === msg.rid || setActive(msg.rid)}>Reply} + + ) : ( + <> +  · {active === msg.rid || } + + ) + } +
- { - msg.html ?
- : -
-

= 0) }} /> +

+ { + msg.html ?
+ : +
+

= 0) }} /> +

+ } +
+ { + msg.photo && + - } - { - msg.photo && -
- - - -
- } + }
{ - visitor.uid > 0 ? ( - <> - {active === msg.rid || setActive(msg.rid)}>Reply} - {active === msg.rid && Write a comment...} - - ) : ( - <> -  · {active === msg.rid || } - - ) + active === msg.rid && Write a comment... }
@@ -154,7 +162,7 @@ export default function Thread(props) {
    { !loading ? replies.map((msg) => ( -
  • +
  • )) : ( -- cgit v1.2.3