diff options
| -rw-r--r-- | css/style.css | 76 | ||||
| -rw-r--r-- | index.php | 2 | ||||
| -rw-r--r-- | loggedin.js | 25 | ||||
| -rw-r--r-- | loggedin.php | 11 | ||||
| -rw-r--r-- | mimeicons/pending.png | bin | 0 -> 9024 bytes |
5 files changed, 83 insertions, 31 deletions
diff --git a/css/style.css b/css/style.css index 96b48c5..24fa86f 100644 --- a/css/style.css +++ b/css/style.css @@ -6,7 +6,7 @@ html, body { body { background: #f0f0f0; color: black; - font-family: sans-serif; + font-family: Roboto, sans-serif; overflow: hidden; } @@ -96,12 +96,11 @@ body { } form { - background: white; + background: #fbfbfb; margin: 4.5rem; padding-top: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; - border-radius: 0.5rem; border: 1px solid #b9b9b9; } @@ -170,21 +169,20 @@ form p { min-width: 300px; } -input:not([type=file]) { +button, +input:not([type=file]) +{ border: 1px solid #bbb; - padding: 0.8rem 2rem 0.5rem 2rem; + padding: 0.5rem 0.8rem; font-size: inherit; font-family: inherit; border-radius: 0.3rem; - background: #f6f6f6; + background: #fcfcfc; } input[type=button], button, input[type=submit] { cursor: pointer; } -input[type=button]:hover, button:hover, input[type=submit]:hover { - background: white; -} input[type=submit] { margin-top: 2rem; @@ -198,9 +196,11 @@ input[type=submit] { outline: none; } -input:focus, -input:hover { - background: white; + +input:hover, +button:hover +{ + background: white; } input:focus { @@ -240,7 +240,6 @@ input[type=submit]:hover { padding: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; - border-radius: 0.5rem; border: 1px solid #b9b9b9; display: block; @@ -250,7 +249,7 @@ input[type=submit]:hover { padding: 1rem; display: grid; - grid-gap: 20px; + grid-gap: 0rem; grid-auto-rows: 10rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } @@ -285,21 +284,50 @@ input[type=submit]:hover { filter: brightness(120%); } -.path { - font-size: 1.5rem; +.filesystem > h2 { + display: flex; + align-items: stretch; + font-weight: normal; + padding: 0rem; + border-bottom: 1px solid #bbb; + } -.path > a { - color: #333; - text-decoration: none; +.filesystem > h2 button { + border: none; + padding: 0.3rem 0.7rem; + background: inherit; + border-radius: 0; } -.path > a:hover { - text-decoration: underline; +.filesystem > h2 button:not(.pathentry):hover { + background: white; } -.filesystem > h2 { +.filesystem > h2 > .separator { + flex: 0 0 1px; + align-self: stretch; + background: #bbb; +} + +.filesystem > h2 > *:first-child { + border-top-left-radius: 0.5rem; +} + +.path { display: flex; - align-items: baseline; - font-weight: normal; + align-items: stretch; + font-size: 0.8em; +} + +.path > .separator { + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + padding: 0 0.2rem; + align-self: center; +} + +.pathentry:hover { + text-decoration: underline; } @@ -5,6 +5,8 @@ <html> <head> <meta charset="utf-8"> + <link rel="preconnect" href="https://fonts.gstatic.com"> + <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> <title>shady file upload</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> diff --git a/loggedin.js b/loggedin.js index b275c4a..d4f56ae 100644 --- a/loggedin.js +++ b/loggedin.js @@ -1,4 +1,4 @@ -var FORM_ASYNC = false; +var FORM_ASYNC = true; const upload_form = document.getElementById("upload_form"); const the_file = document.getElementById("the_file"); @@ -22,6 +22,12 @@ class FileView { } } +class PendingUpload { + constructor(fileview) { + this.fileview = fileview; + } +} + var files = []; function on_file_added(_e) { @@ -33,13 +39,15 @@ function on_file_added(_e) { return; } + var fileview = add_file_visuals(filename_input.value, false, "pending"); + // Send the form asynchronously through the fetch api fetch(upload_form.action, { method: upload_form.method, body: new FormData(upload_form) }).then((resp) => { if (resp.status == 200) { - add_file_visuals(filename_input.value, true); + done_upload(fileview); } else { alert("Upload failed"); @@ -47,13 +55,19 @@ function on_file_added(_e) { }, () => { alert("Upload failed") }); - - + + pending_uploads.push(fileview); } else { alert("No files selected"); } +} +function done_upload(fileview) { + var index = pending_uploads.indexOf(fileview); + if (index >= 0) + pending_uploads.splice(index, 1); + load_dir(pwd); } function load_dir(pwd) { @@ -92,6 +106,9 @@ function add_file_visuals(name, is_directory, mimetype) { filename.classList.add('filename'); filename.innerText = name; + if (mimetype == "pending") + fileDiv.classList.add('pending'); + fileDiv.appendChild(img); fileDiv.appendChild(filename); diff --git a/loggedin.php b/loggedin.php index b525ed6..0c95750 100644 --- a/loggedin.php +++ b/loggedin.php @@ -1,9 +1,14 @@ <div> <div class="filesystem"> - <h2 style="display: flex; gap: 1rem;"> + <h2 style="display: flex; gap: 0rem;"> + <button id="upload_btn" onclick="begin_upload()">Upload</button> + <div class="separator"></div> <div class="path"> - <a class="pathentry" href="#"> <?php echo $_SESSION['username'] ?>'s files/</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a></div> - <input id="upload_btn" type="button" value="Upload" onclick="begin_upload()"> + <!-- <a class="pathentry" href="#"> <?php echo $_SESSION['username'] ?>'s files/</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a> --> + <button class="pathentry">Haha's files</button> + <div class="separator">ยป</div> + <button class="pathentry">Haha's files</button> + </div> </h2> <div class="files" id="current_directory"> diff --git a/mimeicons/pending.png b/mimeicons/pending.png Binary files differnew file mode 100644 index 0000000..1b0ee1a --- /dev/null +++ b/mimeicons/pending.png |
