Added Infobox basic elements to index.html

index.html

@@ -59,7 +59,7 @@
 			<a class="button right" id="button_trash_album" title="Delete Album">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
 			</a>
-			<a class="button right" id="button_info_album" title="Show Info">
+			<a class="button right" id="button_info_album" title="About Album">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
 			</a>
 			<a class="button right" id="button_archive" title="Download Album">
@@ -80,7 +80,7 @@
 			<a class="button right" id="button_trash" title="Delete">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
 			</a>
-			<a class="button right" id="button_info" title="Show Info">
+			<a class="button right" id="button_info" title="About Photo">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
 			</a>
 			<a class="button right" id="button_move" title="Move">
@@ -104,7 +104,16 @@
 	<div id="imageview"></div>
 
 	<!-- Infobox -->
-	<div id="infobox"></div>
+	<div id="infobox">
+		<div class='header'>
+			<h1>About</h1>
+			<a class='close' title='Close About'>
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#circle-x"></use></svg>
+			</a>
+		</div>
+		<div class='wrapper'>
+		</div>
+	</div>
 
 	<!-- Upload -->
 	<div id="upload">

src/scripts/build.coffee

@@ -8,9 +8,9 @@ window.build = {}
 build.iconic = (icon, classes, path) ->
 
 	path	= path || 'src/images/iconic.svg'
-	classes	= classes || 'iconic'
+	classes	= classes || ''
 
-	"<svg viewBox='0 0 8 8' class='#{ classes }'><use xlink:href='#{ path }##{ icon }'></use></svg>"
+	"<svg viewBox='0 0 8 8' class='iconic #{ classes }'><use xlink:href='#{ path }##{ icon }'></use></svg>"
 
 build.divider = (title) ->
 
@@ -264,10 +264,7 @@ build.tags = (tags, forView) ->
 
 build.infoboxPhoto = (data, forView) ->
 
-	html =	"""
+	html =	""
-			<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
-			<div class='wrapper'>
-			"""
 
 	switch data.public
 		when '0' then	visible = 'No'
@@ -355,17 +352,13 @@ build.infoboxPhoto = (data, forView) ->
 	html +=	"""
 			</table>
 			<div class='bumper'></div>
-			</div>
 			"""
 
 	return html
 
 build.infoboxAlbum = (data, forView) ->
 
-	html =	"""
+	html =	""
-			<div class='header'><h1>About</h1><a class='close'>#{ build.iconic('circle-x') }</a></div>
-			<div class='wrapper'>
-			"""
 
 	switch data.public
 		when '0' then	visible = 'No'
@@ -425,7 +418,6 @@ build.infoboxAlbum = (data, forView) ->
 	html += """
 			</table>
 			<div class='bumper'></div>
-			</div>
 			"""
 
 	return html

src/scripts/init.js

@@ -42,6 +42,9 @@ $(document).ready(function() {
 	/* Search */
 	$('#search').on('keyup click', function() { search.find($(this).val()) });
 
+	/* Infobox */
+	$('#infobox .header .close').on(event_name, view.infobox.hide);
+
 	/* Clear Search */
 	$('#clearSearch').on(event_name, function () {
 		$('#search').focus();
@@ -55,7 +58,6 @@ $(document).ready(function() {
 
 	/* Infobox */
 	$('#infobox')
-		.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()]) })

src/scripts/view.js

@@ -360,14 +360,14 @@ view.album = {
 
 	password: function() {
 
-		if (album.json.password==1) $('#infobox .attr_password').html('Yes');
+		if (album.json.password==1)	$('#infobox .attr_password').html('Yes');
-		else $('#infobox .attr_password').html('No');
+		else						$('#infobox .attr_password').html('No');
 
 	},
 
 	infobox: function() {
 
-		if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.html(build.infoboxAlbum(album.json)).show();
+		if ((visible.album()||!album.json.init)&&!visible.photo()) lychee.infobox.find('.wrapper').html(build.infoboxAlbum(album.json));
 
 	}
 
@@ -495,7 +495,7 @@ view.photo = {
 
 	infobox: function() {
 
-		lychee.infobox.html(build.infoboxPhoto(photo.json)).show();
+		lychee.infobox.find('.wrapper').html(build.infoboxPhoto(photo.json));
 
 	}
 

src/styles/_infobox.scss

@@ -7,8 +7,8 @@
 	position: fixed;
 	width: 100%;
 	height: 100%;
-	top: 0px;
+	top: 0;
-	left: 0px;
+	left: 0;
 	background-color: rgba(0, 0, 0, .8);
 }
 
@@ -16,16 +16,15 @@
 
 	z-index: 4;
 	position: fixed;
-	right: 0px;
+	right: -370px;
 	width: 350px;
 	height: 100%;
 	background-color: rgba(20, 20, 20, .98);
 	box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
-	display: none;
+	transform: translateX(0);
-	transform: translateX(370px);
 	transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
 
-	&.active { transform: translateX(50px); }
+	&.active { transform: translateX(-92%); }
 
 	/* Misc ------------------------------------------------*/
 	.wrapper {