From e578f901b2c01cf463b4420a03f8334c32154c79 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 7 Mar 2017 13:38:01 -0700
Subject: [PATCH 1/5] fix some firefox display things

---
 .../coral-admin/src/containers/Configure/StreamSettings.js   | 1 +
 client/coral-admin/src/containers/Dashboard/FlagWidget.js    | 3 ++-
 client/coral-admin/src/containers/Dashboard/LikeWidget.js    | 5 +++--
 client/coral-admin/src/containers/Dashboard/Widget.css       | 4 ++++
 client/coral-admin/src/containers/Streams/Streams.js         | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js
index 5530bc6cd..f77013bc0 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/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>
   );
 };
diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index da71ac04a..5ce93f11b 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
+import range from 'lodash/range';
 
 const lang = new I18n(translations);
 
@@ -44,7 +45,7 @@ const FlagWidget = (props) => {
           }
           { /* 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
+            range(10 - Math.max(assets.length, 1)).map(() => <tr className={styles.emptyRow}></tr>)
           }
         </tbody>
       </table>
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 25e851966..39ee708f8 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
+import range from 'lodash/range';
 
 const lang = new I18n(translations);
 
@@ -44,8 +45,8 @@ const LikeWidget = (props) => {
             : <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
+                put in some extra rows. */
+            range(10 - Math.max(assets.length, 1)).map(() => <tr className={styles.emptyRow}></tr>)
           }
         </tbody>
       </table>
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index cb764d9cc..96c773bef 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -43,6 +43,10 @@
   height: var(--row-height);
 }
 
+.emptyRow {
+  height: var(--row-height);
+}
+
 .rowLinkify:last-child {
   border-bottom: none;
 }
diff --git a/client/coral-admin/src/containers/Streams/Streams.js b/client/coral-admin/src/containers/Streams/Streams.js
index 96130fcba..bd5ce6e85 100644
--- a/client/coral-admin/src/containers/Streams/Streams.js
+++ b/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 &&

From e4cdc73bf82569a55f4100e5a825e05e79c8123d Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 8 Mar 2017 13:53:39 -0700
Subject: [PATCH 2/5] fix for react-mdn-selectfield in FF

---
 client/coral-admin/src/containers/Configure/Configure.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 6cb623978..b1b1ebbaf 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/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 {

From eaf035acd6ae4ccd1f065acd223a4cb06abd02d5 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 8 Mar 2017 14:51:50 -0700
Subject: [PATCH 3/5] simplify dashboard table rendering

---
 .../src/containers/Dashboard/FlagWidget.js    | 44 +++++++------------
 .../src/containers/Dashboard/LikeWidget.js    | 44 +++++++------------
 .../src/containers/Dashboard/Widget.css       | 25 +++++------
 3 files changed, 44 insertions(+), 69 deletions(-)

diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index 5ce93f11b..48f39fc9e 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -13,42 +13,30 @@ 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>{lang.t('dashboard.flags')}</th>
-          </tr>
-        </thead>
-        <tbody>
+      <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 (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <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>
-                </tr>
+                <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>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
+            : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
           }
-          { /* rows in a table with a fixed height will expand and ignore height.
-                this extra row will expand to fill the extra space. */
-            range(10 - Math.max(assets.length, 1)).map(() => <tr className={styles.emptyRow}></tr>)
-          }
-        </tbody>
-      </table>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index 39ee708f8..e627daece 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -14,42 +14,30 @@ 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>{lang.t('modqueue.likes')}</th>
-          </tr>
-        </thead>
-        <tbody>
+      <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 (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <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>
-                </tr>
+                <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>
               );
             })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
+            : <div className={styles.rowLinkify}>{lang.t('dashboard.no_likes')}</div>
           }
-          { /* rows in a table with a fixed height will expand and ignore height.
-                put in some extra rows. */
-            range(10 - Math.max(assets.length, 1)).map(() => <tr className={styles.emptyRow}></tr>)
-          }
-        </tbody>
-      </table>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index 96c773bef..16f86336b 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -1,5 +1,5 @@
 :root {
-  --row-height: 80px;
+  --row-height: 50px;
 }
 
 .widget {
@@ -19,20 +19,25 @@
 }
 
 .widgetTable {
-  width: 100%;
-  border-collapse: collapse;
   user-select: none;
   height: calc(var(--row-height) * 10);
 }
 
-.widgetTable thead th {
+.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 {
+.widgetHead p:first-child {
+  width: 90%;
+}
+
+.widgetHead p:last-child {
   width: 10%;
 }
 
@@ -41,10 +46,7 @@
   border-bottom: 1px solid lightgrey;
   color: #555;
   height: var(--row-height);
-}
-
-.emptyRow {
-  height: var(--row-height);
+  padding: 10px;
 }
 
 .rowLinkify:last-child {
@@ -55,10 +57,6 @@
   background-color: #f8f8f8;
 }
 
-.widgetTable tbody td {
-  padding: 10px;
-}
-
 .linkToAsset {
   display: block;
   text-decoration: none;
@@ -85,4 +83,5 @@
   color: #555;
   font-size: 1.3em;
   font-weight: 400;
+  float: right;
 }

From b34758e8cce417ac96d3e25d8cf9813a070e27ff Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 8 Mar 2017 14:59:55 -0700
Subject: [PATCH 4/5] unused vars

---
 client/coral-admin/src/containers/Dashboard/FlagWidget.js | 1 -
 client/coral-admin/src/containers/Dashboard/LikeWidget.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index 48f39fc9e..aab70ddaf 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -3,7 +3,6 @@ import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
-import range from 'lodash/range';
 
 const lang = new I18n(translations);
 
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index e627daece..9c72be02e 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -3,7 +3,6 @@ import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
-import range from 'lodash/range';
 
 const lang = new I18n(translations);
 

From 0db92974c4ff100131ed64024656c913e28a78d1 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 9 Mar 2017 11:05:18 -0700
Subject: [PATCH 5/5] make only the title clickable

---
 client/coral-admin/src/containers/Dashboard/FlagWidget.js | 2 +-
 client/coral-admin/src/containers/Dashboard/LikeWidget.js | 2 +-
 client/coral-admin/src/containers/Dashboard/Widget.css    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
index 6412df7f0..7d2ffe17a 100644
--- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js
@@ -27,8 +27,8 @@ const FlagWidget = (props) => {
                 <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>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );
           })
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
index d01259c5d..436fbcaf3 100644
--- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js
+++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js
@@ -28,8 +28,8 @@ const LikeWidget = (props) => {
                 <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>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
               </div>
             );
           })
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css
index db4041dbd..124663cea 100644
--- a/client/coral-admin/src/containers/Dashboard/Widget.css
+++ b/client/coral-admin/src/containers/Dashboard/Widget.css
@@ -64,7 +64,7 @@
 }
 
 .linkToAsset {
-  display: block;
+  display: inline-block;
   text-decoration: none;
 }