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

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

@ -73,55 +73,60 @@ class PostModal extends React.Component {
return (
<div className="modal post-modal">
<div className="post">
<div className="post__actions">
<button
className={`button read-button ${readButtonDisabled && 'button--disabled'}`}
onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)}
>
<i className="fas fa-check" /> Mark as read
</button>
<button
className="button post__close-button"
onClick={() => this.props.unSelectPost()}
>
<i className="fas fa-times"></i> Close
</button>
</div>
<div className="post__header">
<h2 className={titleClassName}>{`${post.title} `}</h2>
<div className="post__meta-info">
<span className="post__date">
{publicationDate} {this.props.timezone}
</span>
{post.author && <span className="post__author">{post.author}</span>}
{this.props.category && (
<span className="badge post__category" title={this.props.category.name}>
<a
href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
target="_blank"
rel="noopener noreferrer"
>
{this.props.category.name}
<div className="post__actions">
<button
className={`button read-button ${readButtonDisabled &&
'button--disabled'}`}
onClick={() =>
!readButtonDisabled && this.props.markPostRead(post, token)
}
>
<i className="fas fa-check" /> Mark as read
</button>
<button
className="button post__close-button"
onClick={() => this.props.unSelectPost()}
>
<i className="fas fa-times"></i> Close
</button>
</div>
<div className="post__heading">
<h2 className={titleClassName}>{`${post.title} `}</h2>
<div className="post__meta-info">
<span className="post__date">
{publicationDate} {this.props.timezone}
</span>
{post.author && <span className="post__author">{post.author}</span>}
{this.props.category && (
<span className="badge post__category" title={this.props.category.name}>
<a
href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
target="_blank"
rel="noopener noreferrer"
>
{this.props.category.name}
</a>
</span>
)}
<span className="badge post__rule" title={this.props.rule.name}>
<a href={ruleUrl} target="_blank" rel="noopener noreferrer">
{this.props.rule.name}
</a>
</span>
)}
<span className="badge post__rule" title={this.props.rule.name}>
<a href={ruleUrl} target="_blank" rel="noopener noreferrer">
{this.props.rule.name}
<a
className="post__link"
href={post.url}
target="_blank"
rel="noopener noreferrer"
>
<i className="fas fa-external-link-alt" />
</a>
</span>
<a
className="post__link"
href={post.url}
target="_blank"
rel="noopener noreferrer"
>
<i className="fas fa-external-link-alt" />
</a>
<span
className={savedIconClass}
onClick={() => this.props.toggleSaved(post, token)}
/>
<span
className={savedIconClass}
onClick={() => this.props.toggleSaved(post, token)}
/>
</div>
</div>
</div>

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

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