jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive upload list table.

Browse Source
This commit is contained in:
Jayden Seric 2017-04-09 15:14:32 +10:00
parent 67eb0d6ff7
commit 34758d7c89
1 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/components/upload-list.js
View File

@ -3,35 +3,49 @@ import uploadsQuery from '../queries/uploads'
const UploadList = ({data: {uploads}}) => {
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Path</th>
</tr>
</thead>
<tbody>
{uploads.map(({id, name, type, size, path}) => (
<tr key={id}>
<td>{name}</td>
<td>{type}</td>
<td>{size}</td>
<td>{path}</td>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Path</th>
</tr>
))}
</tbody>
</thead>
<tbody>
{uploads.map(({id, name, type, size, path}) => (
<tr key={id}>
<td>{name}</td>
<td>{type}</td>
<td>{size}</td>
<td>{path}</td>
</tr>
))}
</tbody>
</table>
<style jsx>{`
div {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
table {
border-spacing: 0;
padding: 1em 0;
text-align: left;
border-spacing: 0.75em;
font-size: 90%;
}
th,
td {
padding: 0.3em 0.5em;
}
td {
vertical-align: top;
white-space: nowrap;
}
`}</style>
</table>
</div>
)
}