Mirrors/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy synced 2024-11-23 21:13:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Adding some UI suggestions.

Browse source 
- Adding divider lines in between post listings.
- Increasing button sizes.
- Fixes #222
This commit is contained in:
Dessalines 2019-08-28 18:43:51 -07:00
parent f137c73885
commit 465f5080c0
4 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/comment-node.tsx vendored
View file

@ -62,11 +62,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
return ( return (
<div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> <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'}`}> <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> <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
</button> </button>
<div class={`font-weight-bold text-muted`}>{node.comment.score}</div> <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> <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
</button> </button>
</div> </div>

4
ui/src/components/post-listing.tsx vendored
View file

@ -60,11 +60,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
<div class="listing col-12"> <div class="listing col-12">
<div className={`vote-bar mr-1 float-left small text-center ${this.props.viewOnly && 'no-click'}`}> <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> <svg class="icon upvote"><use xlinkHref="#icon-arrow-up"></use></svg>
</button> </button>
<div class={`font-weight-bold text-muted`}>{post.score}</div> <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> <svg class="icon downvote"><use xlinkHref="#icon-arrow-down"></use></svg>
</button> </button>
</div> </div>

6
ui/src/components/post-listings.tsx vendored
View file

@ -19,7 +19,11 @@ export class PostListings extends Component<PostListingsProps, any> {
return ( return (
<div> <div>
{this.props.posts.length > 0 ? this.props.posts.map(post => {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> <div><T i18nKey="no_posts">#</T></div>
{this.props.showCommunity !== undefined && <div><T i18nKey="subscribe_to_communities">#<Link to="/communities">#</Link></T></div>} {this.props.showCommunity !== undefined && <div><T i18nKey="subscribe_to_communities">#<Link to="/communities">#</Link></T></div>}

2
ui/src/css/main.css vendored
View file

@ -63,7 +63,7 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
height: auto; height: auto;
} }
.listing, .comment-node { .comment-node {
margin-bottom: 10px; margin-bottom: 10px;
} }