wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-12 17:04:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

simplify dashboard table rendering

Browse Source
This commit is contained in:
Riley Davis
2017-03-08 14:51:50 -07:00
parent e4cdc73bf8
commit eaf035acd6
3 changed files with 44 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-admin/src/containers/Dashboard/FlagWidget.js
+16 -28
View File
@@ -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>
);
};
client/coral-admin/src/containers/Dashboard/LikeWidget.js
+16 -28
View File
@@ -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>
);
};
client/coral-admin/src/containers/Dashboard/Widget.css
+12 -13
View File
@@ -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;
}