refactor: ui improve uploading progress (#296)

diff --git a/assets/index.css b/assets/index.css
index 6f84452071b8cddf9097794771497e555b5cab72..6740b2d4343b4bf296049793d117c981c601c46f 100644 (file)
--- a/assets/index.css
+++ b/assets/index.css
@@ -107,11 +107,6 @@ body {
   cursor: pointer;
 }
 
-.upload-status span {
-  width: 70px;
-  display: inline-block;
-}
-
 .main {
   padding: 3.3em 1em 0;
 }
@@ -138,6 +133,11 @@ body {
   padding-left: 0.6em;
 }
 
+.cell-status span {
+  width: 80px;
+  display: inline-block;
+}
+
 .paths-table thead a {
   color: unset;
   text-decoration: none;

diff --git a/assets/index.js b/assets/index.js
index 65c3f5587b2cafe03842cd3f3a5f3acb98ecff08..0c825d04de2633621986e89de1a955564cc98bf9 100644 (file)
--- a/assets/index.js
+++ b/assets/index.js
@@ -183,10 +183,10 @@ class Uploader {
     const now = Date.now();
     const speed = (event.loaded - this.uploaded) / (now - this.lastUptime) * 1000;
     const [speedValue, speedUnit] = formatSize(speed);
-    const speedText = `${speedValue}${speedUnit.toLowerCase()}/s`;
+    const speedText = `${speedValue} ${speedUnit}/s`;
     const progress = formatPercent((event.loaded / event.total) * 100);
     const duration = formatDuration((event.total - event.loaded) / speed)
-    this.$uploadStatus.innerHTML = `<span>${speedText}</span><span>${progress}</span><span>${duration}</span>`;
+    this.$uploadStatus.innerHTML = `<span>${speedText}</span><span>${progress} ${duration}</span>`;
     this.uploaded = event.loaded;
     this.lastUptime = now;
   }