feat: reactive webpage (#51)

assets/index.css

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

assets/index.html

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

assets/index.js

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