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 (data.star==='1') html += `<a class='badge icn-star'>${ build.iconic('star') }</a>`
if (data.public==='1') html += `<a class='badge icn-share'>${ build.iconic('eye') }</a>`
if (data.unsorted==='1') html += `<a class='badge'>${ build.iconic('list') }</a>`
if (data.recent==='1') html += `<a class='badge'>${ build.iconic('clock') }</a>`
if (data.password==='1') html += `<a class='badge'>${ build.iconic('lock-locked') }</a>`
html += `
<div class='badges'>
<a class='badge ${ (data.star==='1' ? 'badge--visible' : '') } icn-star'>${ build.iconic('star') }</a>
<a class='badge ${ (data.public==='1' ? 'badge--visible' : '') } icn-share'>${ build.iconic('eye') }</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 (data.star==='1') html += `<a class='badge iconic-star'>${ build.iconic('star') }</a>`
if (data.public==='1' && album.json.public!=='1') html += `<a class='badge iconic-share'>${ build.iconic('eye') }</a>`
html += `
<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) {
$('.photo[data-id="' + photoID + '"] .iconic-star').remove()
if (album.json.content[photoID].star==='1') $('.photo[data-id="' + photoID + '"]').append("<a class='badge iconic-star'>" + build.iconic('star') + "</a>")
let $badge = $('.photo[data-id="' + photoID + '"] .iconic-star')
if (album.json.content[photoID].star==='1') $badge.addClass('.badge--visible')
else $badge.removeClass('.badge--visible')
},
public: function(photoID) {
$('.photo[data-id="' + photoID + '"] .iconic-share').remove()
if (album.json.content[photoID].public==='1') $('.photo[data-id="' + photoID + '"]').append("<a class='badge iconic-share'>" + build.iconic('eye') + "</a>")
let $badge = $('.photo[data-id="' + photoID + '"] .iconic-share')
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; }
/* Badges ------------------------------------------------*/
.album .badges,
.photo .badges {
position: relative;
margin: -1px 0 0 6px;
}
.album .badge,
.photo .badge {
position: absolute;
margin: -1px 0 0 12px;
display: none;
margin: 0 0 0 6px;
padding: 12px 8px 6px;
box-shadow: 0 0 2px black(.6);
width: 18px;
background: $colorRed;
box-shadow: 0 0 2px black(.6);
border-radius: 0 0 5px 5px;
border: 1px solid #fff;
border-top: none;
color: #fff;
text-align: center;
text-shadow: 0 1px 0 black(.4);
opacity: .9;
&:nth-child(2n) { margin-left: 54px; }
&--visible { display: inline-block; }
.iconic {
fill: #fff;