pinned answer Buttons to bottom of post

This commit is contained in:
2024-06-19 13:01:11 +02:00
parent 29af08f79d
commit 94996fb45c
2 changed files with 23 additions and 4 deletions

View File

@@ -66,10 +66,15 @@ h3 {
white-space: pre-wrap; white-space: pre-wrap;
} }
.post-container {
margin-right: -5em;
}
.post-right { .post-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
min-width: 5em;
.post-date { .post-date {
position: relative; position: relative;
@@ -253,6 +258,8 @@ button {
} }
.nrOfComments { .nrOfComments {
position: relative;
right: -3.5em;
height: 100%; height: 100%;
display: flex; display: flex;
align-self: flex-end; align-self: flex-end;
@@ -261,7 +268,15 @@ button {
font-size: 1.5em; font-size: 1.5em;
padding: 0.35em; padding: 0.35em;
* { * {
padding-right: 0.25em; padding-right: 0.3em;
}
span {
padding-right: 0.6em;
}
button {
padding: 0.3em 0.8em;
line-height: 2em;
font-size: 0.8em;
} }
} }
@@ -291,4 +306,8 @@ textarea {
.logout { .logout {
margin-left: 0.5em; margin-left: 0.5em;
width: 25% width: 25%
}
.spacer {
height: 4em;
} }

View File

@@ -58,11 +58,11 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
</div> </div>
{recursionDepth !== 0 && <div className="nrOfComments"> {recursionDepth !== 0 && <div className="nrOfComments">
<FontAwesomeIcon className="icon" icon={faComments}/> <FontAwesomeIcon className="icon" icon={faComments}/>
<span className="">{getComments(post, recursionDepth-1)}</span> <span className="">{getComments(post, recursionDepth - 1)}</span>
<button onClick={() => selectPost(post)}>Antworten</button>
</div>} </div>}
<div className="post-right"> <div className="post-right">
<div className="post-date"> <div className="post-date">
{getDate(post.date)} {getDate(post.date)}
</div> </div>
<div className="row"> <div className="row">
@@ -82,7 +82,7 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
</button> </button>
</div> </div>
</div> </div>
{recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>} {recursionDepth !== 0 && <div className="spacer"></div>}
</div> </div>
</div> </div>
<div className="comment"> <div className="comment">