update postcard

This commit is contained in:
SrGooglo 2023-03-14 19:51:51 +00:00
parent ff2e29fe4c
commit 7606d3c92c
4 changed files with 40 additions and 52 deletions

View File

@ -1,6 +1,4 @@
.post_attachments { .post_attachments {
position: relative;
display: flex; display: flex;
width: 100%; width: 100%;

View File

@ -1,15 +1,15 @@
.post_header { .post_header {
display: inline-flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 15px;
.user { .user {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 15px;
>div { >div {
margin-right: 10px; margin-right: 10px;
} }

View File

@ -167,46 +167,45 @@ export default class PostCard extends React.PureComponent {
context-menu={"postCard-context"} context-menu={"postCard-context"}
user-id={this.props.data.user_id} user-id={this.props.data.user_id}
> >
<div className="wrapper"> <PostHeader
<PostHeader postData={this.props.data}
postData={this.props.data} onDoubleClick={this.onDoubleClick}
onDoubleClick={this.onDoubleClick} />
/>
<div <div
id="post_content" id="post_content"
className={classnames( className={classnames(
"post_content", "post_content",
{
["nsfw"]: this.state.isNsfw && !this.state.nsfwAccepted,
}
)}
>
{ {
this.state.isNsfw && !this.state.nsfwAccepted && ["nsfw"]: this.state.isNsfw && !this.state.nsfwAccepted,
<div className="nsfw_alert">
<h2>
This post may contain sensitive content.
</h2>
<antd.Button onClick={() => this.setState({ nsfwAccepted: true })}>
Show anyways
</antd.Button>
</div>
} }
)}
>
{
this.state.isNsfw && !this.state.nsfwAccepted &&
<div className="nsfw_alert">
<h2>
This post may contain sensitive content.
</h2>
<div className="message"> <antd.Button onClick={() => this.setState({ nsfwAccepted: true })}>
{ Show anyways
processString(messageRegexs)(this.props.data.message ?? "") </antd.Button>
}
</div> </div>
}
<div className="message">
{ {
this.props.data.attachments && this.props.data.attachments.length > 0 && <PostAttachments processString(messageRegexs)(this.props.data.message ?? "")
attachments={this.props.data.attachments}
/>
} }
</div> </div>
{
this.props.data.attachments && this.props.data.attachments.length > 0 && <PostAttachments
attachments={this.props.data.attachments}
/>
}
</div> </div>
<PostActions <PostActions

View File

@ -6,6 +6,10 @@
min-width: 300px; min-width: 300px;
max-width: 600px; max-width: 600px;
min-height: 165px;
height: fit-content;
max-width: 800px;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;
@ -18,23 +22,10 @@
overflow: hidden; overflow: hidden;
.wrapper {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 100%;
transition: all 0.2s ease-in-out;
>div {
width: 100%;
}
}
.post_content { .post_content {
position: relative; position: relative;
display: inline-flex;
display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;