Merge pull request #356 from coralproject/make-links-less-linky

Make links less linky

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

@@ -15,28 +15,36 @@ const FlagWidget = (props) => {
       <table className={styles.widgetTable}>
         <thead className={styles.widgetHead}>
           <tr>
-            <th></th>{/* empty on purpose */}
             <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('modqueue.flagged')}</th>
+            <th>{lang.t('dashboard.flags')}</th>
           </tr>
         </thead>
         <tbody>
           {
             assets.length
-            ? assets.map((asset, index) => {
+            ? assets.map(asset => {
               const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
               return (
-                <tr key={asset.id}>
-                  <td>{index + 1}.</td>
+                <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
-                    <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</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>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                      <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                    </Link>
                   </td>
-                  <td>{flagSummary ? flagSummary.actionCount : 0}</td>
                 </tr>
               );
             })
-            : <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
+          }
+          { /* rows in a table with a fixed height will expand and ignore height.
+                this extra row will expand to fill the extra space. */
+            assets.length < 10 ? <tr></tr> : null
           }
         </tbody>
       </table>

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

@@ -16,7 +16,6 @@ const LikeWidget = (props) => {
       <table className={styles.widgetTable}>
         <thead className={styles.widgetHead}>
           <tr>
-            <th></th>{/* empty on purpose */}
             <th>{lang.t('streams.article')}</th>
             <th>{lang.t('modqueue.likes')}</th>
           </tr>
@@ -24,20 +23,29 @@ const LikeWidget = (props) => {
         <tbody>
           {
             assets.length
-            ? assets.map((asset, index) => {
+            ? assets.map(asset => {
               const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
               return (
-                <tr key={asset.id}>
-                  <td>{index + 1}.</td>
+                <tr className={styles.rowLinkify} key={asset.id}>
                   <td>
-                    <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
-                    <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</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>
+                  </td>
+                  <td>
+                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
+                      <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                    </Link>
                   </td>
-                  <td>{likeSummary ? likeSummary.actionCount : 0}</td>
                 </tr>
               );
             })
-            : <tr><td colSpan="3">{lang.t('dashboard.no_likes')}</td></tr>
+            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
+          }
+          { /* rows in a table with a fixed height will expand and ignore height.
+                this extra row will expand to fill the extra space. */
+            assets.length < 10 ? <tr></tr> : null
           }
         </tbody>
       </table>

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

@@ -1,13 +1,19 @@
+:root {
+  --row-height: 80px;
+}
+
 .widget {
   box-sizing: border-box;
   margin: 10px 5px 5px 5px;
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
   padding: 15px;
   flex: 1;
+  background-color: white;
 }
 
 .heading {
   margin: 0;
+  padding-left: 10px;
   font-size: 1.5rem;
   font-weight: bold;
 }
@@ -15,28 +21,64 @@
 .widgetTable {
   width: 100%;
   border-collapse: collapse;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  user-select: none;
+  height: calc(var(--row-height) * 10);
 }
 
 .widgetTable thead th {
-  border-bottom: 1px solid #f47e6b;
+  color: rgb(35, 102, 223);
   padding: 10px;
   text-align: left;
+  text-transform: capitalize;
 }
 
-.widgetTable tbody tr {
+.widgetTable thead th:last-child {
+  width: 10%;
+}
+
+.rowLinkify {
+  cursor: pointer;
   border-bottom: 1px solid lightgrey;
+  color: #555;
+  height: var(--row-height);
 }
 
-.widgetTable tbody tr:last-child {
+.rowLinkify:last-child {
   border-bottom: none;
 }
 
+.rowLinkify:hover {
+  background-color: #f8f8f8;
+}
+
 .widgetTable tbody td {
   padding: 10px;
 }
 
+.linkToAsset {
+  display: block;
+  text-decoration: none;
+}
+
 .lede {
   font-size: 0.9em;
-  color: grey;
+  color: #aaa;
+}
+
+.assetTitle {
+  color: #555;
+  text-decoration: none;
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.assetTitle:hover {
+  text-decoration: underline;
+}
+
+.widgetCount {
+  color: #555;
+  font-size: 1.3em;
+  font-weight: 400;
 }

client/coral-admin/src/translations.json

@@ -112,6 +112,7 @@
     "dashboard": {
       "no_flags": "There have been no flags in the last 5 minutes! Hooray!",
       "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
+      "flags": "Flags",
       "comment_count": "comments"
     },
     "streams": {
@@ -222,6 +223,7 @@
     "dashbord": {
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
       "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
+      "flags": "Marcados",
       "comment_count": "comentarios"
     },
     "streams": {

graph/loaders/metrics.js

@@ -54,7 +54,7 @@ const getAssetMetrics = ({loaders: {Metrics, Assets, Comments}}, {from, to, sort
 
       .filter((asset) => {
         let contextActionSummary = asset.action_summaries.find((({action_type}) => action_type === sort));
-        if (contextActionSummary === null) {
+        if (contextActionSummary === null || contextActionSummary.actionCount === 0) {
           return false;
         }