chore: optimize ui

assets/index.css

@@ -7,6 +7,7 @@ html {
 body {
   /* prevent premature breadcrumb wrapping on mobile */
   min-width: 500px;
+  margin: 0;
 }
 
 .hidden {
@@ -17,7 +18,10 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 1em 1em 0;
+  padding: 0.6em 1em;
+  position: fixed;
+  width: 100%;
+  background-color: white;
 }
 
 .breadcrumb {
@@ -104,7 +108,7 @@ body {
 }
 
 .main {
-  padding: 0 1em;
+  padding: 3em 1em 0;
 }
 
 .empty-folder {

assets/index.js

@@ -58,6 +58,10 @@ let $emptyFolder;
  * @type Element
  */
 let $newFolder;
+/**
+ * @type Element
+ */
+let $searchbar;
 
 class Uploader {
   /**
@@ -106,7 +110,7 @@ class Uploader {
     const ajax = new XMLHttpRequest();
     ajax.upload.addEventListener("progress", e => this.progress(e), false);
     ajax.addEventListener("readystatechange", () => {
-      if(ajax.readyState === 4) {
+      if (ajax.readyState === 4) {
         if (ajax.status >= 200 && ajax.status < 300) {
           this.complete();
         } else {
@@ -234,7 +238,7 @@ function renderPathsTableHead() {
         svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/></svg>`
       }
     }
-        const qs = new URLSearchParams({...PARAMS, order, sort: item.name }).toString();
+    const qs = new URLSearchParams({ ...PARAMS, order, sort: item.name }).toString();
     const icon = `<span>${svg}</span>`
     return `<th class="cell-${item.name}" ${item.props}><a href="?${qs}">${item.text}${icon}</a></th>`
   }).join("\n")}
@@ -418,6 +422,44 @@ function dropzone() {
   });
 }
 
+/**
+ * Setup searchbar
+ */
+function setupSearch() {
+  $searchbar.classList.remove("hidden");
+  $searchbar.addEventListener("submit", event => {
+    event.preventDefault();
+    const formData = new FormData($searchbar);
+    const q = formData.get("q");
+    let href = getUrl();
+    if (q) {
+      href += "?q=" + q;
+    }
+    location.href = href;
+  });
+  if (PARAMS.q) {
+    document.getElementById('search').value = PARAMS.q;
+  }
+}
+
+/**
+ * Setup upload
+ */
+function setupUpload() {
+  $newFolder.classList.remove("hidden");
+  $newFolder.addEventListener("click", () => {
+    const name = prompt("Enter folder name");
+    if (name) createFolder(name);
+  });
+  document.querySelector(".upload-file").classList.remove("hidden");
+  document.getElementById("file").addEventListener("change", e => {
+    const files = e.target.files;
+    for (let file of files) {
+      new Uploader(file, []).upload();
+    }
+  });
+}
+
 /**
  * Create a folder
  * @param {string} name 
@@ -511,8 +553,8 @@ function formatPercent(percent) {
 }
 
 function encodedStr(rawStr) {
-  return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
+  return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
-    return '&#'+i.charCodeAt(0)+';';
+    return '&#' + i.charCodeAt(0) + ';';
   });
 }
 
@@ -523,24 +565,11 @@ function ready() {
   $pathsTableBody = document.querySelector(".paths-table tbody");
   $uploadersTable = document.querySelector(".uploaders-table");
   $emptyFolder = document.querySelector(".empty-folder");
-  $searchForm = document.querySelector(".searchbar");
   $newFolder = document.querySelector(".new-folder");
+  $searchbar = document.querySelector(".searchbar");
 
   if (DATA.allow_search) {
-    $searchForm.classList.remove("hidden");
+    setupSearch()
-    $searchForm.addEventListener("submit", event => {
-        event.preventDefault();
-        const formData = new FormData($searchForm);
-        const q = formData.get("q");
-        let href = getUrl();
-        if (q) {
-          href += "?q=" + q;
-        }
-        location.href = href;
-    });
-    if (PARAMS.q) {
-      document.getElementById('search').value = PARAMS.q;
-    }
   }
 
   if (DATA.allow_archive) {
@@ -553,19 +582,6 @@ function ready() {
 
   if (DATA.allow_upload) {
     dropzone();
-    if (DATA.allow_delete) {
+    setupUpload();
-      $newFolder.classList.remove("hidden");
-      $newFolder.addEventListener("click", () => {
-        const name = prompt("Enter name of new folder");
-        if (name) createFolder(name);
-      });
-    }
-    document.querySelector(".upload-file").classList.remove("hidden");
-    document.getElementById("file").addEventListener("change", e => {
-      const files = e.target.files;
-      for (let file of files) {
-        new Uploader(file, []).upload();
-      }
-    });
   }
 }