From fd4c7109534e1180994697a146f6058c570214d8 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Feb 22 2018 00:01:46 +0000
Subject: make whole feed item a link


this makes the feeds use the bootstrap list-groups,
and makes the whole feed item a link to the thing that
relates to the feed item. Other links will still work inside
the item, like username urls and buttons.

fixes #562

---

diff --git a/js/app/components/feed/Feed.js b/js/app/components/feed/Feed.js
index cec079d..2313e3b 100644
--- a/js/app/components/feed/Feed.js
+++ b/js/app/components/feed/Feed.js
@@ -26,7 +26,7 @@ export default class Feed extends React.Component {
         );
     });
     return (
-      <div className="Feed">
+      <div className="Feed list-group list-group-flush">
         { (items.length === 0 && this.props.loaded) ?
           <p className="m-2">
             <FormattedMessage {...messages.no_items} tagName="i" />
diff --git a/js/app/components/feed/Icon.js b/js/app/components/feed/Icon.js
index 1c59c19..fa02d95 100644
--- a/js/app/components/feed/Icon.js
+++ b/js/app/components/feed/Icon.js
@@ -3,16 +3,15 @@ import React from 'react';
 export default class Icon extends React.Component {
   render() {
     return (
-      <a href={this.props.item.link ? this.props.item.link : '#'}
-         target="_blank"
-         className="d-flex align-self-start mr-2"
+      <div
+         className="align-self-start mr-2"
          >
         <img
           alt="User avatar"
           className="square-32 img-circle"
           src={this.props.item.secondary_icon}
         />
-      </a>
+      </div>
     );
   }
 }
diff --git a/js/app/components/feed/Panel.js b/js/app/components/feed/Panel.js
index db653b4..bcbf850 100644
--- a/js/app/components/feed/Panel.js
+++ b/js/app/components/feed/Panel.js
@@ -22,8 +22,24 @@ export default class Panel extends React.Component {
   }
 
   render() {
+    let Element, props;
+    if (this.props.item.link) {
+      Element = "a";
+      props = {
+        className: "list-group-item list-group-item-action d-flex",
+        href: this.props.item.link,
+        target: "_blank",
+      };
+    } else {
+      Element = "div";
+      props = {
+        className: "list-group-item d-flex",
+      };
+    }
     return (
-      <div className="media py-3 px-2" id={this.props.item.id}>
+      <Element {...props}
+        id={this.props.item.id}
+        >
         <Icon item={this.props.item} />
         <Markup
           {...this.props}
@@ -37,12 +53,12 @@ export default class Panel extends React.Component {
              Object.keys(this.props.item.msg_ids).length > 1) &&
             <div className="mt-auto">
               <small>
-                <button className="btn btn-link" onClick={this.toggleDetails}>details</button>
+                <button className="btn btn-link p-0" onClick={this.toggleDetails}>details</button>
               </small>
             </div>
           }
         </div>
-      </div>
+      </Element>
     );
   }