Fixed search x, new InfoBox close

index.html

@@ -46,7 +46,7 @@
 			</a>
 			<a class="button_divider"></a>
 			<input id="search" type="text" name="search" placeholder="Search …">
-			<a id="clearSearch" class="button right">&times;</a>
+			<a id="clearSearch">&times;</a>
 		</div>
 		<div class="toolbar" id="tools_album">
 			<a class="button left" id="button_back_home" title="Close Album">

src/scripts/build.coffee

@@ -5,6 +5,13 @@
 
 window.build = {}
 
+build.iconic = (icon, classes, path) ->
+
+	path	= path || 'src/images/iconic.svg'
+	classes	= classes || 'iconic'
+
+	"<svg viewBox='0 0 8 8' class='#{ classes }'><use xlink:href='#{ path }##{ icon }'></use></svg>"
+
 build.divider = (title) ->
 
 	"<div class='divider fadeIn'><h1>#{ title }</h1></div>"
@@ -258,7 +265,7 @@ build.tags = (tags, forView) ->
 build.infoboxPhoto = (data, forView) ->
 
 	html =	"""
-			<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
+			<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
 			<div class='wrapper'>
 			"""
 
@@ -356,7 +363,7 @@ build.infoboxPhoto = (data, forView) ->
 build.infoboxAlbum = (data, forView) ->
 
 	html =	"""
-			<div class='header'><h1>About</h1><a class='icon-remove-sign'></a></div>
+			<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
 			<div class='wrapper'>
 			"""
 

src/scripts/init.js

@@ -28,6 +28,7 @@ $(document).ready(function() {
 	$('#button_settings')		.on(event_name, contextMenu.settings);
 	$('#button_info_album')		.on(event_name, view.infobox.show);
 	$('#button_info')			.on(event_name, view.infobox.show);
+	$('.button_add')			.on(event_name, contextMenu.add);
 	$('#button_more')			.on(event_name, function(e) { contextMenu.photoMore(photo.getID(), e) });
 	$('#button_move')			.on(event_name, function(e) { contextMenu.move([photo.getID()], e) });
 	$('#hostedwith')			.on(event_name, function() { window.open(lychee.website) });
@@ -54,7 +55,7 @@ $(document).ready(function() {
 
 	/* Infobox */
 	$('#infobox')
-		.on(event_name, '.header a',				view.infobox.hide)
+		.on(event_name, '.header .close',			view.infobox.hide)
 		.on(event_name, '#edit_title_album',		function() { album.setTitle([album.getID()]) })
 		.on(event_name, '#edit_description_album',	function() { album.setDescription(album.getID()) })
 		.on(event_name, '#edit_title',				function() { photo.setTitle([photo.getID()]) })
@@ -160,13 +161,9 @@ $(document).ready(function() {
 		.on(event_name, '.message .button:first',	function() { if (modal.fns!==null) modal.fns[0](); if (!visible.signin()) modal.close() })
 		.on(event_name, '.message .button:last',	function() { if (modal.fns!==null) modal.fns[1](); if (!visible.signin()) modal.close() })
 
-		/* Add Dialog */
-		.on(event_name, '.button_add', contextMenu.add)
-
 		/* Context Menu */
-		.on('contextmenu', '.photo',			function(e) { contextMenu.photo(photo.getID(), e) })
-		.on('contextmenu', '.album',			function(e) { contextMenu.album(album.getID(), e) })
-		.on(event_name, '.contextmenu_bg',		contextMenu.close)
+		.on('contextmenu', '.photo', function(e) { contextMenu.photo(photo.getID(), e) })
+		.on('contextmenu', '.album', function(e) { contextMenu.album(album.getID(), e) })
 
 		/* Infobox */
 		.on(event_name, '#infobox_overlay', view.infobox.hide)

src/styles/_header.scss

@@ -122,14 +122,19 @@ header {
 
 	#clearSearch {
 		position: absolute;
-		top: 15px;
-		right: 81px;
+		top: 13px;
+		right: 78px;
 		padding: 0;
+		color: #888;
 		font-size: 20px;
 		opacity: 0;
-		transition: opacity .2s ease-out;
+		transition: opacity .2s ease-out, color .2s ease-out;
+		cursor: pointer;
 
-		&:hover { opacity: 1; }
+		&:hover {
+			color: #fff;
+			opacity: 1;
+		}
 	}
 
 	/* Hosted with Lychee ------------------------------------------------*/

src/styles/_infobox.scss

@@ -56,6 +56,7 @@
 		height: 49px;
 		width: 100%;
 		background-image: linear-gradient(to bottom, #2A2A2A, #131313);
+		border-bottom: 1px solid rgba(0, 0, 0, .7);
 	}
 
 	.header h1 {
@@ -69,17 +70,20 @@
 		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 	}
 
-	.header a {
+	.header .close {
 		float: right;
-		padding: 15px 65px 15px 15px;
-		color: #fff;
-		font-size: 20px;
-		font-weight: bold;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
-		opacity: .5;
+		padding: 16px 65px 12px 15px;
+		width: 15px;
 		cursor: pointer;
 
-		&:hover { opacity: 1; }
+		.iconic {
+			fill: #888;
+			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
+			transition: fill .2s ease;
+		}
+
+		&:hover .iconic { fill: #fff; }
+
 	}
 
 	/* Seperator ------------------------------------------------*/
@@ -90,7 +94,7 @@
 		box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
 
 		&:first-child {
-			border: none;
+			border-top: 1px solid rgba(255, 255, 255, .02);
 			box-shadow: none;
 		}
 

src/styles/main.scss

@@ -33,7 +33,7 @@ body {
 .center {
 	position: absolute;
 	left: 50%;
-	top:50%;
+	top: 50%;
 }
 
 input {