serv/dufs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: reactive webpage (#51)

Browse source
This commit is contained in:
Joe Koop 2022-06-19 09:04:59 -05:00 committed by GitHub
parent db71f75236
commit b1b0fdd4db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/index.css
View file

@ -4,10 +4,6 @@ html {
color: #24292e; color: #24292e;
} }
body {
width: 700px;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -151,10 +147,10 @@ body {
height: 100%; height: 100%;
fill: rgba(3,47,98,0.5); fill: rgba(3,47,98,0.5);
padding-right: 0.5em; padding-right: 0.5em;
vertical-align: text-top;
} }
.path { .path {
display: flex;
list-style: none; list-style: none;
} }
@ -165,6 +161,8 @@ body {
overflow: hidden; overflow: hidden;
display: block; display: block;
text-decoration: none; text-decoration: none;
max-width: calc(100vw - 375px);
min-width: 400px;
} }
.path a:hover { .path a:hover {
@ -202,7 +200,7 @@ body {
svg, svg,
.path svg { .path svg {
fill: #d0e6ff; fill: #fff;
} }
.searchbar { .searchbar {

6
assets/index.html
View file

@ -35,7 +35,7 @@
<table class="uploaders-table hidden"> <table class="uploaders-table hidden">
<thead> <thead>
<tr> <tr>
<th class="cell-name">Name</th> <th class="cell-name" colspan="2">Name</th>
<th class="cell-status">Speed - Progress - Time Left</th> <th class="cell-status">Speed - Progress - Time Left</th>
</tr> </tr>
</thead> </thead>
@ -43,8 +43,8 @@
<table class="paths-table hidden"> <table class="paths-table hidden">
<thead> <thead>
<tr> <tr>
<th class="cell-name">Name</th> <th class="cell-name" colspan="2">Name</th>
<th class="cell-mtime">Date modify</th> <th class="cell-mtime">Last modified</th>
<th class="cell-size">Size</th> <th class="cell-size">Size</th>
<th class="cell-actions">Actions</th> <th class="cell-actions">Actions</th>
</tr> </tr>

8
assets/index.js
View file

@ -68,7 +68,7 @@ class Uploader {
$uploadersTable.insertAdjacentHTML("beforeend", ` $uploadersTable.insertAdjacentHTML("beforeend", `
<tr id="upload${idx}" class="uploader"> <tr id="upload${idx}" class="uploader">
<td class="path cell-name"> <td class="path cell-name">
<div>${getSvg("File")}</div> ${getSvg("File")}
<a href="${url}">${name}</a> <a href="${url}">${name}</a>
</td> </td>
<td class="cell-status upload-status" id="uploadStatus${idx}"></td> <td class="cell-status upload-status" id="uploadStatus${idx}"></td>
@ -188,8 +188,10 @@ function addPath(file, index) {
$pathsTableBody.insertAdjacentHTML("beforeend", ` $pathsTableBody.insertAdjacentHTML("beforeend", `
<tr id="addPath${index}"> <tr id="addPath${index}">
<td class="path cell-icon">
${getSvg(file.path_type)}
</td>
<td class="path cell-name"> <td class="path cell-name">
<div>${getSvg(file.path_type)}</div>
<a href="${url}" title="${file.name}">${file.name}</a> <a href="${url}" title="${file.name}">${file.name}</a>
</td> </td>
<td class="cell-mtime">${formatMtime(file.mtime)}</td> <td class="cell-mtime">${formatMtime(file.mtime)}</td>
@ -295,7 +297,7 @@ function formatMtime(mtime) {
const day = padZero(date.getDate(), 2); const day = padZero(date.getDate(), 2);
const hours = padZero(date.getHours(), 2); const hours = padZero(date.getHours(), 2);
const minutes = padZero(date.getMinutes(), 2); const minutes = padZero(date.getMinutes(), 2);
return `${year}/${month}/${day} ${hours}:${minutes}`; return `${year}-${month}-${day} ${hours}:${minutes}`;
} }
function padZero(value, size) { function padZero(value, size) {