0.3.12

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.12
+
+- Update light theme
+- Sticky navbar
+- Sticky post modal header
+
 ## 0.3.11
 
 - Add saved posts section

package.json

@@ -1,6 +1,6 @@
 {
   "name": "newsreader",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Application for viewing RSS feeds",
   "main": "index.js",
   "scripts": {

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "newsreader"
-version = "0.3.11"
+version = "0.3.12"
 description = "Webapplication for reading RSS feeds"
 authors = ["Sonny <sonnyba871@gmail.com>"]
 license = "GPL-3.0"

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/navbar/_navbar.scss

@@ -3,10 +3,14 @@
   justify-content: center;
   align-items: center;
 
-  margin: 0 0 5px 0;
   padding: 10px 0;
   width: 100%;
 
+  position: sticky;
+  top: 0;
+
+  background-color: var(--lightest-accent-color);
+
   ol {
     display: flex;
     justify-content: flex-start;
@@ -28,5 +32,7 @@
 
   &__item:last-child {
     margin: 0 10px 0 auto;
+
+    border-right: 2px solid var(--lighter-accent-color);
   }
 }

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%;
   }
 
@@ -51,7 +63,7 @@
     background-color: var(--lightest-accent-color) !important;
 
     & a {
-      color: $black;
+      color: var(--font-color);
     }
   }
 

src/newsreader/scss/components/posts-info/_posts-info.scss

@@ -10,8 +10,8 @@
   }
 
   & .badge {
-    & a {
+    & .link {
-      color: $black;
+      color: var(--font-color);
     }
   }
 }

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -5,7 +5,7 @@
   align-self: start;
 
   position: sticky;
-  top: 5%;
+  top: 50px;
 
   width: 20%;
 

src/newsreader/scss/partials/_colors.scss

@@ -25,18 +25,18 @@ $focus-blue: darken($azureish-white, +10%);
 $checkbox-blue: rgba(34, 170, 253, 1);
 
 // White theme
-$background-color: $white;
+$background-color: rgba(255, 249, 176, 1);
 
 $font-color: rgba(83, 87, 91, 1);
-$link-color: darken($azureish-white, 30%);
+$link-color: rgba(45, 142, 202, 1);
 $read-color: darken($gainsboro, 10%);
 $confirm-button-font-color: rgba(255, 255, 255, 1);
 
-$accent-color: $gainsboro;
+$accent-color: rgba(255, 171, 115, 1);
-$lighter-accent-color: $gainsboro;
+$lighter-accent-color: rgba(255, 211, 132, 1);
-$lightest-accent-color: $orange;
+$lightest-accent-color: rgba(255, 174, 192, 1);
 
-$confirm-color: rgba(89, 181, 128, 1);
+$confirm-color: rgba(117, 207, 184, 1);
 $danger-color: rgba(237, 118, 105, 1);
 $warning-color: rgba(255, 218, 119, 1);
 $info-color: rgba(162, 213, 242, 1);
@@ -51,7 +51,7 @@ $dark-confirm-button-font-color: $dark-font-color;
 
 $dark-accent-color: rgba(19, 59, 92, 1);
 $dark-lighter-accent-color: rgba(30, 95, 116, 1);
-$dark-lightest-accent-color: rgba(252, 218, 183, 1);
+$dark-lightest-accent-color: rgba(88, 61, 114, 1);
 
 $dark-confirm-color: rgba(0, 121, 101, 1);
 $dark-danger-color: rgba(175, 45, 45, 1);