Clear search improvements

assets/css/modules/animations.css

@@ -282,30 +282,4 @@
 	100% {
 		opacity: 1;
 	}
-}
+}
-
-/* rotate ------------------------------------------------
-@-webkit-keyframes rotate {
-	0% {
-		-webkit-transform: rotate(0deg);
-	}
-	100% {
-		-webkit-transform: rotate(360deg);
-	}
-}
-@-moz-keyframes rotate {
-	0% {
-		-moz-transform: rotate(0deg);
-	}
-	100% {
-		-moz-transform: rotate(360deg);
-	}
-}
-@keyframes rotate {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-} */

assets/css/modules/header.css

@@ -122,30 +122,30 @@ 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;
+		header #search:focus {
-        font-size: 24px;
+			width: 140px;
-        right: 61px;
+		}
-        padding-top: 0px;
+		header #search:focus ~ #clearSearch {
-        padding-bottom: 0;
+			opacity: 1;
-        top: 13px;
+		}
-        display: none;
+		
-    }
+	header #clearSearch {
-	header #search:focus {
+		position: absolute;
-		width: 140px;
+		top: 15px;
+		right: 81px;
+		padding: 0;
+		font-size: 20px;
+		opacity: 0;
+		
+		-webkit-transition: opacity .2s ease-out;
+		-moz-transition: opacity .2s ease-out;
+		transition: opacity .2s ease-out;
 	}
-
+	
-    #search:focus ~ #clearSearch {
+		header #clearSearch:hover {
-        display: block;
+			opacity: 1;
-    }
+		}
-    
-    #clearSearch:hover + #search {
-        width: 140px;
-    }
-
-    #clearSearch:hover {
-        display: block;
-    }
 
 	/* Tools ------------------------------------------------*/
 	header .tools:first-of-type {

assets/js/modules/init.js

@@ -41,6 +41,12 @@ $(document).ready(function(){
 
 	/* Search */
 	$("#search").on("keyup click", function() { search.find($(this).val()) });
+	
+	/* Clear Search */
+	$("#clearSearch").on(event_name, function () { 
+	    $("#search").focus();
+	    search.reset();
+	});
 
 	/* Back Buttons */
 	$("#button_back_home").on(event_name, function() { lychee.goto("") });
@@ -101,13 +107,6 @@ $(document).ready(function(){
 			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")) })
 		.on("click", ".photo", function() { lychee.goto(album.getID() + "/" + $(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
+		<!-- Production -->
-		<link type="text/css" rel="stylesheet" href="assets/css/min/main.css">-->
+		<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,7 +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>
+			<a id="clearSearch" class="button right">&times;</a>
 		</div>
 		<div id="tools_album">
 			<a class="button left icon-arrow-left" id="button_back_home"></a>
@@ -99,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>
@@ -114,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 
+	<!-- Production -->
-	<script defer type="text/javascript" src="assets/js/min/main.js"></script> -->
+	<script defer type="text/javascript" src="assets/js/min/main.js"></script>
 
 	</body>
 </html>