Modernize gallery, consolidate thumbnail sizes

src/components/GrampsjsBlogPostPreview.js

@@ -118,7 +118,7 @@ export class GrampsjsBlogPostPreview extends GrampsjsAppStateMixin(LitElement) {
       <div id="image">
         <grampsjs-img
           handle="${obj.handle}"
-          size="150"
+          size="200"
           displayHeight="150"
           square
           .rect="${ref.rect || []}"

src/components/GrampsjsChildren.js

@@ -110,7 +110,7 @@ export class GrampsjsChildren extends GrampsjsEditableList {
         slot="start"
         circle
         square
-        size="70"
+        size="40"
         .rect="${rect}"
         mime=""
         fallbackIcon="${objectIconPath.person}"

src/components/GrampsjsConnectedGallery.js

@@ -1,16 +1,35 @@
-import {html} from 'lit'
+import {html, css} from 'lit'
 import {GrampsjsConnectedComponent} from './GrampsjsConnectedComponent.js'
 import './GrampsjsGallery.js'
 import {objectTypeToEndpoint} from '../util.js'
 
 export class GrampsjsConnectedGallery extends GrampsjsConnectedComponent {
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        .skeleton-gallery {
+          display: grid;
+          grid-template-columns: repeat(
+            auto-fill,
+            minmax(max(100px, 15%), 1fr)
+          );
+          gap: 4px;
+          margin-top: 8px;
+        }
+
+        .skeleton-tile {
+          aspect-ratio: 1;
+          border-radius: 6px;
+        }
+      `,
+    ]
+  }
+
   static get properties() {
     return {
       objectType: {type: String},
       handle: {type: String},
-      radius: {type: Number},
-      size: {type: Number},
-      square: {type: Boolean},
       count: {type: Number},
     }
   }
@@ -19,9 +38,6 @@ export class GrampsjsConnectedGallery extends GrampsjsConnectedComponent {
     super()
     this.objectType = ''
     this.handle = ''
-    this.radius = 0
-    this.size = 200
-    this.square = false
     this.count = 1
   }
 
@@ -31,16 +47,14 @@ export class GrampsjsConnectedGallery extends GrampsjsConnectedComponent {
     }?extend=all&profile=all&locale=${this.appState.i18n.lang || 'en'}`
   }
 
-  // eslint-disable-next-line class-methods-use-this
   renderLoading() {
-    return [...Array(this.count).keys()].map(
-      () => html`<span
-        class="skeleton"
-        style="width:${this.size}px;height:${this
-          .size}px;margin:3px;border-radius:${this.radius};"
-        >&nbsp;</span
-      >`
-    )
+    return html`
+      <div class="skeleton-gallery">
+        ${Array(this.count)
+          .fill(0)
+          .map(() => html`<span class="skeleton skeleton-tile">&nbsp;</span>`)}
+      </div>
+    `
   }
 
   renderContent() {
@@ -53,9 +67,6 @@ export class GrampsjsConnectedGallery extends GrampsjsConnectedComponent {
         .appState="${this.appState}"
         .media=${object?.extended?.media}
         .mediaRef=${object?.media_list}
-        radius="${this.radius}"
-        size="${this.size}"
-        ?square="${this.square}"
       ></grampsjs-gallery>
     `
   }

src/components/GrampsjsConnectionChart.js

@@ -53,7 +53,7 @@ export class GrampsjsConnectionChart extends GrampsjsResizeContainerMixin(
     const chart = RelationshipChart(this._data.data, {
       maxImages: this.nMaxImages,
       grampsId: this.grampsId1,
-      getImageUrl: d => getImageUrl(d?.data || {}, 200),
+      getImageUrl: d => getImageUrl(d?.data || {}, 100),
       bboxWidth: this.containerWidth,
       bboxHeight: this.containerHeight,
       shrinkToFit: true,