sonny/newsreader
1
0
Fork 0
Code Issues 13 Pull requests 2 Projects Releases 58 Packages Wiki Activity Actions

Add sticky post header

Browse source
This commit is contained in:
Sonny Bakker 2021-03-06 17:40:36 +01:00
parent 6db7d6c3f5
commit 85e02a8147
2 changed files with 63 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/newsreader/js/pages/homepage/components/PostModal.js
View file

@ -73,10 +73,14 @@ class PostModal extends React.Component {
return ( return (
<div className="modal post-modal"> <div className="modal post-modal">
<div className="post"> <div className="post">
<div className="post__header">
<div className="post__actions"> <div className="post__actions">
<button <button
className={`button read-button ${readButtonDisabled && 'button--disabled'}`} className={`button read-button ${readButtonDisabled &&
onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)} 'button--disabled'}`}
onClick={() =>
!readButtonDisabled && this.props.markPostRead(post, token)
}
> >
<i className="fas fa-check" /> Mark as read <i className="fas fa-check" /> Mark as read
</button> </button>
@ -87,7 +91,7 @@ class PostModal extends React.Component {
<i className="fas fa-times"></i> Close <i className="fas fa-times"></i> Close
</button> </button>
</div> </div>
<div className="post__header"> <div className="post__heading">
<h2 className={titleClassName}>{`${post.title} `}</h2> <h2 className={titleClassName}>{`${post.title} `}</h2>
<div className="post__meta-info"> <div className="post__meta-info">
<span className="post__date"> <span className="post__date">
@ -124,6 +128,7 @@ class PostModal extends React.Component {
/> />
</div> </div>
</div> </div>
</div>
{/* HTML is sanitized by the collectors */} {/* HTML is sanitized by the collectors */}
<div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} /> <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />

14
src/newsreader/scss/components/post/_post.scss
View file

@ -15,6 +15,17 @@
cursor: initial; cursor: initial;
&__header {
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
&__actions { &__actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -24,10 +35,11 @@
gap: 20px; gap: 20px;
} }
&__header { &__heading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
width: 75%; width: 75%;
} }