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

Always add all badges

Browse Source 
Show & hide them using classes
This commit is contained in:
Tobias Reich 2015-07-12 14:47:35 +02:00
parent 050be351e4
commit f26cb68787
4 changed files with 35 additions and 15 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.

22
src/scripts/build.js
View File

@ -48,11 +48,15 @@ build.album = function(data) {
if (lychee.publicMode===false) { if (lychee.publicMode===false) {
if (data.star==='1') html += `<a class='badge icn-star'>${ build.iconic('star') }</a>` html += `
if (data.public==='1') html += `<a class='badge icn-share'>${ build.iconic('eye') }</a>` <div class='badges'>
if (data.unsorted==='1') html += `<a class='badge'>${ build.iconic('list') }</a>` <a class='badge ${ (data.star==='1' ? 'badge--visible' : '') } icn-star'>${ build.iconic('star') }</a>
if (data.recent==='1') html += `<a class='badge'>${ build.iconic('clock') }</a>` <a class='badge ${ (data.public==='1' ? 'badge--visible' : '') } icn-share'>${ build.iconic('eye') }</a>
if (data.password==='1') html += `<a class='badge'>${ build.iconic('lock-locked') }</a>` <a class='badge ${ (data.unsorted==='1' ? 'badge--visible' : '') }'>${ build.iconic('list') }</a>
<a class='badge ${ (data.recent==='1' ? 'badge--visible' : '') }'>${ build.iconic('clock') }</a>
<a class='badge ${ (data.password==='1' ? 'badge--visible' : '') }'>${ build.iconic('lock-locked') }</a>
</div>
`
} }
@ -82,8 +86,12 @@ build.photo = function(data) {
if (lychee.publicMode===false) { if (lychee.publicMode===false) {
if (data.star==='1') html += `<a class='badge iconic-star'>${ build.iconic('star') }</a>` html += `
if (data.public==='1' && album.json.public!=='1') html += `<a class='badge iconic-share'>${ build.iconic('eye') }</a>` <div class='badges'>
<a class='badge ${ (data.star==='1' ? 'badge--visible' : '') } icn-star'>${ build.iconic('star') }</a>
<a class='badge ${ ((data.public==='1' && album.json.public!=='1') ? 'badge--visible' : '') } icn-share'>${ build.iconic('eye') }</a>
</div>
`
} }

12
src/scripts/view.js
View File

@ -172,15 +172,19 @@ view.album = {
star: function(photoID) { star: function(photoID) {
$('.photo[data-id="' + photoID + '"] .iconic-star').remove() let $badge = $('.photo[data-id="' + photoID + '"] .iconic-star')
if (album.json.content[photoID].star==='1') $('.photo[data-id="' + photoID + '"]').append("<a class='badge iconic-star'>" + build.iconic('star') + "</a>")
if (album.json.content[photoID].star==='1') $badge.addClass('.badge--visible')
else $badge.removeClass('.badge--visible')
}, },
public: function(photoID) { public: function(photoID) {
$('.photo[data-id="' + photoID + '"] .iconic-share').remove() let $badge = $('.photo[data-id="' + photoID + '"] .iconic-share')
if (album.json.content[photoID].public==='1') $('.photo[data-id="' + photoID + '"]').append("<a class='badge iconic-share'>" + build.iconic('eye') + "</a>")
if (album.json.content[photoID].public==='1') $badge.addClass('.badge--visible')
else $badge.removeClass('.badge--visible')
}, },

16
src/styles/_content.scss
View File

@ -158,21 +158,29 @@
.album img[data-retina='false'] + .overlay a { text-shadow: none; } .album img[data-retina='false'] + .overlay a { text-shadow: none; }
/* Badges ------------------------------------------------*/ /* Badges ------------------------------------------------*/
.album .badges,
.photo .badges {
position: relative;
margin: -1px 0 0 6px;
}
.album .badge, .album .badge,
.photo .badge { .photo .badge {
position: absolute; display: none;
margin: -1px 0 0 12px; margin: 0 0 0 6px;
padding: 12px 8px 6px; padding: 12px 8px 6px;
box-shadow: 0 0 2px black(.6); width: 18px;
background: $colorRed; background: $colorRed;
box-shadow: 0 0 2px black(.6);
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
border: 1px solid #fff; border: 1px solid #fff;
border-top: none; border-top: none;
color: #fff; color: #fff;
text-align: center;
text-shadow: 0 1px 0 black(.4); text-shadow: 0 1px 0 black(.4);
opacity: .9; opacity: .9;
&:nth-child(2n) { margin-left: 54px; } &--visible { display: inline-block; }
.iconic { .iconic {
fill: #fff; fill: #fff;