Add an 'X' button for clearing text in the search field.

assets/css/modules/header.css

@@ -122,10 +122,31 @@ header {
 		-moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
 		transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
 	}
+    header #clearSearch {
+        position: absolute;
+        font-size: 24px;
+        right: 61px;
+        padding-top: 0px;
+        padding-bottom: 0;
+        top: 13px;
+        display: none;
+    }
 	header #search:focus {
 		width: 140px;
 	}
 
+    #search:focus ~ #clearSearch {
+        display: block;
+    }
+    
+    #clearSearch:hover + #search {
+        width: 140px;
+    }
+
+    #clearSearch:hover {
+        display: block;
+    }
+
 	/* Tools ------------------------------------------------*/
 	header .tools:first-of-type {
 		margin-right: 6px;

assets/js/modules/init.js

@@ -100,6 +100,13 @@ $(document).ready(function(){
 			if (visible.photo()) photo.setTitle(photo.getID());
 			else album.setTitle(album.getID());
 		})
+    
+        /* Clear Search */
+        .on(event_name, "#clearSearch", function (e) { 
+            e.preventDefault();
+            $("#search").val("");
+            $("#search").focus();
+        })
 
 		/* Navigation */
 		.on("click", ".album", function() { lychee.goto($(this).attr("data-id")) })

index.html

@@ -12,7 +12,7 @@
 		<!-- CSS -->
 		<link type="text/css" rel="stylesheet" href="assets/css/min/reset.css">
 
-		<!-- Development
+		<!-- Development -->
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/upload.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/tooltip.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/misc.css">
@@ -25,10 +25,10 @@
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/font.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/contextmenu.css">
 		<link type="text/css" rel="stylesheet" href="assets/css/modules/content.css">
-		<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css"> -->
+		<link type="text/css" rel="stylesheet" href="assets/css/modules/animations.css">
 
-		<!-- Production -->
-		<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">
+		<!-- Production
+		<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">-->
 
 		<link rel="shortcut icon" href="assets/img/favicon.ico">
 		<link rel="apple-touch-icon" href="assets/img/apple-touch-icon-iphone.png" sizes="120x120">
@@ -55,6 +55,7 @@
 			<a class="button right icon icon-plus button_add"></a>
 			<a class="button_divider"></a>
 			<input id="search" type="text" name="search" placeholder="Search …">
+			<a id="clearSearch" class="button right" href="#">&times;</a>
 		</div>
 		<div id="tools_album">
 			<a class="button left icon-arrow-left" id="button_back_home"></a>
@@ -98,7 +99,7 @@
 	<!-- JS -->
 	<script defer type="text/javascript" src="assets/js/min/frameworks.js"></script>
 
-	<!-- Development
+	<!-- Development -->
 	<script defer type="text/javascript" src="assets/js/modules/init.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/lychee.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/build.js"></script>
@@ -113,10 +114,10 @@
 	<script defer type="text/javascript" src="assets/js/modules/visible.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/loadingBar.js"></script>
 	<script defer type="text/javascript" src="assets/js/modules/contextMenu.js"></script>
-	<script defer type="text/javascript" src="assets/js/modules/search.js"></script> -->
+	<script defer type="text/javascript" src="assets/js/modules/search.js"></script>
 
-	<!-- Production -->
-	<script defer type="text/javascript" src="assets/js/min/main.js"></script>
+	<!-- Production 
+	<script defer type="text/javascript" src="assets/js/min/main.js"></script> -->
 
 	</body>
 </html>