diff --git a/frontend/elements/photo-thumbnail.html b/frontend/elements/photo-thumbnail.html index 6c5376c..20dbf91 100755 --- a/frontend/elements/photo-thumbnail.html +++ b/frontend/elements/photo-thumbnail.html @@ -62,6 +62,10 @@ }, "width": { type: Number + }, + "selected": { + type: Boolean, + reflectToAttribute: true } }, diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html index dd4fd8c..b170984 100755 --- a/frontend/src/ketr-photos/ketr-photos.html +++ b/frontend/src/ketr-photos/ketr-photos.html @@ -132,6 +132,14 @@ text-decoration: underline; } + .date-line { + margin-left: 2em; + } + + .date-line .header { + padding: 0.25em 3px; + } + photo-thumbnail { --photo-thumbnail: { border: 3px solid white; @@ -140,7 +148,7 @@ photo-thumbnail[selected] { --photo-thumbnail: { - border-color: blue; + border: 3px solid blue; }; } @@ -170,13 +178,7 @@ -
-
-
-
- next -
-
+
@@ -425,6 +427,10 @@ lightBoxClose: function(event) { this.disableScrolling = false; + if (this.lightBoxElement) { + this.lightBoxElement.selected = false; + this.updateStyles(); + } }, lightBoxNext: function(event) { @@ -483,16 +489,18 @@ loadLightbox: function(el) { if (this.lightBoxElement) { - this.lightBoxElement.removeAttribute("selected"); + this.lightBoxElement.selected = false; } - el.setAttribute("selected", true); this.$.lightbox.src = this.base + el.item.path + "/" + el.item.filename; this.lightBoxElement = el; + this.lightBoxElement.selected = true; this.disableScrolling = true; this.topStickX = window.scrollX; this.topStickY = window.scrollY; this.$.lightbox.open(); + + this.updateStyles(); }, _imageTap: function(event) { @@ -762,11 +770,6 @@ return true; } - - if (this.next && isElementInViewport(this.$.magic)) { - this.loadNextPhotos(); - } - }.bind(this), 500); this._loadAlbums();