button--left and --right, content::before, new back and forward photo navigation

index.html

@@ -34,66 +34,66 @@
 
 		<!-- Buttons -->
 		<div class="toolbar" id="tools_albums">
-			<a class="button left" id="button_settings" title="Settings">
+			<a class="button button--left" id="button_settings" title="Settings">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cog"></use></svg>
 			</a>
-			<a class="button left" id="button_signin" title="Sign In">
+			<a class="button button--left" id="button_signin" title="Sign In">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#account-login"></use></svg>
 			</a>
 			<a id="hostedwith">Hosted with Lychee</a>
-			<a class="button right button_add" title="Add">
+			<a class="button button--right button_add" title="Add">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<a class="button right" id="button_search" title="Search">
+			<a class="button button--right" id="button_search" title="Search">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#magnifying-glass"></use></svg>
 			</a>
 			<!-- <input id="search" type="text" name="search" placeholder="Search …">
 			<a id="clearSearch">&times;</a> -->
 		</div>
 		<div class="toolbar" id="tools_album">
-			<a class="button left" id="button_back_home" title="Close Album">
+			<a class="button button--left" id="button_back_home" title="Close Album">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
 			</a>
-			<a class="button right button_add" title="Add">
+			<a class="button button--right button_add" title="Add">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<a class="button right" id="button_trash_album" title="Delete Album">
+			<a class="button 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="About Album">
+			<a class="button 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">
+			<a class="button button--right" id="button_archive" title="Download Album">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cloud-download"></use></svg>
 			</a>
-			<a class="button right" id="button_share_album" title="Share Album">
+			<a class="button button--right" id="button_share_album" title="Share Album">
 				<svg viewBox="0 0 8 8" class="iconic iconic--eye"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
 			</a>
 		</div>
 		<div class="toolbar" id="tools_photo">
-			<a class="button left" id="button_back" title="Close Photo">
+			<a class="button button--left" id="button_back" title="Close Photo">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
 			</a>
-			<a class="button right" id="button_more" title="More">
+			<a class="button button--right" id="button_more" title="More">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#ellipses"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<a class="button right" id="button_trash" title="Delete">
+			<a class="button 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="About Photo">
+			<a class="button 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">
+			<a class="button button--right" id="button_move" title="Move">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#folder"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<a class="button right button--eye" id="button_share" title="Share Photo">
+			<a class="button button--right button--eye" id="button_share" title="Share Photo">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
 			</a>
-			<a class="button right button--star" id="button_star" title="Star Photo">
+			<a class="button button--right button--star" id="button_star" title="Star Photo">
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#star"></use></svg>
 			</a>
 		</div>

src/scripts/build.coffee

@@ -106,8 +106,8 @@ build.imageview = (data, size, visibleControls) ->
 	return '' if not data?
 
 	html =	"""
-			<div class='arrow_wrapper previous'><a id='previous' class='icon-caret-left'></a></div>
-			<div class='arrow_wrapper next'><a id='next' class='icon-caret-right'></a></div>
+			<div class='arrow_wrapper previous'><a id='previous'>#{ build.iconic('caret-left') }</a></div>
+			<div class='arrow_wrapper next'><a id='next'>#{ build.iconic('caret-right') }</a></div>
 			"""
 
 	if size is 'big'

src/scripts/view.js

@@ -488,8 +488,30 @@ view.photo = {
 
 		lychee.imageview.html(build.imageview(photo.json, photo.getSize(), visible.controls()));
 
-		if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==='')||lychee.viewMode) $('a#next').hide();
-		if ((album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==='')||lychee.viewMode) $('a#previous').hide();
+		var nextArrow		= lychee.imageview.find('a#next'),
+			previousArrow	= lychee.imageview.find('a#previous'),
+			hasNext			= album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].nextPhoto==='',
+			hasPrevious		= album.json&&album.json.content&&album.json.content[photo.getID()]&&album.json.content[photo.getID()].previousPhoto==='';
+
+		if (hasNext||lychee.viewMode) { nextArrow.hide(); }
+		else {
+
+			var nextPhotoID	= album.json.content[photo.getID()].nextPhoto,
+				nextPhoto	= album.json.content[nextPhotoID];
+
+			nextArrow.css('background-image', 'linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url("' + nextPhoto.thumbUrl + '")');
+
+		}
+
+		if (hasPrevious||lychee.viewMode) { previousArrow.hide(); }
+		else {
+
+			var previousPhotoID	= album.json.content[photo.getID()].previousPhoto,
+				previousPhoto	= album.json.content[previousPhotoID];
+
+			previousArrow.css('background-image', 'linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url("' + previousPhoto.thumbUrl + '")');
+
+		};
 
 	},
 

src/styles/_content.scss

@@ -8,12 +8,21 @@
 	width: 100%;
 	min-height: calc(100% - 83px);
 	-webkit-overflow-scrolling: touch;
+
+	&::before {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 1px;
+		border-top: 1px solid rgba(255, 255, 255, .02);
+	}
 }
 
 	/* Albums and Photos ------------------------------------------------*/
 	.album,
 	.photo {
 		float: left;
+		position: relative;
 		width: 202px;
 		height: 202px;
 		margin: 30px 0 0 30px;
@@ -167,9 +176,7 @@
 		text-shadow: 0 1px 0 rgba(255, 255, 255, .01);
 		text-align: center;
 
-		.icon {
-			font-size: 80px;
-		}
+		.icon { font-size: 80px; }
 
 		p {
 			font-size: 18px;

src/styles/_header.scss

@@ -64,9 +64,9 @@ header {
 		width: 15px;
 		cursor: pointer;
 
-		&.left { float: left; }
+		&--left { float: left; }
 
-		&.right { float: right; }
+		&--right { float: right; }
 
 		.iconic {
 			fill: #aaa;

src/styles/_imageview.scss

@@ -49,7 +49,7 @@
 	/* Previous/Next Buttons ------------------------------------------------*/
 	.arrow_wrapper {
 		position: fixed;
-		width: 20%;
+		width: 15%;
 		height: calc(100% - 60px);
 		top: 60px;
 		z-index: 1;
@@ -58,24 +58,42 @@
 
 		&.next { right: 0; }
 
-		a#previous { left: 20px; }
-
-		a#next { right: 20px; }
-
 		a {
 			position: fixed;
 			top: 50%;
-			margin-top: -10px;
-			color: #fff;
-			font-size: 50px;
-			text-shadow: 0 1px 2px #000;
+			margin: -19px 0 0;
+			padding: 8px 12px;
+			width: 16px;
+			height: 22px;
+			// The background-image will be styled dynamically via JS
+			// background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('');
+			background-size: 100% 100%;
+			border: 1px solid rgba(255, 255, 255, .8);
 			cursor: pointer;
-			opacity: 0;
+			opacity: .6;
 			z-index: 2;
-			transition: opacity .2s;
+			transition: transform .2s ease-out, opacity .2s ease-out;
+
+			&#previous {
+				left: -1px;
+				transform: translateX(-100%);
+			}
+
+			&#next {
+				right: -1px;
+				transform: translateX(100%);
+			}
 		}
 
-		&:hover a { opacity: .2; }
+		&:hover a#previous,
+		&:hover a#next { transform: translateX(0); }
+
+		a:hover { opacity: 1; }
+
+		.iconic {
+			fill: rgba(255, 255, 255, .8);
+			filter: drop-shadow( 0 1px 0 rgba(0, 0, 0, .4) );
+		}
 	}
 
 }