update

app/forms/download.html

@@ -17,12 +17,7 @@
       <button onclick="checkUpload()">Submit</button>
       <p id="status"></p>
     </div>
-    <div id="file-view" class="container vertical" style="display:none">
+    <div id="file-view" class="container vertical file-view" style="display:none">
-      <table>
-        <tr><td>filename.png</td><td><a target=”_blank” href="">Download</a></td></tr>
-        <tr><td>filename.png</td><td><a target=”_blank” href="">Download</a></td></tr>
-        <tr><td>filename.png</td><td><a target=”_blank” href="">Download</a></td></tr>
-      </table>
     </div>
     <div id="admin-file-view" class="container vertical" style="display:none">
       <input id="code" type="text" placeholder="Enter code">
@@ -30,6 +25,7 @@
       <p id="status"></p>
     </div>
   </div>
+  <script src="/js/script.js"></script>
   <script>
     var hash = "";
     var adminHash = "";
@@ -82,13 +78,13 @@
           console.log(jsonResponse);
 
           if (jsonResponse.code == 200) {
-            table = "<table>";
+            table = "<table class=\"file-table\"><tbody class=\"files\">";
             var i = 0
             jsonResponse.result.files.forEach(file => {
-              table += "<tr><td>"+file.filename+"</td><td><a target=\”_blank\” href='"+document.location.protocol+"//"+document.location.host+"/download/"+hash+"/index/"+i+"'>Download</a></td></tr>";
+              table += "<tr id=\"file\"><td id=\"name\"><p title=\""+file.filename+"\">"+shortString(file.filename, 20)+"</p></td><td id=\"actions\"><div class=\"action-box\"><img id=\"img-download\" src=\"/img/cloud-download-outline-white.svg\" alt=\"Download\"><a target=\”_blank\” href='"+document.location.protocol+"//"+document.location.host+"/download/"+hash+"/index/"+i+"'></a></div></td></tr>";
               i++;
             });
-            table += "</table>";
+            table += "</tbody></table>";
             fileview.innerHTML = table;
           } else {
             fileview.innerHTML = "<h1>Not Found</h1>";

app/forms/upload.html

@@ -27,6 +27,7 @@
   </div>
   <script src="js/socket.io.js"></script>
   <script src="js/siofu-client.js"></script>
+  <script src="/js/script.js"></script>
   <script>
     var selectedFiles = [];
 
@@ -44,15 +45,6 @@
       updateFileList();
     }
 
