Style tweaks on selection

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

frontend/elements/photo-thumbnail.html

@@ -62,6 +62,10 @@
         },
         "width": {
             type: Number
+        },
+        "selected": {
+            type: Boolean,
+            reflectToAttribute: true
         }
     },
 

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 @@
             <paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
           </div>
         </app-header>
-        <div id="content" fullbleed class="flex layout vertical">
         <div id="thumbnails" class="layout horizontal wrap"></div>
-          <div id="magic"></div>
-          <div class="layout horizontal">
-            <paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
-          </div>
-        </div>
       </app-header-layout>
     </app-drawer-layout>
     <paper-toast id="toast"></paper-toast>
@@ -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();