aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Vitkov <alexvitkov98@gmail.com>2021-02-12 15:36:38 +0200
committerAlex Vitkov <alexvitkov98@gmail.com>2021-02-12 15:36:38 +0200
commit34ba723e18a7ba0f785e456e38a9234d6efda9b7 (patch)
tree68b70f8c7768eec186edfc0c77c8dca334ae5404
parent9b29bb3deb3943dd101d7ab7b01f42ee49951e1b (diff)
downloadfileup-34ba723e18a7ba0f785e456e38a9234d6efda9b7.tar.gz
css
Diffstat
-rw-r--r--css/style.css76
-rw-r--r--index.php2
-rw-r--r--loggedin.js25
-rw-r--r--loggedin.php11
-rw-r--r--mimeicons/pending.pngbin0 -> 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;
}
diff --git a/index.php b/index.php
index f8a1e14..1d28812 100644
--- a/index.php
+++ b/index.php
@@ -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
new file mode 100644
index 0000000..1b0ee1a
--- /dev/null
+++ b/mimeicons/pending.png
Binary files differ