Merge pull request #379 from coralproject/140895223

Stories and Moderate on individual steam comment components

client/coral-admin/src/components/BanUserButton.css

@@ -5,7 +5,7 @@
 
   i {
     vertical-align: middle;
-    margin-right: 10px;
+    margin-right: 5px;
     font-size: 14px;
   }
 }

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;

client/coral-plugin-best/BestButton.js

@@ -18,6 +18,7 @@ const lang = new I18n(translations);
 const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some(role => roles.includes(role));
 
 // Put this on a comment to show that it is best
+
 export const BestIndicator = ({children = <Icon name='star'/>}) => (
   <span aria-label={lang.t('commentIsBest')}>
     { children }

client/coral-ui/components/Button.css

@@ -166,18 +166,18 @@
 .type--ban {
   display: block;
   color: #616161;
-  border: solid 2px rgba(97, 97, 97, 0.77);
+  border: solid 1px rgba(97, 97, 97, 0.77);
   background: white;
-  padding: 10px 12px;
   box-sizing: border-box;
   vertical-align: middle;
   line-height: 24px;
-  font-size: 17px;
-  height: 47px;
   border-radius: 3px;
   text-transform: capitalize;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
-  width: 128px;
+  padding: 0 8px;
+  height: 34px;
+  font-size: 14px;
+  width: auto;
 
 &:hover {
    box-shadow: none;