Merge branch 'feat/ui-design'

Author: Nikola-Mircic

client/assets/css/history.css

@@ -0,0 +1,7 @@
+#history{
+    display: block;
+    position: relative;
+    width: 80%;
+    height: fit-content;
+    margin: 10px auto;
+}

client/assets/css/index.css

@@ -11,17 +11,15 @@
     border-radius: 15px;
     background-color: rgba(255, 255, 255, 0.438);
     width: 100%;
-    height: 40vh;
+    height: fit-content;
 }
 
 #dropHints{
     display: block;
     position: relative;
     width: 70%;
     height: 70%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    margin: 15px auto;
     font-size: 1.5rem;
 }
 
@@ -32,14 +30,13 @@
 
 #dropHints button{
     display: block;
-    position: absolute;
+    position: relative;
     width: fit-content;
     max-width: 70%;
     height: fit-content;
     padding: 0.4em 1em 0.4em 1em;
-    left: 50%;
-    bottom: 15%;
-    transform: translateX(-50%);
+    
+    margin: 20px auto;
     font-size: 100%;
 }
 
@@ -108,13 +105,6 @@
     max-width: 90%;
 }
 
-/*#fileStats .fileControl{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    min-width: 50%;
-}*/
-
 #fileStats div{
     display: flex;
 }
@@ -136,10 +126,6 @@
     border: none;
 }
 
-/*#fileStats button:hover{
-    
-}*/
-
 #fileStats>p, .folderStats>p{
     word-break: break-all;
     white-space: normal;

client/assets/css/main.css

@@ -10,9 +10,9 @@ body{
 	width: 100%;
 	min-width: fit-content;
 	box-sizing: border-box;
+	word-wrap: break-word;
 }
 
-
 #header {
 	-webkit-appearance: none;
 	display: flex;
@@ -26,16 +26,12 @@ body{
 	border-bottom-width: 5px;
 	border-style: solid; 
 	border-color: rgba(16, 14, 54, 0.9);
-	/*width: 90%;*/
-	min-width: 500px;
 	height: fit-content;
 	margin: 0 auto;
 }
 
 .headerContainer{
 	display: block;
-	width:50%;
-	min-width: 500px;
 	text-align: center;
 }
 
@@ -50,8 +46,7 @@ body{
 	font-weight: 5px;
 	font-family: 'Times New Roman', Times, serif;
 	border: 2px solid #202020;
-	padding-top: 0.2rem;
-	padding-bottom: 0.2rem;
+	padding: .2rem 2rem;
 	margin-top: 0.3rem;
 	margin-bottom: 0.3rem;
 }
@@ -65,31 +60,31 @@ body{
 	position: relative;
 	flex-wrap: wrap;
 	justify-content: center;
+	align-items: center;
 	/*margin: 5px auto;*/
 	width: fit-content;
-	min-width: 500px;
+	min-width: 400px;
 	height: 35%;
 	min-height: 50px;
 	font-size: 1.5rem;
 }
 
 .profileField input {
-	display: flexbox;
-	margin: auto;
+	display: block;
+	margin: 5px;
 	background-color: rgba(255, 255, 255, 0.438);
 	border-radius: 5px;
-	width: 60%;
 	min-width: 230px;
 	height: 90%;
 	text-align: center;
 	font-size: 100%;
 }
 
 #profile h3 {
-	display: flexbox;
+	display: block;
 	border-bottom: 2px solid blue;
-	margin: auto;
-	width: 60%;
+	margin: 5px;
+	/*width: 60%;*/
 	min-width: 230px;
 	height: 90%;
 	text-align: center;
@@ -99,10 +94,10 @@ body{
 }
 
 .profileField button {
-	display: flexbox;
+	display: block;
 	margin: auto;
 	border-radius: 5px;
-	width: 35%;
+	/*width: 35%;*/
 	min-width: 150px;
 	height: 90%;
 	font-size: 100%;
@@ -128,11 +123,13 @@ button:hover {
 	align-items: center;
 	flex-direction: row;
 	flex-wrap: wrap;
+	justify-content: stretch;
 }
 
 .nav li{
 	display: block;
-	width: calc(100%/3);
+	min-width: 150px;
+	flex-grow: 1;
 	list-style: none;
 	height: 2.3rem;
 	margin: auto;

client/history.html

@@ -4,8 +4,7 @@
 	<title>Network file manager</title>
 
 	<link rel="stylesheet" type="text/css" href="./assets/css/main.css">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 	<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
 	<script type="text/javascript" src="./assets/js/jszip.min.js"></script>
@@ -41,11 +40,13 @@ <h3 name="profileName" id="profileName"></h3>
 		<li><a onclick="redirect('/history');"><button active><i class="fa-solid fa-clock-rotate-left"></i> History</button></a></li>
 	</nav>
 
-	<p id="test"></p>
+	<section id="history">
+
+	</section>
 
 	<script>
 		function print(data){
-			document.getElementById("test").innerHTML = data;
+			document.getElementById("history").innerHTML = data;
 		}
 
 		fetch(window.location+"get-history")

client/index.html

@@ -4,7 +4,7 @@
 	<title>Network file manager</title>
 	<link rel="stylesheet" type="text/css" href="./assets/css/main.css">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densityDpi=device-dpi">
 
 	<script src="https://kit.fontawesome.com/138f40277e.js" crossorigin="anonymous"></script>
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>

client/sent.html

@@ -3,7 +3,7 @@
 <head>
 	<title>Network file manager</title>
 	<link rel="stylesheet" type="text/css" href="./assets/css/main.css">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
 
 	<script type="text/javascript" src="/socket.io/socket.io.js"  defer></script>
 	<script type="text/javascript" src="./assets/js/jquery.min.js" defer></script>

db/logs/log_history.dat

@@ -1 +1 @@
-{"logs":[0]}
+{"logs":[{"id":"192.168.1.8-192.168.1.3","from":"192.168.1.8","path":"./db/sent.html","filename":"sent.html","time":"9/5/2022, 22:39:16:463"},{"id":"192.168.1.8-192.168.1.3","from":"192.168.1.8","path":"./db/history.html","filename":"history.html","time":"9/5/2022, 22:39:16:609"},{"id":"192.168.1.8-192.168.1.3","from":"192.168.1.8","path":"./db/index.html","filename":"index.html","time":"9/5/2022, 22:39:16:659"},0]}