feat(ui): display article category

ncarlier · Jun 11, 2019 · 94dc92e · 94dc92e
1 parent 208d451
commit 94dc92e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/ui/src/articles/components/ArticleCard.module.css b/ui/src/articles/components/ArticleCard.module.css
@@ -16,6 +16,12 @@
   flex: 1;
   padding: 1em 1em 0em 1em;
 }
+.content > h3 {
+  margin: 0;
+  font-size: small;
+  font-variant: all-small-caps;
+  font-weight: normal;
+}
 .content > header {
   color: black;
   font-size: larger;

diff --git a/ui/src/articles/components/ArticleCard.tsx b/ui/src/articles/components/ArticleCard.tsx
@@ -42,6 +42,7 @@ export default withRouter((props: AllProps) => {
         </Link>
       )}
       <Link to={readMorePath} title={'View details' + kbs} className={styles.content}>
+        {article.category && <h3>{article.category.title}</h3>}
         <header>{article.title}</header>
         {article.text && <p>{article.text}</p>}
       </Link>

diff --git a/ui/src/articles/components/ArticleHeader.module.css b/ui/src/articles/components/ArticleHeader.module.css
@@ -25,8 +25,8 @@
   color: black;
 }
 
-.header > h1 > small a:before {
-  content: "-";
+.header > h1 > small a:after {
+  content: "•";
   padding: 0 .5em;
 }
 

diff --git a/ui/src/articles/components/ArticleHeader.tsx b/ui/src/articles/components/ArticleHeader.tsx
@@ -18,15 +18,7 @@ type AllProps = Props
 export default ({ article, to, children }: AllProps) => (
   <header className={styles.header}>
     <h1>
-      <small>
-        <TimeAgo dateTime={article.created_at} />
-        {article.url != '' && (
-          <a href={article.url} target="_blank" rel="noopener noreferrer" title="Open original article">
-            {new URL(article.url).hostname}
-            <Icon name="open_in_new" />
-          </a>
-        )}
-      </small>
+      {article.category && <small>{article.category.title}</small>}
       <span>
         {to ? (
           <Link to={to} title="View details">
@@ -36,6 +28,15 @@ export default ({ article, to, children }: AllProps) => (
           article.title
         )}
       </span>
+      <small>
+        {article.url != '' && (
+          <a href={article.url} target="_blank" rel="noopener noreferrer" title="Open original article">
+            {new URL(article.url).hostname}
+            <Icon name="open_in_new" />
+          </a>
+        )}
+        <TimeAgo dateTime={article.created_at} />
+      </small>
     </h1>
     <div className={styles.actions}>{children}</div>
   </header>