From d554bf5211690856226558779ba5e082a28143cb Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Thu, 2 Mar 2017 16:03:18 -0500
Subject: [PATCH] Adding single view and restyling selected comment.

---
 .../src/containers/ModerationQueue/ModerationContainer.js    | 1 +
 .../src/containers/ModerationQueue/ModerationQueue.js        | 5 +++--
 .../src/containers/ModerationQueue/components/Comment.js     | 2 +-
 .../src/containers/ModerationQueue/components/styles.css     | 5 +++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 32a7d0200..25a7a9511 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -109,6 +109,7 @@ class ModerationContainer extends Component {
           currentAsset={asset}
           comments={comments}
           activeTab={activeTab}
+          singleView={moderation.singleView}
           selectedIndex={this.state.selectedIndex}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index e3ba12b09..58fdd1398 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -1,15 +1,16 @@
 import React, {PropTypes} from 'react';
 
 import Comment from './components/Comment';
+import styles from './components/styles.css';
 import EmptyCard from '../../components/EmptyCard';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
   return (
-    <div id="moderationList">
+    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
       {
         comments.length
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index 683a7abd4..54eac691b 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -22,7 +22,7 @@ const Comment = ({actions = [], ...props}) => {
   const actionSummaries = props.comment.action_summaries;
   return (
     <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+        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}>
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index b2d59cb1a..5a4a42cca 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -136,7 +136,7 @@ span {
     display: none;
   }
 
-  &.singleView .listItem.activeItem {
+  &.singleView .listItem.selected {
     display: block;
     height: 100%;
     font-size: 1.5em;
@@ -187,7 +187,8 @@ span {
   }
 
   &.selected {
-    box-shadow: 0px 0px 15px 5px rgb(255, 255, 111);
+    max-width: 670px;
+    max-height: 410px;
   }
 
   .context {