add moderate button

client/coral-admin/src/containers/Dashboard/FlagWidget.js

@@ -12,29 +12,28 @@ const FlagWidget = (props) => {
   return (
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most flags</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.flags')}</p>
+      </div>
       <div className={styles.widgetTable}>
-        <div className={styles.widgetHead}>
-          <p>{lang.t('streams.article')}</p>
-          <p>{lang.t('dashboard.flags')}</p>
-        </div>
-        <div>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                  <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                    <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                  </Link>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
-          }
-        </div>
+        {
+          assets.length
+          ? assets.map(asset => {
+            const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                </Link>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
+        }
       </div>
     </div>
   );

client/coral-admin/src/containers/Dashboard/LikeWidget.js

@@ -13,29 +13,28 @@ const LikeWidget = (props) => {
   return (
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most likes</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('modqueue.likes')}</p>
+      </div>
       <div className={styles.widgetTable}>
-        <div className={styles.widgetHead}>
-          <p>{lang.t('streams.article')}</p>
-          <p>{lang.t('modqueue.likes')}</p>
-        </div>
-        <div>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                  <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                    <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                  </Link>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{lang.t('dashboard.no_likes')}</div>
-          }
-        </div>
+        {
+          assets.length
+          ? assets.map(asset => {
+            const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+                </Link>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_likes')}</div>
+        }
       </div>
     </div>
   );

client/coral-admin/src/containers/Dashboard/Widget.css

@@ -1,5 +1,5 @@
 :root {
-  --row-height: 50px;
+  --row-height: 60px;
 }
 
 .widget {
@@ -11,6 +11,10 @@
   background-color: white;
 }
 
+.widget * {
+  box-sizing: border-box;
+}
+
 .heading {
   margin: 0;
   padding-left: 10px;
@@ -19,10 +23,15 @@
 }
 
 .widgetTable {
-  user-select: none;
   height: calc(var(--row-height) * 10);
 }
 
+.widgetTable + div:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
 .widgetHead p {
   color: rgb(35, 102, 223);
   padding: 10px;
@@ -33,12 +42,9 @@
   margin-bottom: 0;
 }
 
-.widgetHead p:first-child {
-  width: 90%;
-}
-
 .widgetHead p:last-child {
-  width: 10%;
+  float: right;
+  margin-right: 100px;
 }
 
 .rowLinkify {
@@ -62,6 +68,19 @@
   text-decoration: none;
 }
 
+.linkToModerate {
+  background-color: #e0e0e0;
+  padding: 10px 14px;
+  text-decoration: none;
+  color: black;
+  float: right;
+  margin-left: 15px;
+}
+
+.linkToModerate:hover {
+  background-color: #ccc;
+}
+
 .lede {
   font-size: 0.9em;
   color: #aaa;
@@ -84,4 +103,5 @@
   font-size: 1.3em;
   font-weight: 400;
   float: right;
+  margin-top: 7px;
 }