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 (

Articles with the most flags

- - - - - - - - +
+
+

{lang.t('streams.article')}

+

{lang.t('dashboard.flags')}

+
+
{ assets.length ? assets.map(asset => { const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary'); return ( -
- - - +
+

{flagSummary ? flagSummary.actionCount : 0}

+ +

{asset.title}

+

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

+ +
); }) - : + :
{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. */ - range(10 - Math.max(assets.length, 1)).map(() => ) - } - -
{lang.t('streams.article')}{lang.t('dashboard.flags')}
- -

{asset.title}

-

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

- -
- -

{flagSummary ? flagSummary.actionCount : 0}

- -
{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 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 (

Articles with the most likes

- - - - - - - - +
+
+

{lang.t('streams.article')}

+

{lang.t('modqueue.likes')}

+
+
{ assets.length ? assets.map(asset => { const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary'); return ( -
- - - +
+

{likeSummary ? likeSummary.actionCount : 0}

+ +

{asset.title}

+

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

+ +
); }) - : + :
{lang.t('dashboard.no_likes')}
} - { /* 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(() => ) - } - -
{lang.t('streams.article')}{lang.t('modqueue.likes')}
- -

{asset.title}

-

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

- -
- -

{likeSummary ? likeSummary.actionCount : 0}

- -
{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 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; }