Merge branch 'master' into remove-notification-warning

client/coral-admin/src/containers/Configure/Configure.css

@@ -90,6 +90,11 @@
 .configTimeoutSelect {
   display: inline-block;
   margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
 }
 
 .charCountTexfield {

client/coral-admin/src/containers/Configure/StreamSettings.js

@@ -171,6 +171,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
+      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
     </div>
   );
 };

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

@@ -12,43 +12,29 @@ const FlagWidget = (props) => {
   return (
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most flags</h2>
-      <table className={styles.widgetTable}>
-        <thead className={styles.widgetHead}>
-          <tr>
-            <th>{lang.t('streams.article')}</th>
-            <th colSpan='2'>{lang.t('dashboard.flags')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
-              return (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <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>
-                  </td>
-                  <td>
-                    <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                  </td>
-                  <td>
-                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
-                  </td>
-                </tr>
-              );
-            })
-            : <tr className={styles.rowLinkify}><td colSpan="3">{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>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.flags')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          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>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
+        }
+      </div>
     </div>
   );
 };

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

@@ -13,43 +13,29 @@ const LikeWidget = (props) => {
   return (
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most likes</h2>
-      <table className={styles.widgetTable}>
-        <thead className={styles.widgetHead}>
-          <tr>
-            <th>{lang.t('streams.article')}</th>
-            <th colSpan='2'>{lang.t('modqueue.likes')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
-              return (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <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>
-                  </td>
-                  <td>
-                    <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                  </td>
-                  <td>
-                    <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
-                  </td>
-                </tr>
-              );
-            })
-            : <tr className={styles.rowLinkify}><td colSpan="3">{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>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('modqueue.likes')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          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>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </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: 80px;
+  --row-height: 60px;
 }
 
 .widget {
@@ -11,6 +11,10 @@
   background-color: white;
 }
 
+.widget * {
+  box-sizing: border-box;
+}
+
 .heading {
   margin: 0;
   padding-left: 10px;
@@ -19,21 +23,28 @@
 }
 
 .widgetTable {
-  width: 100%;
-  border-collapse: collapse;
-  user-select: none;
   height: calc(var(--row-height) * 10);
 }
 
-.widgetTable thead th {
+.widgetTable + div:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+.widgetHead p {
   color: rgb(35, 102, 223);
   padding: 10px;
   text-align: left;
   text-transform: capitalize;
+  display: inline-block;
+  box-sizing: border-box;
+  margin-bottom: 0;
 }
 
-.widgetTable thead th:last-child {
-  width: 10%;
+.widgetHead p:last-child {
+  float: right;
+  margin-right: 100px;
 }
 
 .rowLinkify {
@@ -41,6 +52,7 @@
   border-bottom: 1px solid lightgrey;
   color: #555;
   height: var(--row-height);
+  padding: 10px;
 }
 
 .rowLinkify:last-child {
@@ -51,16 +63,8 @@
   background-color: #f8f8f8;
 }
 
-.widgetTable tbody td {
-  padding: 10px;
-}
-
-.widgetTable tbody td:last-child {
-  padding-top: 0;
-}
-
 .linkToAsset {
-  display: block;
+  display: inline-block;
   text-decoration: none;
 }
 
@@ -69,6 +73,8 @@
   padding: 10px 14px;
   text-decoration: none;
   color: black;
+  float: right;
+  margin-left: 15px;
 }
 
 .linkToModerate:hover {
@@ -96,4 +102,6 @@
   color: #555;
   font-size: 1.3em;
   font-weight: 400;
+  float: right;
+  margin-top: 7px;
 }

client/coral-admin/src/containers/Streams/Streams.js

@@ -80,8 +80,8 @@ class Streams extends Component {
       <div
         className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
         onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
         {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
+        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
       </div>
       {
         statusMenuOpen &&