design updates

This commit is contained in:
Riley Davis
2017-03-01 10:37:39 -07:00
parent a984fc9beb
commit 674585adeb
5 changed files with 68 additions and 22 deletions
@@ -15,28 +15,32 @@ const FlagWidget = (props) => {
<table className={styles.widgetTable}>
<thead className={styles.widgetHead}>
<tr>
<th></th>{/* empty on purpose */}
<th>{lang.t('streams.article')}</th>
<th>{lang.t('modqueue.flagged')}</th>
<th>{lang.t('dashboard.flags')}</th>
</tr>
</thead>
<tbody>
{
assets.length
? assets.map((asset, index) => {
? assets.map(asset => {
const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
return (
<tr key={asset.id}>
<td>{index + 1}.</td>
<tr className={styles.rowLinkify} key={asset.id}>
<td>
<Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
<p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</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>
</td>
<td>
<Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
<p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
</Link>
</td>
<td>{flagSummary ? flagSummary.actionCount : 0}</td>
</tr>
);
})
: <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
: <tr><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
}
</tbody>
</table>
@@ -16,7 +16,6 @@ const LikeWidget = (props) => {
<table className={styles.widgetTable}>
<thead className={styles.widgetHead}>
<tr>
<th></th>{/* empty on purpose */}
<th>{lang.t('streams.article')}</th>
<th>{lang.t('modqueue.likes')}</th>
</tr>
@@ -24,20 +23,25 @@ const LikeWidget = (props) => {
<tbody>
{
assets.length
? assets.map((asset, index) => {
? assets.map(asset => {
const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
return (
<tr key={asset.id}>
<td>{index + 1}.</td>
<td>
<Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
<p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</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>
</td>
<td>
<Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
<p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
</Link>
</td>
<td>{likeSummary ? likeSummary.actionCount : 0}</td>
</tr>
);
})
: <tr><td colSpan="3">{lang.t('dashboard.no_likes')}</td></tr>
: <tr><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
}
</tbody>
</table>
@@ -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;
}
+1 -1
View File
@@ -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);
+2
View File
@@ -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": {