LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Comments are adjacent to the thumbnail

Browse source
This commit is contained in:
Oleg Silkin 2019-10-24 13:24:53 -04:00 • committed by Sean Yesmunt
parent 3b0c3cf8ef
commit 53e4392feb
2 changed files with 39 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/component/comment/view.jsx
View file

@ -43,26 +43,29 @@ function Comment(props: Props) {
return ( return (
<li className="comment"> <li className="comment">
<div className="comment__author">
<div className="comment__author-thumbnail"> <div className="comment__author-thumbnail">
{authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />} {authorUri ? <ChannelThumbnail uri={authorUri} obscure={channelIsBlocked} /> : <ChannelThumbnail />}
</div> </div>
<div className="comment__body_container">
<span className="comment__meta">
<Button <Button
className="button--uri-indicator truncated-text comment__author-name" className="button--uri-indicator truncated-text comment__author"
navigate={authorUri} navigate={authorUri}
label={author || __('Anonymous')} label={author || __('Anonymous')}
/> />
<time className="comment__time" dateTime={timePosted}> <time className="comment__time" dateTime={timePosted}>
{relativeDate(timePosted)} {relativeDate(timePosted)}
</time> </time>
</div> </span>
<div> <div>
<Expandable> <Expandable>
<div className={'comment__message'}> <div className="comment__message">
<MarkdownPreview content={message} /> <MarkdownPreview content={message} promptLinks />
</div> </div>
</Expandable> </Expandable>
</div> </div>
</div>
</li> </li>
); );
} }

45
ui/scss/component/_comments.scss
View file

@ -3,26 +3,27 @@
} }
.comment { .comment {
font-size: var(--font-multiplier-small);
padding: var(--spacing-small) 0;
flex-direction: row;
display: flex; display: flex;
flex-direction: column; &:not(:last-of-type) {
font-size: var(--font-small); border-bottom: 1px solid var(--lbry-gray-1);
padding: var(--spacing-small) 0 var(--spacing-small);
&:first-of-type {
padding-top: 0;
}
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
} }
.comment__meta { .comment__body_container {
text-overflow: ellipsis; padding: var(--spacing-small) 0;
display: flex; }
justify-content: space-between;
margin-bottom: var(--spacing-small);
.comment__meta {
display: flex;
flex-direction: column;
justify-content: flex-end;
text-overflow: ellipsis;
time { time {
opacity: 0.3; opacity: 0.3;
} }
@ -33,31 +34,21 @@
} }
.comment__author { .comment__author {
display: inherit;
justify-content: left;
vertical-align: center;
flex: initial;
padding-bottom: inherit;
}
.comment__author-thumbnail {
flex-shrink: 1;
}
.comment__author-name {
margin-bottom: 1rem; margin-bottom: 1rem;
text-overflow: ellipsis; // This is where the magic happens text-overflow: ellipsis; // This is where the magic happens
flex-basis: 400px; flex-basis: 400px;
flex-shrink: 1; flex-shrink: 1;
font-weight: 600; font-weight: 600;
font-size: medium; }
.comment__author-thumbnail {
display: inline-block;
} }
.comment__time { .comment__time {
flex: 1;
align-self: flex-start;
flex-basis: 200px; flex-basis: 200px;
text-align: right; text-align: right;
justify-content: flex-end;
} }
.comment__char-count { .comment__char-count {