hook multifile to ui
This commit is contained in:
parent
e42ad175db
commit
c9ae76b209
77 changed files with 1528 additions and 1111 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue