Style and functionality

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

@@ -34,12 +34,10 @@ export default class Moderation extends Component {
   }
 
   closeSearch = () => {
-    console.log('closeSearch');
     this.props.toggleStorySearch(false);
   }
 
   openSearch = () => {
-    console.log('openSearch');
     this.props.toggleStorySearch(true);
   }
 
@@ -210,7 +208,7 @@ export default class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment} />
         )}
-        <StorySearch visible={this.props.moderation.storySearchVisible} />
+        <StorySearch visible={this.props.moderation.storySearchVisible} closeSearch={this.closeSearch}/>
       </div>
     );
   }

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

@@ -1,15 +1,21 @@
 import React, {PropTypes} from 'react';
-import {Link} from 'react-router';
 import styles from './StorySearch.css';
 
-const Story = ({author, title, createdAt, open, id}) => {
+const formatDate = (date) => {
+  const d = new Date(date);
+  return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
+};
+
+const Story = ({author, title, createdAt, open, id, goToStory}) => {
   return (
-    <Link className={styles.story} to={`/admin/moderate/${id}`}>
+    <li className={styles.story} onClick={() => goToStory(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>
+        <span className={styles.author}>By {author}</span>
+        <span className={styles.createdAt}>{formatDate(createdAt)}</span>
+        <span className={styles.status}>{open ? 'Open' : 'Closed'}</span>
       </p>
-    </Link>
+    </li>
   );
 };
 

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

@@ -1,5 +1,5 @@
 .container {
-  position: fixed;
+  position: absolute;
   background-color: white;
   top: 100px;
   left: 0;
@@ -8,6 +8,8 @@
   margin-right: auto;
   width: 50%;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  z-index: 100;
+  max-width: 820px;
 }
 
 .positionShim {
@@ -16,7 +18,9 @@
 
 .headInput {
   background-color: #efefef;
-  padding: 10px 30px;
+  padding: 17px 56px;
+  height: 80px;
+  box-sizing: border-box;
 }
 
 .searchInput {
@@ -27,26 +31,34 @@
   margin-right: 10px;
   position: relative;
   top: 2px;
+  box-sizing: border-box;
+  border-radius: 3px;
+  border: solid 1px #dfdfdf;
+  max-height: 45px;
+  max-width: 600px;
 }
 
 .cta {
-  padding: 15px;
+  padding: 32px 30px;
+  letter-spacing: 1px;
   font-weight: bold;
-  font-size: 14px;
+  font-size: 17px;
   margin: 0;
+  height: 74px;
+  box-sizing: border-box;
 }
 
 .storyList {
-  padding: 10px;
   border-top: 1px solid #ddd;
 }
 
 .story {
-  padding: 10px;
+  padding: 10px 63px;
   border-bottom: 1px solid #ddd;
   cursor: pointer;
   display: block;
   text-decoration: none;
+  height: 66px;
 
   &:hover {
     background-color: #efefef;
@@ -56,13 +68,20 @@
 .title, .meta {
   margin: 0;
   color: black;
+  font-size: 17px;
+  /* margin: 0 0 -4px; */
 }
 
 .author, .createdAt, .status {
+  font-size: 17px;
   display: inline-block;
   font-size: .8em;
 }
 
+.createdAt {
+  text-align: center;
+}
+
 .author {
   display: inline-block;
   width: 200px;
@@ -74,3 +93,29 @@
   width: 200px;
   color: #aaa;
 }
+
+.searchButton {
+  width: 90px;
+  height: 35px;
+}
+
+.recentStories {
+  padding: 10px 24px;
+}
+
+.recentStories i {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.accessStories {
+  font-size: 18px;
+}
+
+.headlineRecent {
+  font-size: 17px;
+  font-weight: 500;
+  padding: 17px;
+  letter-spacing: 0.7px;
+}
+

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

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
 import styles from './StorySearch.css';
-import {Button, Spinner} from 'coral-ui';
+import {Button, Spinner, Icon} from 'coral-ui';
+import {withRouter} from 'react-router';
 import Story from './Story';
 
 const StorySearch = (props) => {
@@ -14,16 +15,25 @@ const StorySearch = (props) => {
     return null;
   }
 
+  const goToStory = (id) => {
+    props.router.push(`/admin/moderate/${id}`);
+    props.closeSearch();
+  };
+  
   return (
     <div className={styles.container}>
       <div className={styles.positionShim}>
         <div className={styles.headInput}>
           <input className={styles.searchInput} onChange={props.storySearchChange} />
-          <Button cStyle='facebook'>Search</Button>
+          <Button cStyle='blue' className={styles.searchButton} raised>Search</Button>
         </div>
         <div className={styles.results}>
           <p className={styles.cta}>Moderate comments on All Stories</p>
           <div className={styles.storyList}>
+            <div className={styles.recentStories}>
+              <Icon name="access_time" />
+              <span className={styles.headlineRecent}>Most Recent Stories</span>
+            </div>
             {
               loading
               ? <Spinner />
@@ -35,7 +45,9 @@ const StorySearch = (props) => {
                   title={story.title}
                   createdAt={new Date(story.created_at).toISOString()}
                   open={storyOpen}
-                  author={story.author} />;
+                  author={story.author}
+                  goToStory={goToStory}
+                />;
               })
             }
           </div>
@@ -49,4 +61,4 @@ StorySearch.propTypes = {
   storySearchChange: PropTypes.func.isRequired
 };
 
-export default StorySearch;
+export default withRouter(StorySearch);

client/coral-ui/components/Button.css

@@ -84,6 +84,16 @@
   background: #4f5c67;
 }
 
+.type--blue {
+    color: white;
+    background: #083b97;
+}
+
+.type--blue:hover {
+    color: white;
+    background: #083b97;
+}
+
 .type--darkGrey {
   color: white;
   background: #616161;

views/admin.ejs

@@ -29,6 +29,11 @@
         background-color: #FAFAFA;
         font-family: 'Roboto', sans-serif;
       }
+
+      #root > div {
+        height: 100%;
+      }
+
       /* putting this here until I can get webpack to behave */
       .react-tagsinput {
         background-color: #fff;