From 674585adebdae92c56f713862796993a5062a48b Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 1 Mar 2017 10:37:39 -0700 Subject: [PATCH 1/4] design updates --- .../src/containers/Dashboard/FlagWidget.js | 22 +++++---- .../src/containers/Dashboard/LikeWidget.js | 18 +++++--- .../src/containers/Dashboard/Widget.css | 46 +++++++++++++++++-- client/coral-admin/src/reducers/settings.js | 2 +- client/coral-admin/src/translations.json | 2 + 5 files changed, 68 insertions(+), 22 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 537b89b8f..5d891b3bb 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -15,28 +15,32 @@ const FlagWidget = (props) => { - {/* empty on purpose */} - + { assets.length - ? assets.map((asset, index) => { + ? assets.map(asset => { const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); return ( - - + + - ); }) - : + : }
{lang.t('streams.article')}{lang.t('modqueue.flagged')}{lang.t('dashboard.flags')}
{index + 1}.
- {asset.title} -

{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}

+ +

{asset.title}

+

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

+ + 		+ +

{flagSummary ? flagSummary.actionCount : 0}

+ 		{flagSummary ? flagSummary.actionCount : 0}
{lang.t('dashboard.no_flags')}
{lang.t('dashboard.no_flags')}
diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index ed6a0c0ae..d628c2e11 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -16,7 +16,6 @@ const LikeWidget = (props) => { - {/* empty on purpose */} @@ -24,20 +23,25 @@ const LikeWidget = (props) => { { assets.length - ? assets.map((asset, index) => { + ? assets.map(asset => { const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); return ( - + - ); }) - : + : }
{lang.t('streams.article')} {lang.t('modqueue.likes')}
{index + 1}. - {asset.title} -

{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}

+ +

{asset.title}

+

{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}

+ + 		+ +

{likeSummary ? likeSummary.actionCount : 0}

+ 		{likeSummary ? likeSummary.actionCount : 0}
{lang.t('dashboard.no_likes')}
{lang.t('dashboard.no_likes')}
diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index 624b72519..a99c2febd 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -4,10 +4,12 @@ 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 +17,62 @@ .widgetTable { width: 100%; border-collapse: collapse; - box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); + user-select: none; } .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; } -.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; } diff --git a/client/coral-admin/src/reducers/settings.js b/client/coral-admin/src/reducers/settings.js index f74eb659f..4f7d90d59 100644 --- a/client/coral-admin/src/reducers/settings.js +++ b/client/coral-admin/src/reducers/settings.js @@ -6,7 +6,7 @@ import * as actions from '../actions/settings'; // cleaner updates are planned in the future. // TODO: if there are more than two fields for the dashboard being created here, // please create a new reducer specifically for the Dashboard. -const DASHBOARD_WINDOW_MINUTES = 5; +const DASHBOARD_WINDOW_MINUTES = 105; let then = new Date(); then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES); diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index dbb3e650e..92e0cbbff 100644 --- a/client/coral-admin/src/translations.json +++ b/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": { From bbf70aedabb0afddb18f40c336a69fd214440a7c Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 1 Mar 2017 10:47:31 -0700 Subject: [PATCH 2/4] put it back to 5 minutes --- client/coral-admin/src/reducers/settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-admin/src/reducers/settings.js b/client/coral-admin/src/reducers/settings.js index 4f7d90d59..f74eb659f 100644 --- a/client/coral-admin/src/reducers/settings.js +++ b/client/coral-admin/src/reducers/settings.js @@ -6,7 +6,7 @@ import * as actions from '../actions/settings'; // cleaner updates are planned in the future. // TODO: if there are more than two fields for the dashboard being created here, // please create a new reducer specifically for the Dashboard. -const DASHBOARD_WINDOW_MINUTES = 105; +const DASHBOARD_WINDOW_MINUTES = 5; let then = new Date(); then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES); From 45b14d026dec4927addbb33d5918e227d8da68ed Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 1 Mar 2017 10:49:47 -0700 Subject: [PATCH 3/4] Added more conditional checks to exclusion --- graph/loaders/metrics.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js index 2627d82d9..a6fe5afe4 100644 --- a/graph/loaders/metrics.js +++ b/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; } From 00b2bf37eee9cdd2ff5280a507d03683ee798d6e Mon Sep 17 00:00:00 2001 From: Riley Davis Date: Wed, 1 Mar 2017 11:14:13 -0700 Subject: [PATCH 4/4] fix height of the table --- client/coral-admin/src/containers/Dashboard/FlagWidget.js | 6 +++++- client/coral-admin/src/containers/Dashboard/LikeWidget.js | 8 ++++++-- client/coral-admin/src/containers/Dashboard/Widget.css | 6 ++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/client/coral-admin/src/containers/Dashboard/FlagWidget.js b/client/coral-admin/src/containers/Dashboard/FlagWidget.js index 5d891b3bb..da71ac04a 100644 --- a/client/coral-admin/src/containers/Dashboard/FlagWidget.js +++ b/client/coral-admin/src/containers/Dashboard/FlagWidget.js @@ -40,7 +40,11 @@ const FlagWidget = (props) => { ); }) - : {lang.t('dashboard.no_flags')} + : {lang.t('dashboard.no_flags')} + } + { /* 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 ? : null } diff --git a/client/coral-admin/src/containers/Dashboard/LikeWidget.js b/client/coral-admin/src/containers/Dashboard/LikeWidget.js index d628c2e11..25e851966 100644 --- a/client/coral-admin/src/containers/Dashboard/LikeWidget.js +++ b/client/coral-admin/src/containers/Dashboard/LikeWidget.js @@ -26,7 +26,7 @@ const LikeWidget = (props) => { ? assets.map(asset => { const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); return ( - +

{asset.title}

@@ -41,7 +41,11 @@ const LikeWidget = (props) => { ); }) - : {lang.t('dashboard.no_likes')} + : {lang.t('dashboard.no_likes')} + } + { /* 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 ? : null } diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index a99c2febd..cb764d9cc 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -1,3 +1,7 @@ +:root { + --row-height: 80px; +} + .widget { box-sizing: border-box; margin: 10px 5px 5px 5px; @@ -18,6 +22,7 @@ width: 100%; border-collapse: collapse; user-select: none; + height: calc(var(--row-height) * 10); } .widgetTable thead th { @@ -35,6 +40,7 @@ cursor: pointer; border-bottom: 1px solid lightgrey; color: #555; + height: var(--row-height); } .rowLinkify:last-child {