Merge branch 'pr/62'

Conflicts:
	assets/js/min/main.js

assets/css/modules/animations.css

@@ -283,29 +283,3 @@
 		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,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 #search:focus {
+	
-		width: 140px;
+		header #search:focus {
+			width: 140px;
+		}
+		header #search:focus ~ #clearSearch {
+			opacity: 1;
+		}
+		
+	header #clearSearch {
+		position: absolute;
+		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;
 	}
 	
+		header #clearSearch:hover {
+			opacity: 1;
+		}
+
 	/* Tools ------------------------------------------------*/
 	header .tools:first-of-type {
 		margin-right: 6px;

assets/js/modules/init.js

@@ -42,6 +42,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("") });
 	$("#button_back").on(event_name, function() { lychee.goto(album.getID()) });

index.html

@@ -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">&times;</a>
 		</div>
 		<div id="tools_album">
 			<a class="button left icon-arrow-left" id="button_back_home"></a>