Re-factor the post-list "details" section (change to list, add bullets via css)

Author: eyalroth

src/components/PostListItem/index.jsx

@@ -7,32 +7,8 @@ import './style.scss'
 class PostListItem extends React.Component {
   render() {
     const { showYear } = this.props
-    const {
-      title,
-      date,
-    } = this.props.data.node.frontmatter
+    const { title, date, tags } = this.props.data.node.frontmatter
     const { slug } = this.props.data.node.fields
-    
-    const readingTime = <span key="readingTime">
-      {this.props.data.node.fields.readingTime.text}
-    </span>
-
-    var tags =  this.props.data.node.frontmatter.tags
-    if (tags != null) {
-      tags = tags.map (tag => (
-        [<span key={tag}>
-            {tag}
-        </span>,
-        <span key={`${tag}-div`} className="tagDivider">&#183;</span>]
-      ))
-      
-      tags = [].concat(...tags).slice(0, -1)
-
-      tags = [
-        <span key="tagsDivider" className="divider"/>,
-        tags
-      ]
-    }
 
     const itemDate = moment(date)
 
@@ -61,19 +37,33 @@ class PostListItem extends React.Component {
         </Toggle>
     )
 
+    const detailsHeader = (
+      <div className="post-item__details-header">
+        <Link to={slug}>
+          {title}
+        </Link>
+      </div>
+    )
+
+    const detailsFooter = (
+      <ul className="post-item__details-footer">
+        <li className="post-item__details-footer-reading-time" key="readingTime">
+          {this.props.data.node.fields.readingTime.text}
+        </li>
+        {tags && <li className="post-item__details-footer-tags-divider" key="divider"/>}
+        {tags && tags.map(tag => (
+          <li className="post-item__details-footer-tags-item" key={tag}>
+            {tag}
+          </li>
+        ))}
+      </ul>
+    )
+
     const details = (
       <Toggle isEnabled={!this.props.isFirst}>
         <div className="post-item__details">
-          <header>
-            <Link to={slug}>
-              {title}
-            </Link>
-          </header>
-          
-          <footer>
-            {readingTime}
-            {tags}
-          </footer>
+          {detailsHeader}
+          {detailsFooter}
         </div>
       </Toggle>
     )

src/components/PostListItem/style.scss

@@ -25,20 +25,33 @@ $border-styling: dashed 1px $color-gray-border;
         }
     }
     &__details {
-        & header {
+        &-header {
             font-size: $typographic-base-font-size * 1.3;
             max-width: 70%;
         }
-        & footer {
+        &-footer {
             font-size: $typographic-small-font-size;
+            list-style: none;
             max-width: 75%;
-            word-break: break-all;
-            & .divider {
+            
+            margin: 0;
+            padding: 0;
+            &>* {
+                display: inline-block;
+                margin: 0;
+                padding: 0;
+            }
+            
+            &-tags-divider {
+                border-left: 1px solid $color-gray-border;
+                height: 1rem;
                 margin-right: 0.8125rem;
                 margin-left: 0.8125rem;
-                border-left: 0.075rem solid $color-gray-border;
+                align-self: center;
             }
-            & .tagDivider {
+            
+            &-tags-item:not(:last-child)::after {
+                content: "\00B7";
                 margin-right: 0.3125rem;
                 margin-left: 0.3125rem;
             }
@@ -104,12 +117,12 @@ $border-styling: dashed 1px $color-gray-border;
                 border-top: $border-styling;
             }
 
-            & header {
+            &-header {
                 margin-bottom: 0.2rem;
                 font-size: $typographic-base-font-size * 1.4;
                 max-width: unset;
             }
-            & footer {
+            &-footer {
                 max-width: unset;
             }
         }