Update post modal & add links to badges

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

@@ -57,6 +57,27 @@ class PostModal extends React.Component {
             <h2 className={titleClassName}>{`${post.title} `}</h2>
             <div className="post__meta-info">
               <span className="post__date">{publicationDate}</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={`/core/categories/${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={`/collection/rules/${this.props.rule.id}/`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {this.props.rule.name}
+                </a>
+              </span>
               <a
                 className="post__link"
                 href={post.url}
@@ -67,13 +88,6 @@ class PostModal extends React.Component {
               </a>
             </div>
           </div>
-          <aside className="post__section-info">
-            {this.props.category && (
-              <h5 title={this.props.category.name}>{this.props.category.name}</h5>
-            )}
-
-            <h5 title={this.props.rule.name}>{this.props.rule.name}</h5>
-          </aside>
 
           {/* HTML is sanitized by the collectors */}
           <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />

src/newsreader/js/pages/homepage/components/feedlist/PostItem.js

@@ -29,7 +29,15 @@ class PostItem extends React.Component {
             {publicationDate} {post.author && `By ${post.author}`}
           </span>
           {this.props.selected.type == CATEGORY_TYPE && (
-            <span className="badge">{rule.name}</span>
+            <span className="badge">
+              <a
+                href={`/collection/rules/${rule.id}/`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {rule.name}
+              </a>
+            </span>
           )}
           <a
             className="posts-info__link"

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

@@ -41,6 +41,18 @@
     font-size: small;
   }
 
+  &__author {
+    font-size: small;
+  }
+
+  &__rule, &__category {
+    background-color: $light-orange !important;
+
+    & a {
+      color: $black;
+    }
+  }
+
   &__body {
     display:flex;
     flex-direction: column;
@@ -71,10 +83,11 @@
     position: relative;
     margin: 1% 2% 0 0;
     align-self: flex-end;
-    background-color: $gainsboro;
+    background-color: $button-blue;
+    color: $white;
 
     &:hover {
-      background-color: lighten($gainsboro, +1%);
+      background-color: lighten($button-blue, +1%);
     }
   }
 
@@ -84,36 +97,6 @@
     align-items: center;
 
     margin: 15px 0;
-  }
+    gap: 5px;
-
-  &__section-info {
-    display: flex;
-    flex-direction: column;
-
-    align-self: flex-end;
-    position: absolute;
-    top: 25%;
-    width: 10%;
-
-    color: lighten($font-color, +10%);
-
-    & h5 {
-      margin: 10px 0 0 0;
-      padding: 5px 1px 5px 5px;
-
-      background-color: aquamarine;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      text-align: center;
-    }
-
-    & h5:first-child {
-      background-color: $light-orange;
-    }
-
-    & h5:last-child {
-      background-color: $beige;
-    }
   }
 }

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

@@ -13,7 +13,9 @@
     display: inline-flex;
   }
 
-  & .gg-link {
+  & .badge {
-    transform: rotate(-45deg) scale(var(--ggs, 0.9));
+    & a {
+      color: $black;
+    }
   }
 }