Merge branch 'pr/62'

Conflicts:
	assets/js/min/main.js

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,9 +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 #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 {

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("") });
@@ -100,7 +106,7 @@ $(document).ready(function(){
 			if (visible.photo()) photo.setTitle(photo.getID());
 			else album.setTitle(album.getID());
 		})
-
+    
 		/* 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

@@ -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>