RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved post statistics to post header

Browse Source
This commit is contained in:
srgooglo 2022-03-02 21:40:44 +01:00
parent bbf51f1f7d
commit b52dd47375
2 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/components/PostCard/index.jsx
View File

@ -45,12 +45,18 @@ function PostHeader(props) {
</div>
</div>
</div>
<div className="postHeaderActions">
<div className="item" onClick={props.onClickLike}>
{props.isLiked && <Icons.Heart id="likeIndicator" />}
<div className="postStadistics">
<div className="item">
<Icons.Heart className={classnames("icon", { ["filled"]: props.isLiked })} />
<div className="value">
{props.likes}
</div>
</div>
<div className="item" onClick={props.onClickSave}>
<Icons.Bookmark />
<div className="item">
<Icons.MessageSquare />
<div className="value">
{props.comments}
</div>
</div>
</div>
</div>
@ -58,8 +64,8 @@ function PostHeader(props) {
function PostContent({ message }) {
return <div className="content">
{message}
</div>
{message}
</div>
}
function PostActions(props) {
@ -68,17 +74,11 @@ function PostActions(props) {
<div className="icon">
<LikeButton defaultLiked={props.defaultLiked} onClick={props.onClickLike} />
</div>
<div className="value">
{String(props.likes)}
</div>
</div>
<div className="action" id="comments" onClick={props.onClickComments}>
<div className="icon">
<Icons.MessageSquare className="icon" />
</div>
<div className="value">
{String(props.comments)}
</div>
</div>
<div className="action" id="share" onClick={props.onClickShare}>
<div className="icon">
@ -162,6 +162,8 @@ export default class PostCard extends React.Component {
isLiked={hasLiked}
onClickLike={() => this.onClickLike(false)}
onClickSave={this.onClickSave}
likes={this.state.data.likes.length}
comments={this.state.data.comments.length}
/>
<PostContent
message={this.props.data.message}
@ -175,8 +177,6 @@ export default class PostCard extends React.Component {
onClickLike={this.onClickLike}
defaultLiked={hasLiked}
isSelf={this.isSelf()}
likes={this.state.data.likes.length}
comments={this.state.data.comments.length}
/>
</div>
</div>

35
packages/app/src/components/PostCard/index.less
View File

@ -72,20 +72,34 @@
}
}
.postHeaderActions {
.postStadistics {
display : inline-flex;
flex-direction: row;
flex-direction: column;
font-size : 16px;
color: var(--background-color-contrast);
height: fit-content;
.item {
cursor: pointer;
}
display: inline-flex;
align-items: center;
justify-content: flex-end;
height: fit-content;
#likeIndicator {
color: var(--primaryColor);
fill : var(--primaryColor);
margin-left: 20px;
margin-bottom: 5px;
.icon {
&.filled {
color: var(--primaryColor);
fill : var(--primaryColor);
}
}
.value {
font-family: "DM Mono", monospace;
font-size: 14px;
}
}
}
}
@ -143,7 +157,7 @@
opacity: 0;
width : 100%;
height: 50px;
height: 40px;
margin-top: 15px;
padding : 10px;
@ -152,7 +166,6 @@
transition : all 0.2s ease-in-out;
background-color: var(--background-color-primary);
filter : drop-shadow(3px 3px 2px var(--shadow-color));
}
.actions {
@ -228,11 +241,11 @@
.postCard:hover {
.wrapper {
margin-bottom: 55px;
margin-bottom: 25px;
}
.actionsWrapper {
animation: fadeActionsIn 0.2s 0.2s linear forwards;
animation: fadeActionsIn 0.1s 0.1s linear forwards;
}
.actionsIndicator {