chore: optimize ui
This commit is contained in:
parent
111103f26b
commit
c6c78a16c5
2 changed files with 102 additions and 82 deletions
|
@ -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 {
|
||||
|
|
|
@ -58,6 +58,10 @@ let $emptyFolder;
|
|||
* @type Element
|
||||
*/
|
||||
let $newFolder;
|
||||
/**
|
||||
* @type Element
|
||||
*/
|
||||
let $searchbar;
|
||||
|
||||
class Uploader {
|
||||
/**
|
||||
|
@ -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
|
||||
|
@ -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");
|
||||
$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;
|
||||
}
|
||||
setupSearch()
|
||||
}
|
||||
|
||||
if (DATA.allow_archive) {
|
||||
|
@ -553,19 +582,6 @@ function ready() {
|
|||
|
||||
if (DATA.allow_upload) {
|
||||
dropzone();
|
||||
if (DATA.allow_delete) {
|
||||
$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();
|
||||
}
|
||||
});
|
||||
setupUpload();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue