arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tobias Reich 2015-01-02 00:46:23 +01:00
parent 7fd78e2cc0
commit 19a37ddebf
9 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

34
index.html
View File

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

4
src/scripts/build.coffee
View File

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

26
src/scripts/view.js
View File

@ -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 + '")');
};
},

13
src/styles/_content.scss
View File

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

4
src/styles/_header.scss
View File

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

42
src/styles/_imageview.scss
View File

@ -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) );
}
}
}