Update design

- after upload the files uploaded are remove from the upload side - Upload button is now more recognizeable
Playit3110 · Dec 18, 2021 · c7371fa · c7371fa
1 parent 866d6f3
commit c7371fa
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 39 deletions.
diff --git a/index.php b/index.php
@@ -55,30 +55,40 @@ function toimg($path) {
 			</li>
 		</ul>
 	</nav>
-	<main>
+	<main class="options">
 		<div class="title">
-			<span>Upload</span>
-			<button onclick="UD.upload(this.parentNode.parentNode)">
-				<?php include "./system/img/upload.svg"; ?>
-			</button>
+			<label>
+				<span>Files</span>
+				<input type="file" class="ifiles" name="files[]" multiple onchange="UD.selected(this)" hidden>
+			</label>
+		</div>
+		<ul>
+			<!-- <li class="fixed menu">
+				<label>
+					<span>Files</span>
+					<input type="file" class="ifiles" name="files[]" multiple onchange="UD.selected(this)" hidden>
+				</label>
+			</li> -->
+		</ul>
+		<div class="title">
+			<label>
+				<span>Folders</span>
+				<input type="file" class="ifolder" name="folders[]" directory webkitdirectory moxdirectory mozdirectory msdirectory odirectory multiple onchange="UD.selected(this)" hidden>
+			</label>
 		</div>
-		<div class="options">
-			<ul>
-				<li class="fixed menu">
-					<label>
-						<span>Files</span>
-						<input type="file" class="ifiles" name="files[]" multiple onchange="UD.selected(this)" hidden>
-					</label>
-				</li>
-			</ul>
-			<ul>
-				<li class="fixed menu">
-					<label>
-						<span>Folders</span>
-						<input type="file" class="ifolder" name="folders[]" directory webkitdirectory moxdirectory mozdirectory msdirectory odirectory multiple onchange="UD.selected(this)" hidden>
-					</label>
-				</li>
-			</ul>
+		<ul>
+			<!-- <li class="fixed menu">
+				<label>
+					<span>Folders</span>
+					<input type="file" class="ifolder" name="folders[]" directory webkitdirectory moxdirectory mozdirectory msdirectory odirectory multiple onchange="UD.selected(this)" hidden>
+				</label>
+			</li> -->
+		</ul>
+		<div class="title" onclick="UD.upload(this.parentNode.parentNode)">
+			<span>Upload</span>
+			<div class="btnimg">
+				<?php include "./system/img/upload.svg" ?>
+			</div>
 		</div>
 	</main>
 </body>

diff --git a/system/CSS/dark.css b/system/CSS/dark.css
@@ -11,7 +11,7 @@ body.dark {
 
 
 
-.dark nav, .dark main {
+.dark nav, .dark main, .dark main .title {
     border-color: white;
 }
 

diff --git a/system/CSS/style.css b/system/CSS/style.css
@@ -50,29 +50,35 @@ main {
 	width: calc(50% - 1px);
 }
 
+main .options {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+main .options .menu label {
+	width: 100%;
+}
+
 main .title {
 	border: 1px solid black;
+	display: flex;
+	justify-content: center;
 	/* position: relative; */
 }
 
-main .title button {
+main .title .btnimg {
 	border: 1px solid black;
-	bottom: 15px;
+	/* bottom: 15px;
 	height: 3vw;
 	position: absolute;
-	right: 15px;
+	right: 15px; */
 	width: 3vw;
-	z-index: 2;
+	/* z-index: 2; */
 }
 
-main .options {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-main .options .menu label {
-	width: 100%;
+main .title .btnimg svg {
+	vertical-align: sub;
 }
 
 

diff --git a/system/JS/nav.js b/system/JS/nav.js
@@ -2,6 +2,7 @@ const Explorer = {
 	init: function({elem = document.body, path = "/"}) {
 		this.elem = elem;
 		this.path = path;
+		this.sorted = this.elem.getElementsByClassName("sort")[0].checked;
 	},
 	to: async function(dir = 0, abs = false) {
 		if(dir == -1) {
@@ -23,7 +24,7 @@ const Explorer = {
 			data: {
 				action: "folder",
 				dir: this.path,
-				sorted: this.elem.getElementsByClassName("sort")[0].checked
+				sorted: this.sorted
 			}
 		});
 

diff --git a/system/JS/script.js b/system/JS/script.js
@@ -3,7 +3,6 @@ window.onload = function() {
 	setInterval(function() {
 		toDark();
 	}, 60000);
-	window.onhashchange();
 
 	let url = new URL(location).searchParams;
 	if(url.has("dark")) document.body.classList.add("dark");
@@ -15,10 +14,13 @@ window.onload = function() {
 	if(h !== "") data.path = h;
 	Explorer.init(data);
 	Explorer.to();
+
+	window.onhashchange();
 }
 
 window.onhashchange = function() {
 	let hash = location.hash.substr(1);
+	if(!hash.endsWith("/")) hash += "/";
 	Explorer.to(hash, true);
 }
 

diff --git a/system/JS/ud.js b/system/JS/ud.js
@@ -94,6 +94,9 @@ const UD = {
 							let elem = document.body.querySelector("[data-file=\"" + file.path + "\"");
 							elem.classList.add("success");
 							Explorer.to();
+							setTimeout(function() {
+								elem.remove();
+							}, 500);
 						}
 					},
 					"upload.onprogress": progress,
@@ -105,8 +108,9 @@ const UD = {
 	},
 	selected: function(elem) {
 		this.files[elem.className] = elem.files;
-		let list = elem.parentNode.parentNode.parentNode;
-		while(!list.lastElementChild.classList.contains("fixed")) {
+		// let list = elem.parentNode.parentNode.parentNode; // as list elem
+		let list = elem.parentElement.parentElement.nextElementSibling;
+		while(list.lastElementChild && !list.lastElementChild.classList.contains("fixed")) {
 			list.lastElementChild.remove();
 		}
 		for(let file of elem.files) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ body.dark { @@
-    .dark nav, .dark main {
+    .dark nav, .dark main, .dark main .title {
         border-color: white;
     }
@@ Expand Down @@