F diff --git a/css/style.css b/css/style.css
--- a/css/style.css
+++ b/css/style.css
body {
background: #f0f0f0;
color: black;
- font-family: sans-serif;
+ font-family: Roboto, sans-serif;
overflow: hidden;
}
}
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;
}
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;
outline: none;
}
- input:focus,
- input:hover {
- background: white;
+
+ input:hover,
+ button:hover
+ {
+ background: white;
}
input:focus {
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;
padding: 1rem;
display: grid;
- grid-gap: 20px;
+ grid-gap: 0rem;
grid-auto-rows: 10rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
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;
}
F diff --git a/index.php b/index.php
--- a/index.php
+++ b/index.php
<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>
F diff --git a/loggedin.js b/loggedin.js
--- a/loggedin.js
+++ b/loggedin.js
- var FORM_ASYNC = false;
+ var FORM_ASYNC = true;
const upload_form = document.getElementById("upload_form");
const the_file = document.getElementById("the_file");
}
}
+ class PendingUpload {
+ constructor(fileview) {
+ this.fileview = fileview;
+ }
+ }
+
var files = [];
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");
}, () => {
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) {
filename.classList.add('filename');
filename.innerText = name;
+ if (mimetype == "pending")
+ fileDiv.classList.add('pending');
+
fileDiv.appendChild(img);
fileDiv.appendChild(filename);
F diff --git a/loggedin.php b/loggedin.php
--- a/loggedin.php
+++ b/loggedin.php
<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">
F diff --git a/mimeicons/pending.png b/mimeicons/pending.png
new file mode 100644
B Binary files /dev/null and b/mimeicons/pending.png differ