Fix some alginment issues

res/include/script/file_manager/DirectoryElement.js

@@ -90,6 +90,7 @@ DirectoryElement.prototype.renderFiles = function() {
 // search term will be put into visibleFiles. The visibleFiles array will then
 // be rendered by renderVisibleFiles
 DirectoryElement.prototype.search = function(term) {
+	term = term.toLowerCase()
 	this.lastSearchTerm = term
 	this.visibleFiles = []
 
@@ -102,8 +103,18 @@ DirectoryElement.prototype.search = function(term) {
 		return
 	}
 
+	let fileName = ""
 	for (let i in this.allFiles) {
-		if (this.allFiles[i].name.toLowerCase().includes(term.toLowerCase())) {
+		fileName = this.allFiles[i].name.toLowerCase()
+
+		// If there's an exact match we'll show it as the only result
+		if (fileName === term) {
+			this.visibleFiles = [i]
+			break
+		}
+
+		// If a file name contains the search term we include it in the results
+		if (fileName.includes(term)) {
 			this.visibleFiles.push(i)
 		}
 	}
@@ -112,6 +123,15 @@ DirectoryElement.prototype.search = function(term) {
 	this.renderVisibleFiles(true)
 }
 
+// searchSubmit opens the first file in the search results
+DirectoryElement.prototype.searchSubmit = function() {
+	if (this.visibleFiles.length === 0) {
+		return // There are no files visible
+	}
+
+	window.location = this.getVisibleFile(0).href
+}
+
 DirectoryElement.prototype.sortBy = function(field) {
 	if (field === "") {
 		// If no sort field is provided we use the last used sort field
@@ -169,7 +189,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
 	let el = document.createElement("a")
 	el.classList = "node"
 	el.href = file.href
-	el.target = "_blank"
+	// el.target = "_blank"
 	el.title = file.name
 	el.setAttribute("fileindex", index)
 

res/include/script/file_manager/FileManager.js

@@ -14,10 +14,14 @@ function FileManager(windowElement) {
 	document.addEventListener("keydown", e => { this.keyboardEvent(e) })
 
 	this.inputSearch.addEventListener("keyup", e => {
-		if (e.keyCode === 27) {
+		if (e.keyCode === 27) { // Escape
 			e.preventDefault()
 			this.inputSearch.blur()
 			return
+		} else if (e.keyCode === 13) { // Enter
+			e.preventDefault()
+			this.directoryElement.searchSubmit()
+			return
 		}
 		requestAnimationFrame(() => {
 			this.directoryElement.search(this.inputSearch.value)

res/include/script/file_viewer/Viewer.js

@@ -67,7 +67,6 @@ Viewer.prototype.setFile = function(file) {
 	this.file = file
 
 	if (this.isList) {
-		document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em"
 		document.getElementById("file_viewer_list_title").innerText = this.title
 		document.getElementById("file_viewer_file_title").innerText = file.name
 		document.title = this.title + " ~ " + file.name + " ~ pixeldrain"

res/include/style/layout.css

@@ -405,6 +405,7 @@ select {
 	box-shadow: 2px 2px 6px -3px var(--shadow_color);
 	line-height: 1em;
 	overflow: hidden;
+	font-size: 1em; /* Sometimes user-agents have different font sizes for buttons and links */
 	text-decoration: none;
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);

res/include/style/viewer.css

@@ -32,7 +32,7 @@
 	flex-shrink: 0;
 	margin-left: 6px;
 	margin-right: 6px;
-	display: inline-flex;
+	display: inline;
 }
 .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
 	flex-grow: 1;
@@ -40,14 +40,15 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	line-height: 2em;
+	line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	justify-content: center;
 }
 .file_viewer > .file_viewer_headerbar > .button_home > svg {
 	height: 1.6em;
 	width: 1.6em;
-	margin: -0.1em 0.2em -0.1em -0.1em;
+	margin: 0 0.2em 0 0;
 }
 .file_viewer > .file_viewer_headerbar > .button_home::after {
 	content: "pixeldrain";

res/template/account/file_manager.html

@@ -15,16 +15,10 @@
 			<div id="file_manager" class="file_manager">
 				<div id="nav_bar" class="nav_bar highlight_1">
 					<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
-					<!-- <div class="spacer"></div>
-					<button id="btn_back" >⇐</button id="btn_forward">
-					<button id="btn_up" >⇑</button id="btn_forward">
-					<button id="btn_forward">⇒</button>
-					<div class="spacer"></div>
-					<button id="btn_home">🏠</button> -->
 					<div class="spacer"></div>
 					<input class="breadcrumbs" type="text" value="/{{.User.Username}}"/>
 					<div class="spacer"></div>
-					<input id="input_search" class="input_search" type="text" placeholder="Search..."/>
+					<input id="input_search" class="input_search" type="text" placeholder="press / to search"/>
 					<div class="spacer"></div>
 					<button id="btn_reload"><i class="icon">refresh</i></button>
 				</div>

res/template/file_viewer.html

@@ -28,7 +28,7 @@
 				</a>
 				<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
 					<div id="file_viewer_list_title"></div>
-					<div id="file_viewer_file_title">{{.Title}}</div>
+					<div id="file_viewer_file_title">loading...</div>
 				</div>
 			</div>
 			<div id="list_navigator" class="list_navigator"></div>