From b1b0fdd4dbc7df29a91c6f9dc955cd9b0ee3567d Mon Sep 17 00:00:00 2001
From: Joe Koop <joe@joekoop.com>
Date: Sun, 19 Jun 2022 09:04:59 -0500
Subject: [PATCH] feat: reactive webpage (#51)

---
 assets/index.css  | 10 ++++------
 assets/index.html |  6 +++---
 assets/index.js   |  8 +++++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/index.css b/assets/index.css
index 65aa42e..97cff75 100644
--- a/assets/index.css
+++ b/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 {
diff --git a/assets/index.html b/assets/index.html
index edadb84..1518787 100644
--- a/assets/index.html
+++ b/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>
diff --git a/assets/index.js b/assets/index.js
index e812d35..2159f1f 100644
--- a/assets/index.js
+++ b/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) {