From 19a37ddebf3defa759f649eb731fd86678907837 Mon Sep 17 00:00:00 2001 From: Tobias Reich Date: Fri, 2 Jan 2015 00:46:23 +0100 Subject: [PATCH] button--left and --right, content::before, new back and forward photo navigation --- dist/main.css | Bin 33435 -> 34198 bytes dist/main.js | Bin 169542 -> 170009 bytes dist/view.js | Bin 96793 -> 96805 bytes index.html | 34 +++++++++++++++--------------- src/scripts/build.coffee | 4 ++-- src/scripts/view.js | 26 +++++++++++++++++++++-- src/styles/_content.scss | 13 +++++++++--- src/styles/_header.scss | 4 ++-- src/styles/_imageview.scss | 42 ++++++++++++++++++++++++++----------- 9 files changed, 85 insertions(+), 38 deletions(-) diff --git a/dist/main.css b/dist/main.css index a2d4ad9d8837f7e84ed8d05529f7d420dc3fabb4..666e7cfa9cf4f24783318cf443f1c8699ef0d24c 100644 GIT binary patch delta 561 zcmZuu&u`N(7!}pDA4scOHAQqPQCOMUY)zC@>y$Z~;7Zj2rzISa=B8d_t;Ck&mO>A^ zj1yd@PvQaxxN|`2i9drISN;>6vLH>GEZgsU&(HGn_xXL{(}%*3CtAG`u|$$YA~Yap zOptkAH=90u*X~1eeY3!4a7W*R$J$nzvy@885+ukNOFAWsP&@SsmIXiiy4n`M`(HLz z-0qHl^-F_~Czo&@=zV0lhkRx@hU0TQ9MWWjJXO0LKJ(wup^TAxpkPesD3+*`(E}Wv zj|7_}Lo2242yz`~$H*2aRUg$o(~l-1WddX>z+~9&tDVwD5s#k~jrI+1Z zGVnirp2zxjQr|Xgs+vcm`57ILkr)kdtJCea^J#k~+&$LssUWHmOWA2>!`?SdA5I@s MtG7yvXW{YgUo2X#SpWb4 delta 199 zcmbQ%%{04}X@i5vy=SA`X)j>HE!xgx6OY#e>bPYj5_o~G#Oo0sRlGKV4 z-QtYIl>Bll0|mo^3I!t|RyHs&uud*5D$XymD#*{wD@iS~&M!zz&Mc|4GMH=|Avf73 ffRo9nc(Or&D2M`CCl|%RT@6#DXSCTf+E)tzS1&@J diff --git a/dist/main.js b/dist/main.js index b578539cd042eaed4f08cfa36d940d36dcb728e5..3850ab1d12f55b44d3745ad8180c377fd1b5dac7 100644 GIT binary patch delta 523 zcmb`E%}T>S5XZ@C4~j*E9_mHIddSA4p@Ih?RG&aRd6FJB$uwEnY|3U+KU(nv&w7%@ zi%-yl2cd7^3kbfBrd0$#dK2a{e||IbgLxj#-#^Y@TpLg5CExRVRGQG@Ct(8Mv6RNp zV{qhkn1~3bYXXiHwp}%y=*n^;EAo;OE!|bptrcF&KQ_7_Z;W zBCx?rSOmoOf#=X4doaE6X4G_3p*nKqq?u)HAM|bCsGnP$381nOOByi{im1#CGNrQA zHDw%7(sa#_@;2>1qB1KaC)jeNr;;KK_9b^LY+LqODVY5hRNn+EV?+97xOn$~s>sbJ z!3=Ht`lfFzAN-$W{!?Na+Qg7L^>VJ28ea7ZPn28T}hCO3Z1Eu7j4ic-rm^Gl22TDRXQV_L(bs*s$MSX^wY zo|&AVr<~r{)`l&N{i*VHO4>=KnK>zXnaTNinaLVT$%#d&CAvAOX(dXU+Dg+`q%vA4 T;80YQnVtbwwf$Erqr3~i^)`l&N{i%`)$vKI|#kT61$@zJ@$%#d&CAvAOX(j4*)7PakT1a7$F3L>L N0LpJ?OJkH50RTUj8nOTY 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