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 (limited to 'vnext/src/ui') 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 ( -
= 0) }} /> +
= 0) }} /> +