diff options
author | Dessalines <tyhou13@gmx.com> | 2019-08-28 18:43:51 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-08-28 18:43:51 -0700 |
commit | 465f5080c0c90249f155d8ff8978f061005713cc (patch) | |
tree | 254075c2d4025ef1c957fdfe39bdc75665e30203 | |
parent | f137c738859e508a377f9709934ccf27849ec28d (diff) |
Adding some UI suggestions.
- Adding divider lines in between post listings.
- Increasing button sizes.
- Fixes #222
-rw-r--r-- | ui/src/components/comment-node.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/post-listings.tsx | 6 | ||||
-rw-r--r-- | ui/src/css/main.css | 2 |
4 files changed, 10 insertions, 6 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index f518da90..785e3107 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -62,11 +62,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { return ( <div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> <div className={`vote-bar mr-1 float-left small text-center ${this.props.viewOnly && 'no-click'}`}> - <button className={`btn btn-sm p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}> + <button className={`btn p-0 ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}> <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg> </button> <div class={`font-weight-bold text-muted`}>{node.comment.score}</div> - <button className={`btn btn-sm p-0 ${node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentDisLike)}> + <button className={`btn p-0 ${node.comment.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentDisLike)}> <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg> </button> </div> diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 0b9cc3e1..b513d077 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -60,11 +60,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> { return ( <div class="listing col-12"> <div className={`vote-bar mr-1 float-left small text-center ${this.props.viewOnly && 'no-click'}`}> - <button className={`btn btn-sm p-0 ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}> + <button className={`btn p-0 ${post.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostLike)}> <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg> </button> <div class={`font-weight-bold text-muted`}>{post.score}</div> - <button className={`btn btn-sm p-0 ${post.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostDisLike)}> + <button className={`btn p-0 ${post.my_vote == -1 ? 'text-danger' : 'text-muted'}`} onClick={linkEvent(this, this.handlePostDisLike)}> <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg> </button> </div> diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx index f5682a7e..5dd62739 100644 --- a/ui/src/components/post-listings.tsx +++ b/ui/src/components/post-listings.tsx @@ -19,7 +19,11 @@ export class PostListings extends Component<PostListingsProps, any> { return ( <div> {this.props.posts.length > 0 ? this.props.posts.map(post => - <PostListing post={post} showCommunity={this.props.showCommunity} />) : + <> + <PostListing post={post} showCommunity={this.props.showCommunity} /> + <hr class="my-2" /> + </> + ) : <> <div><T i18nKey="no_posts">#</T></div> {this.props.showCommunity !== undefined && <div><T i18nKey="subscribe_to_communities">#<Link to="/communities">#</Link></T></div>} diff --git a/ui/src/css/main.css b/ui/src/css/main.css index cc8eb481..536cbc64 100644 --- a/ui/src/css/main.css +++ b/ui/src/css/main.css @@ -63,7 +63,7 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary { height: auto; } -.listing, .comment-node { +.comment-node { margin-bottom: 10px; } |