Added close button to upload and new folder tool

Added up-button to the file browser
Removed nasty gaps in the file list
Added tooltips to the tools

2 files changed, 63 insertions, 25 deletions

diff --git a/www/browse.php b/www/browse.php
index a4b9e84..b72bac5 100644
--- a/www/browse.php
+++ b/www/browse.php
@@ -25,13 +25,16 @@ function browse($content){
 		}
 	
 	
-	
-		$file_list = "";
+
 		if($content != EMPTY_FOLDER){
+			$file_list = "<tr><td colspan='2'><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
 			foreach($content as $file){
 				$file_list .= get_item($file);
-			}
+			} 
+		}else{
+			$file_list = "<tr><td><a class='file' id='up' href='/".$_GET["name"]."/".$_GET["folder"]."../'>&nbsp;..</a></td></tr>";
 		}
+		
 	
 		echo '<link rel="stylesheet" type="text/css" href="/static/browser.css">
 				<script>
@@ -57,6 +60,7 @@ function browse($content){
 				<div id="new-folder-bg">
 					<div id="new-folder-area">
 						<h1 class="new-folder"> New Folder </h1>
+						<a onclick="hideNewFolder()" class="new-folder" id="close">x</a>
 						<form id="new-folder-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'">
 							<input class="new-folder-input" id="new-folder-name" type="text" placeholder="name" name="foldername" required>
 							<input type="hidden" value="'.$_GET["folder"].'" name="path">
@@ -70,6 +74,7 @@ function browse($content){
 				<div id="upload-bg">
 					<div id="upload-area">
 						<h1 class="upload"> Upload </h1>
+						<a onclick="hideUpload()" class="new-folder" id="close">x</a>
 						<form id="upload-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'" enctype="multipart/form-data">
 							<input class="upload-input" id="upload-file" type="file" placeholder="file" name="userfile" size=" 500000000" maxlength="100000000000000" required>
 							<input type="hidden" value="'.$_GET["folder"].'" name="path">
@@ -79,7 +84,7 @@ function browse($content){
 						</form>
 					</div>
 				</div>
-				<table>'.$file_list.'</table>';
+				<table cellspacing="0">'.$file_list.'</table>';
 	
 		include("static/footer.html");
 }
@@ -95,7 +100,7 @@ function get_icon($file){
 
 function get_link($file){
 	$slash = (($_GET["folder"]!="" && substr($_GET["folder"], -1) != "/"))? "/" : "";
-	return '<a href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
+	return '<a  class="file" href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
 }
 
 function get_item($file){
@@ -104,7 +109,7 @@ function get_item($file){
 
 function print_menu(){
 	echo '<div id="menu">
-	<div class="menu-item" id="new-item" onclick="showNewFolder()" ><img src="/static/img/icon_new.svg" width="45px"  onclick="showNewFolder()"></div>
-	<div class="menu-item" id="upload-item" onclick="showUpload()" ><img src="/static/img/icon_upload.svg" width="45px" onclick="showUpload()" ></div>
+	<div class="menu-item"  title="Create Folder" id="new-item" onclick="showNewFolder()" ><img src="/static/img/icon_new.svg" width="45px"  onclick="showNewFolder()"></div>
+	<div class="menu-item" title="Upload" id="upload-item" onclick="showUpload()" ><img src="/static/img/icon_upload.svg" width="45px" onclick="showUpload()" ></div>
 	</div><!-- div menu-->';
 }
diff --git a/www/static/browser.css b/www/static/browser.css
index c040695..e895b97 100644
--- a/www/static/browser.css
+++ b/www/static/browser.css
@@ -1,36 +1,54 @@
-tr:hover{
-	background: #CCCCCC;
+/************************************************
+File list
+*************************************************/
+table tr td {
+	padding: 0;
+	height: 30px;
+	width: 100%;
+	margin: 0;
+}
+
+td{
+	width: 100%;
 }
+
 tr{
 	width: 100%;
-	border: none;
-	
 }
+
+tr:hover{
+	background: #CCCCCC;
+}
+
 table{
-width: 100%
+	width: 100%;
 }
 
+
 #icon{
 	width: 35px;
-}
-
-table tr td {
-	padding-left: 0;
-	padding-right: 0;
-	height: 30px;
-	margin: 0;
 	border: none;
 }
-a{
+
+
+a.file{
+	display: block;
 	text-decoration: none;
 	color: black;
-/*	outline: 1px solid red;*/
+	width:100%;
+	height: 30px;
 }
 
-td{
-/*	outline: 1px solid black;*/
+#up{
+	font-weight: bold;
 }
 
+
+
+/************************************************
+Menu
+*************************************************/
+
 #menu{
 	position: fixed;
 	top:0;
@@ -55,6 +73,12 @@ td{
 	box-shadow: 3px -3px 5px black;
 }
 
+
+/************************************************
+Tools
+*************************************************/
+
+
 #new-folder-bg{
 	width: 100%;
 	height: 100%;
@@ -70,6 +94,7 @@ td{
 
 }
 
+
 #new-folder-area{
 	height: 190px;
 	width: 400px;
@@ -97,11 +122,11 @@ input.new-folder-input[type=text]{
 	padding-left: 5px;
 }
 
-/*input.new-folder-input[type=checkbox]*/
 
 input[type=checkbox]{
 		display:inline;
 		margin-left: 5px;
+		margin-top: 10px;
 		width: 10px;
 }
 
@@ -164,4 +189,12 @@ input.upload-input[type=file]{
 label{
 	display: inline;
 }
-dis
\ No newline at end of file
+
+#close{
+		font-size: 25px;
+		position: absolute;
+		top: 0;
+		right: 00px;
+		margin-right: 10px;
+		cursor: pointer;
+}
\ No newline at end of file