Always add all badges

Show & hide them using classes

src/scripts/build.js

@@ -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>
+		        `
 
 	}
 

src/scripts/view.js

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

src/styles/_content.scss

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