hook multifile to ui

This commit is contained in:
Emily 2018-07-31 11:09:18 -07:00
parent e42ad175db
commit c9ae76b209
77 changed files with 1528 additions and 1111 deletions

View file

@ -1,52 +1,21 @@
.fileList {
margin: 45.3px auto;
table-layout: fixed;
border-collapse: collapse;
position: absolute;
bottom: 0;
list-style-type: none;
margin: 0;
padding: 3px;
font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
width: 262px;
max-height: 80%;
overflow-y: scroll;
overflow-x: hidden;
}
.fileList__header {
font-size: 16px;
color: var(--lightTextColor);
font-weight: lighter;
text-align: left;
background: rgba(0, 148, 251, 0.05);
height: 40px;
border-top: 1px solid rgba(0, 148, 251, 0.1);
padding: 0 19px;
white-space: nowrap;
}
.fileList__body {
word-wrap: break-word;
word-break: break-all;
}
.fileList__nameCol {
width: 35%;
}
.fileList__copyCol {
text-align: center;
width: 25%;
}
.fileList__expireCol {
width: 25%;
}
.fileList__dlCol {
width: 8%;
}
.fileList__delCol {
text-align: center;
width: 7%;
}
@media (max-device-width: 520px), (max-width: 520px) {
.fileList__header {
font-size: 14px;
padding: 0 5px;
@media (max-device-width: 750px), (max-width: 750px) {
.fileList {
position: static;
width: 400px;
max-height: 200px;
margin: 6px 0 0 -3px;
}
}

View file

@ -1,33 +1,12 @@
const html = require('choo/html');
const file = require('../file');
module.exports = function(state, emit) {
module.exports = function(state) {
if (state.storage.files.length) {
return html`
<table class="fileList">
<thead>
<tr>
<th class="fileList__header fileList__nameCol">
${state.translate('uploadedFile')}
</th>
<th class="fileList__header fileList__copyCol">
${state.translate('copyFileList')}
</th>
<th class="fileList__header fileList__expireCol" >
${state.translate('timeFileList')}
</th>
<th class="fileList__header fileList__dlCol" >
${state.translate('downloadsFileList')}
</th>
<th class="fileList__header fileList__delCol">
${state.translate('deleteFileList')}
</th>
</tr>
</thead>
<tbody class="fileList__body">
${state.storage.files.map(f => file(f, state, emit))}
</tbody>
</table>
<ul class="fileList">
${state.storage.files.map(f => file(f, state))}
</ul>
`;
}
};