Merge branch 'master' into keyboard-shortcuts

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -21,49 +21,51 @@ const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
   const actionSummaries = props.comment.action_summaries;
   return (
-    <li tabIndex={props.index}
-        className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{props.comment.user.name}</span>
+          <div className={styles.author}>
+          <span>
+            {props.comment.user.name}
+          </span>
           <span className={styles.created}>
-              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
-            </span>
+            {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+          </span>
           <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id)} />
           <CommentType type={props.commentType} />
         </div>
-        <div className={styles.sideActions}>
-          {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-          <div className={`actions ${styles.actions}`}>
-            {actions.map((action, i) =>
-              <ActionButton key={i}
-                            type={action}
-                            user={props.comment.user}
-                            acceptComment={() => props.acceptComment({commentId: props.comment.id})}
-                            rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-              />
-            )}
-          </div>
           {props.comment.user.status === 'banned' ?
             <span className={styles.banned}>
-                <Icon name='error_outline'/>
+              <Icon name='error_outline'/>
               {lang.t('comment.banned_user')}
-              </span>
+            </span>
             : null}
         </div>
-      </div>
-        {!props.currentAsset && (
-          <div className={styles.moderateArticle}>
-            Story: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
-          </div>
-        )}
+        <div className={styles.moderateArticle}>
+          Story: {props.comment.asset.title}
+          {!props.currentAsset && (
+            <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+          )}
+        </div>
         <div className={styles.itemBody}>
           <p className={styles.body}>
             <Linkify component='span' properties={{style: linkStyles}}>
               <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
             </Linkify>
           </p>
+          <div className={styles.sideActions}>
+            {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
+            <div className={`actions ${styles.actions}`}>
+              {actions.map((action, i) =>
+                <ActionButton key={i}
+                              type={action}
+                              user={props.comment.user}
+                              acceptComment={() => props.acceptComment({commentId: props.comment.id})}
+                              rejectComment={() => props.rejectComment({commentId: props.comment.id})}
+                />
+              )}
+            </div>
+          </div>
         </div>
       </div>
       {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}

client/coral-admin/src/containers/ModerationQueue/components/CommentType.css

@@ -4,12 +4,12 @@
   top: 11px;
   color: white;
   background: grey;
-  padding: 2px 13px;
-  font-size: 14px;
   height: 32px;
   box-sizing: border-box;
   line-height: 29px;
-  padding-left: 26px;
+  padding: 2px 8px 2px 26px;
+  border-radius: 2px;
+  font-size: 12px;
 
   i {
     font-size: 14px;

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -147,7 +147,6 @@ span {
       position: fixed;
       bottom: 60px;
       left: 25%;
-      margin: 0 auto;
       display: flex;
       justify-content: space-around;
       width: 50%;
@@ -169,13 +168,12 @@ span {
   margin: 0 auto;
   position: relative;
   transition: all 200ms;
-  margin-top: 0;
-  padding: 4px 0 0;
+  padding: 10px 0 0;
   min-height: 220px;
 
   .container {
     padding: 0 14px;
-    min-height: 220px;
+    min-height: 180px;
   }
 
   &:hover {
@@ -200,11 +198,8 @@ span {
   }
 
    .sideActions {
-     position: absolute;
-     right: 0;
      height: 100%;
      top: 0;
-     padding: 100px 12px 65px;
      box-sizing: border-box;
    }
 
@@ -214,6 +209,7 @@ span {
     justify-content: space-between;
 
     .author {
+      font-weight: 600;
       min-width: 230px;
       display: flex;
       align-items: center;
@@ -223,8 +219,9 @@ span {
   .itemBody {
     display: flex;
     justify-content: space-between;
-    margin-top: 15px;
-    font-size: 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 300;
   }
 
   .avatar {
@@ -241,6 +238,7 @@ span {
     color: #666;
     font-size: 13px;
     margin-left: 15px;
+    line-height: 1px;
   }
 
   .actionButton {
@@ -251,10 +249,10 @@ span {
   .body {
     margin-top: 0px;
     flex: 1;
-    font-size: 0.88em;
     color: black;
     max-width: 500px;
     word-wrap: break-word;
+    font-weight: 300;
   }
 
   .flagged {
@@ -324,9 +322,12 @@ span {
 .Comment {
 
   .moderateArticle {
-    font-size: 15px;
-    margin-top: 14px;
+    font-size: 14px;
+    margin: 10px 0;
     font-weight: 500;
+    line-height: 1.2;
+    max-width: 500px;
+
     a {
       display: inline-block;
       color: #063b9a;