Add sticky post header

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -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__actions">
-            <div className="post__meta-info">
+              <button
-              <span className="post__date">
+                className={`button read-button ${readButtonDisabled &&
-                {publicationDate} {this.props.timezone}
+                  'button--disabled'}`}
-              </span>
+                onClick={() =>
-              {post.author && <span className="post__author">{post.author}</span>}
+                  !readButtonDisabled && this.props.markPostRead(post, token)
-              {this.props.category && (
+                }
-                <span className="badge post__category" title={this.props.category.name}>
+              >
-                  <a
+                <i className="fas fa-check" /> Mark as read
-                    href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
+              </button>
-                    target="_blank"
+              <button
-                    rel="noopener noreferrer"
+                className="button post__close-button"
-                  >
+                onClick={() => this.props.unSelectPost()}
-                    {this.props.category.name}
+              >
+                <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>
-              )}
+                <a
-              <span className="badge post__rule" title={this.props.rule.name}>
+                  className="post__link"
-                <a href={ruleUrl} target="_blank" rel="noopener noreferrer">
+                  href={post.url}
-                  {this.props.rule.name}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <i className="fas fa-external-link-alt" />
                 </a>
-              </span>
+                <span
-              <a
+                  className={savedIconClass}
-                className="post__link"
+                  onClick={() => this.props.toggleSaved(post, token)}
-                href={post.url}
+                />
-                target="_blank"
+              </div>
-                rel="noopener noreferrer"
-              >
-                <i className="fas fa-external-link-alt" />
-              </a>
-              <span
-                className={savedIconClass}
-                onClick={() => this.props.toggleSaved(post, token)}
-              />
             </div>
           </div>
 

src/newsreader/scss/components/post/_post.scss

@@ -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%;
   }