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

Finalized styling

Browse source
This commit is contained in:
ポール ウェッブ 2019-05-22 13:59:46 -05:00 • committed by Sean Yesmunt
parent 90d2f365c1
commit 69cb2b8be8
2 changed files with 60 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/ui/component/commentsList/view.jsx
View file

@ -14,6 +14,7 @@ type CommentProps = {
claimId: string, claimId: string,
author: string, author: string,
message: string, message: string,
parentId: number,
timePosted: number, timePosted: number,
}; };
@ -45,6 +46,7 @@ class CommentList extends React.PureComponent<CommentListProps> {
commentId={comment.comment_id} commentId={comment.comment_id}
key={comment.author + comment.comment_id} key={comment.author + comment.comment_id}
message={comment.message} message={comment.message}
parentId={comment.parent_id}
timePosted={comment.time_posted} timePosted={comment.time_posted}
/> />
); );
@ -57,10 +59,10 @@ class CommentList extends React.PureComponent<CommentListProps> {
class Comment extends React.PureComponent<CommentProps> { class Comment extends React.PureComponent<CommentProps> {
render() { render() {
return ( return (
<li className="comment"> <li className={this.props.parentId ? 'comment reply' : 'comment'}>
<div className="comment__meta card__actions--between"> <div className="comment__meta card__actions--between">
<div>{this.props.author}</div> <strong>{this.props.author}</strong>
<time datatime={this.props.timePosted}>{relativeDate(this.props.timePosted)}</time> <time dateTime={this.props.timePosted}>{relativeDate(this.props.timePosted)}</time>
</div> </div>
<div className="comment__content">{this.props.message}</div> <div className="comment__content">{this.props.message}</div>
@ -68,9 +70,9 @@ class Comment extends React.PureComponent<CommentProps> {
<div className="comment__actions card__actions--between"> <div className="comment__actions card__actions--between">
<button className={'button button--primary'}>Reply</button> <button className={'button button--primary'}>Reply</button>
<span> <span className="comment__actions-wrap">
<button className="comment__action button button--secondary">Up</button> <button className="comment__action upvote">Up</button>
<button className="comment__action button button--secondary">Down</button> <button className="comment__action downvote">Down</button>
</span> </span>
</div> </div>
</li> </li>

57
src/ui/scss/component/_comments.scss
View file

@ -1,20 +1,67 @@
.comments {
}
.comment { .comment {
padding-bottom: var(--spacing-vertical-large); padding-bottom: var(--spacing-vertical-large);
&.reply {
border-left: 3px solid var(--lbry-teal-5);
padding-left: var(--spacing-vertical-large);
position: relative;
top: -1px;
}
&:not(:first-of-type) { &:not(:first-of-type) {
padding-top: var(--spacing-vertical-large); padding-top: var(--spacing-vertical-large);
} }
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid $lbry-gray-1; border-bottom: 1px solid var(--lbry-gray-1);
[data-mode='dark'] & {
border-color: rgba($lbry-gray-5, 0.2);
}
}
}
.comment__actions-wrap {
align-items: center;
display: flex;
justify-content: space-between;
width: 4.5rem;
}
.comment__action {
@include hide-text;
width: 0; height: 0;
transition: border-color 0.2s;
&.downvote {
border-top: 2rem solid var(--lbry-orange-3);
border-right: 1rem solid transparent;
border-left: 1rem solid transparent;
&:hover {
border-top-color: var(--lbry-yellow-3);
}
}
&.upvote {
border-right: 1rem solid transparent;
border-bottom: 2rem solid var(--lbry-teal-4);
border-left: 1rem solid transparent;
&:hover {
border-bottom-color: var(--lbry-green-2);
}
} }
} }
.comment__content { .comment__content {
font-size: 1.15rem; font-size: 1.15rem;
padding-top: var(--spacing-vertical-medium); padding-top: var(--spacing-vertical-medium);
padding-bottom: var(--spacing-vertical-medium); padding-bottom: var(--spacing-vertical-large);
}
.comment__meta {
time {
opacity: 0.3;
}
} }