less terrible looking

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -210,7 +210,7 @@ export default class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment} />
         )}
-        <StorySearch />
+        <StorySearch visible={this.props.moderation.storySearchVisible} />
       </div>
     );
   }

client/coral-admin/src/routes/Moderation/components/ModerationHeader.js

@@ -14,8 +14,8 @@ const ModerationHeader = ({asset, searchVisible, openSearch, closeSearch}) => {
     : <a className="mdl-tabs__tab" />;
 
   const title = asset
-    ? <span onClick={trigger} className="mdl-tabs__tab">{asset.title} {searchTriggerIcon}</span>
-    : <span onClick={trigger} className="mdl-tabs__tab">{t('modqueue.all_streams')} {searchTriggerIcon}</span>;
+    ? <a onClick={trigger} className="mdl-tabs__tab">{asset.title} {searchTriggerIcon}</a>
+    : <a onClick={trigger} className="mdl-tabs__tab">{t('modqueue.all_streams')} {searchTriggerIcon}</a>;
 
   return (
     <div className=''>

client/coral-admin/src/routes/Moderation/components/Story.js

@@ -1,18 +1,20 @@
 import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
 import styles from './StorySearch.css';
 
-const Story = ({author, title, createdAt, open}) => {
+const Story = ({author, title, createdAt, open, id}) => {
   return (
-    <li className={styles.story}>
+    <Link className={styles.story} to={`/admin/moderate/${id}`}>
       <p className={styles.title}>{title}</p>
       <p className={styles.meta}>
         <span className={styles.author}>By {author}</span><span className={styles.createdAt}>{createdAt}</span><span className={styles.status}>{open ? 'Open' : 'Closed'}</span>
       </p>
-    </li>
+    </Link>
   );
 };
 
 Story.propTypes = {
+  id: PropTypes.string.isRequired,
   author: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,

client/coral-admin/src/routes/Moderation/components/StorySearch.css

@@ -38,32 +38,39 @@
 
 .storyList {
   padding: 10px;
-  margin: 0;
-  list-style: none;
   border-top: 1px solid #ddd;
 }
 
 .story {
   padding: 10px;
   border-bottom: 1px solid #ddd;
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #efefef;
+  }
 }
 
 .title, .meta {
   margin: 0;
+  color: black;
 }
 
 .author, .createdAt, .status {
   display: inline-block;
   font-size: .8em;
-  color: #aaa;
 }
 
 .author {
   display: inline-block;
   width: 200px;
+  color: #aaa;
 }
 
 .createdAt {
   display: inline-block;
   width: 200px;
+  color: #aaa;
 }

client/coral-admin/src/routes/Moderation/components/StorySearch.js

@@ -10,6 +10,10 @@ const StorySearch = (props) => {
     data: {loading}
   } = props;
 
+  if (!props.visible) {
+    return null;
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.positionShim}>
@@ -19,7 +23,7 @@ const StorySearch = (props) => {
         </div>
         <div className={styles.results}>
           <p className={styles.cta}>Moderate comments on All Stories</p>
-          <ul className={styles.storyList}>
+          <div className={styles.storyList}>
             {
               loading
               ? <Spinner />
@@ -27,13 +31,14 @@ const StorySearch = (props) => {
                 const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
                 return <Story
                   key={i}
+                  id={story.id}
                   title={story.title}
                   createdAt={new Date(story.created_at).toISOString()}
                   open={storyOpen}
                   author={story.author} />;
               })
             }
-          </ul>
+          </div>
         </div>
       </div>
     </div>

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -471,5 +471,4 @@ span {
 .searchTrigger {
   position: relative;
   top: .3em;
-  background-color: blue;
 }