diff --git a/dist/main.css b/dist/main.css
index a2d4ad9..666e7cf 100644
Binary files a/dist/main.css and b/dist/main.css differ
diff --git a/dist/main.js b/dist/main.js
index b578539..3850ab1 100644
Binary files a/dist/main.js and b/dist/main.js differ
diff --git a/dist/view.js b/dist/view.js
index 494d917..35ca7eb 100644
Binary files a/dist/view.js and b/dist/view.js differ
diff --git a/index.html b/index.html
index 34d5dfc..36d3c2f 100644
--- a/index.html
+++ b/index.html
@@ -34,66 +34,66 @@
diff --git a/src/scripts/build.coffee b/src/scripts/build.coffee
index 6be120a..3fdfa8b 100644
--- a/src/scripts/build.coffee
+++ b/src/scripts/build.coffee
@@ -106,8 +106,8 @@ build.imageview = (data, size, visibleControls) ->
return '' if not data?
html = """
-
-
+
+
"""
if size is 'big'
diff --git a/src/scripts/view.js b/src/scripts/view.js
index 15b74ae..044dc76 100644
--- a/src/scripts/view.js
+++ b/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 + '")');
+
+ };
},
diff --git a/src/styles/_content.scss b/src/styles/_content.scss
index 4e6b7e7..8d72e76 100644
--- a/src/styles/_content.scss
+++ b/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;
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
index d4faa07..89ae2ef 100644
--- a/src/styles/_header.scss
+++ b/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;
diff --git a/src/styles/_imageview.scss b/src/styles/_imageview.scss
index d30962c..8233862 100644
--- a/src/styles/_imageview.scss
+++ b/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) );
+ }
}
}
\ No newline at end of file