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

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

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

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

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