-    function shortString(str, maxlen = 13) {
-      if (str.length > maxlen) {
-        shortstr = str.slice(0, (maxlen - 3) / 2) + "..." + str.slice(-(maxlen - 3) / 2);
-      } else {
-        shortstr = str;
-      }
-      return shortstr;
-    }
-
     function updateFileList(maxlen = 30) {
       filelist = document.getElementsByClassName("filelist")[0];
       filelist.innerHTML = "";

app/public/css/style.css

@@ -3,7 +3,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  border: none;
 }
 
 body {
@@ -40,6 +39,10 @@ canvas {
   text-align: center;
 }
 
+.free-width {
+  width: auto;
+}
+
 .vertical {
   flex-direction: column;
   justify-content: center;
@@ -68,6 +71,61 @@ canvas {
   flex-direction: column;
 }
 
+.file-view {
+  width: 40%;
+}
+
+.file-table {
+  border-collapse: separate;
+  width: 100%;
+}
+.files #file {
+  margin-bottom: 5px;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  vertical-align: middle;
+  flex-direction: row;
+  gap: 0;
+  row-gap: 0;
+}
+.files #file #name {
+  display: flex;
+  flex-basis: 90%;
+  padding: 0;
+  vertical-align: middle;
+}
+.files #file #name p {
+  line-height: 0.5;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+  margin: 0;
+}
+.files #file #actions {
+  flex-basis: 10%;
+  height: 100%;
+  width: 15px;
+}
+.files #file .action-box {
+  display: grid;
+  background-color: #1b1b1b;
+  color: white;
+  padding: 2px;
+  width: 50%;
+}
+.files #file .action-box * {
+  height: 100%;
+  width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+  margin: 0;
+}
+
+.img-download {
+  height: 100%;
+}
+
 .button {
   display: inline-block;
   border-radius: 4px;
@@ -127,6 +185,9 @@ canvas {
   justify-content: center;
   cursor: pointer;
 }
+.card-button-box .card-button #actions {
+  background-color: #1b1b1b;
+}
 .card-button-box .card-button img {
   height: 100%;
   flex-basis: 40%;

app/public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;EAEE,UAAA;EACA,SAAA;EACA,YAAA;ADEF;;ACEA;EACE,yBAAA;ADCF;;ACGA;EACE,cAAA;ADAF;;ACGA;;;;EAIE,aAAA;ADAF;;ACGA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ADAF;;ACGA;EACE,oCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yBAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;ADAF;;ACGA;EACI,sBAAA;EACA,uBAAA;EACA,mBAAA;ADAJ;;ACGA;EACI,gBAAA;ADAJ;;ACGA;EACI,aAAA;EACA,sBAAA;EACA,UAAA;ADAJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,sBAAA;ADCJ;;ACEA;EACI,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;EACA,WAAA;ADCJ;;ACEA;EACI,eAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;ADCJ;;ACEA;EACI,YAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;EACA,YAAA;EACA,gBAAA;ADCJ;;ACEA;EACI,mBAAA;ADCJ;;ACEA;EACI,UAAA;EACA,QAAA;ADCJ;;ACEA;EACI,aAAA;EACA,uBAAA;EACA,SAAA;ADCJ;ACAI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,0CAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADER;ACDQ;EACI,YAAA;EACA,eAAA;ADGZ;ACAQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;ADEZ;;ACOA;EACI,sBAAA;EACA,2CAAA;ADJJ;;ACOA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,aAAA;ADJJ;;ACOA;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ADJJ;;ACOA;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;ADJJ;;ACMA;EACI,UAAA;EACA,eAAA;ADHJ","file":"style.css"}
+{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;EAEE,UAAA;EACA,SAAA;ADEF;;ACEA;EACE,yBAAA;ADCF;;ACGA;EACE,cAAA;ADAF;;ACGA;;;;EAIE,aAAA;ADAF;;ACGA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ADAF;;ACGA;EACE,oCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yBAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;ADAF;;ACGA;EACI,WAAA;ADAJ;;ACGA;EACI,sBAAA;EACA,uBAAA;EACA,mBAAA;ADAJ;;ACGA;EACI,gBAAA;ADAJ;;ACGA;EACI,aAAA;EACA,sBAAA;EACA,UAAA;ADAJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,sBAAA;ADCJ;;ACEA;EACI,UAAA;ADCJ;;ACEA;EACI,yBAAA;EACA,WAAA;ADCJ;ACQI;EACI,kBAAA;EACA,aAAA;EACA,YAAA;EACA,uBAAA;EACA,sBAAA;EACA,mBAAA;EACA,MAAA;EACA,UAAA;ADNR;ACOQ;EACI,aAAA;EACA,eAAA;EACA,UAAA;EACA,sBAAA;ADLZ;ACMY;EACI,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,sBAAA;EACA,SAAA;ADJhB;ACOQ;EACI,eAAA;EACA,YAAA;EACA,WAAA;ADLZ;ACOQ;EACI,aAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;ADLZ;ACOQ;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;EACA,SAAA;ADLZ;;ACUA;EACI,YAAA;ADPJ;;ACUA;EACI,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;EACA,WAAA;ADPJ;;ACUA;EACI,eAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,YAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;EACA,YAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,mBAAA;ADPJ;;ACUA;EACI,UAAA;EACA,QAAA;ADPJ;;ACUA;EACI,aAAA;EACA,uBAAA;EACA,SAAA;ADPJ;ACQI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,0CAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADNR;ACQQ;EACI,yBAAA;ADNZ;ACSQ;EACI,YAAA;EACA,eAAA;ADPZ;ACUQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;ADRZ;;ACiBA;EACI,sBAAA;EACA,2CAAA;ADdJ;;ACiBA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,aAAA;ADdJ;;ACiBA;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ADdJ;;ACiBA;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;ADdJ;;ACgBA;EACI,UAAA;EACA,eAAA;ADbJ","file":"style.css"}

app/public/css/style.scss

@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  border: none;
 }
 
 
@@ -41,6 +40,10 @@ canvas {
   text-align: center;
 }
 
+.free-width {
+    width: auto;
+}
+
 .vertical {
     flex-direction: column;
     justify-content: center;
@@ -68,6 +71,69 @@ canvas {
     flex-direction: column;
 }
 
+.file-view {
+    width: 40%;
+}
+
+.file-table {
+    border-collapse: separate;
+    width: 100%;
+    tr {
+        
+    }
+}
+
+
+
+.files {
+    #file {
+        margin-bottom: 5px;
+        display: flex;
+        height: 30px;
+        justify-content: center;
+        vertical-align: middle;
+        flex-direction: row;
+        gap: 0;
+        row-gap: 0;
+        #name {
+            display: flex;
+            flex-basis: 90%;
+            padding: 0;
+            vertical-align: middle;
+            p { 
+                line-height: 0.5;
+                display: inline-block;
+                text-align: left;
+                vertical-align: middle;
+                margin: 0;
+            }
+        }
+        #actions {
+            flex-basis: 10%;
+            height: 100%;
+            width: 15px;
+        }
+        .action-box {
+            display: grid;
+            background-color: #1b1b1b;
+            color: white;
+            padding: 2px;
+            width: 50%;
+        }
+        .action-box * {
+            height: 100%;
+            width: 100%;
+            grid-column: 1;
+            grid-row: 1;
+            margin: 0;
+        }
+    }
+}
+
+.img-download {
+    height: 100%;
+}
+
 .button {
     display: inline-block;
     border-radius: 4px;
@@ -125,6 +191,11 @@ canvas {
         flex-direction: row;
         justify-content: center;
         cursor: pointer;
+
+        #actions {
+            background-color: #1b1b1b;
+        }
+
         img {
             height: 100%;
             flex-basis: 40%;