@internetarchive/collection-browser 0.4.3-alpha.4 → 0.4.3-alpha.6

package/src/tiles/grid/item-tile.ts

@@ -14,6 +14,7 @@ import type { SortParam } from '@internetarchive/search-service';
 import { formatDate } from '../../utils/format-date';
 import type { TileModel } from '../../models';
 
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import '../image-block';
 import '../text-snippet-block';
 import '../item-image';
@@ -35,38 +36,30 @@ export class ItemTile extends LitElement {
 
     return html`
       <div class="container">
-        <div class="item-info">
-          <div id="title">
-            <h1 class="truncated" title=${ifDefined(itemTitle)}>
-              ${itemTitle}
-            </h1>
-          </div>
-
-          <image-block 
-            class=${this.hasSnippets ? 'has-snippets' : nothing}
-            .model=${this.model}
-            .baseImageUrl=${this.baseImageUrl}
-            .loggedIn=${this.loggedIn}
-            .isCompactTile=${false}
-            .isListTile=${false}
-            .viewSize=${'grid'}>
-          </image-block>
-
-          ${this.textSnippetsTemplate}
-
-          ${
-            this.doesSortedByDate
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.imageBlockTemplate}
+
+            <div id="title">
+              <h1 class="truncated" title=${ifDefined(itemTitle)}>
+                ${itemTitle}
+              </h1>
+            </div>
+
+            ${this.volumeIssueTemplate}
+            ${this.doesSortedByDate
               ? this.sortedDateInfoTemplate
-              : this.creatorTemplate
-          }
-        </div>
+              : this.creatorTemplate}
+            ${this.textSnippetsTemplate}
+          </div>
 
-        <tile-stats 
-          .mediatype=${this.model?.mediatype}
-          .viewCount=${this.model?.viewCount}
-          .favCount=${this.model?.favCount}
-          .commentCount=${this.model?.commentCount}>
-        </tile-stats>
+          <tile-stats
+            .mediatype=${this.model?.mediatype}
+            .viewCount=${this.model?.viewCount}
+            .favCount=${this.model?.favCount}
+            .commentCount=${this.model?.commentCount}
+          >
+          </tile-stats>
         </div>
       </div>
     `;
@@ -75,10 +68,31 @@ export class ItemTile extends LitElement {
   /**
    * Templates
    */
-  private get doesSortedByDate() {
-    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.sortParam?.field as string
-    );
+  private get creatorTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.creator) return nothing;
+
+    return html`
+      <div class="created-by">
+        <span class="truncated" title=${ifDefined(this.model?.creator)}>
+          by&nbsp;${this.model?.creator}
+        </span>
+      </div>
+    `;
+  }
+
+  private get imageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        class=${this.hasSnippets ? 'has-snippets' : nothing}
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .loggedIn=${this.loggedIn}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'grid'}
+      >
+      </image-block>
+    `;
   }
 
   private get sortedDateInfoTemplate() {
@@ -110,108 +124,53 @@ export class ItemTile extends LitElement {
     `;
   }
 
-  private get creatorTemplate() {
+  private get textSnippetsTemplate(): TemplateResult | typeof nothing {
+    if (!this.hasSnippets) return nothing;
+
     return html`
-      <div class="created-by truncated">
-        ${this.model?.creator
-          ? html`<span>by&nbsp;${this.model?.creator}</span>`
-          : nothing}
-      </div>
+      <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
+      </text-snippet-block>
     `;
   }
 
-  private get textSnippetsTemplate(): TemplateResult | typeof nothing {
-    if (!this.hasSnippets) return nothing;
+  private get volumeIssueTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.volume || !this.model?.issue) return nothing;
 
-    return html`<text-snippet-block
-      viewsize="grid"
-      .snippets=${this.model?.snippets}
-    ></text-snippet-block>`;
+    return html`
+      <div class="volume-issue">
+        <span class="truncated" title="volume|issue">
+          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}
+        </span>
+      </div>
+    `;
+  }
+
+  private get doesSortedByDate() {
+    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
+      this.sortParam?.field as string
+    );
   }
 
   private get hasSnippets(): boolean {
     return !!this.model?.snippets?.length;
   }
 
+  /**
+   * CSS
+   */
   static get styles(): CSSResultGroup {
-    return css`
-      .container {
-        background-color: #ffffff;
-        border-radius: var(--collectionTileCornerRadius, 4px);
-        box-shadow: 1px 1px 2px 0px;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .item-info {
-        padding: 5px 5px 0 5px;
-        flex-grow: 1;
-      }
-
-      #title {
-        flex-shrink: 0;
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      .container:hover > .item-info > #title > .truncated {
-        text-decoration: underline;
-      }
-
-      /** this is a workaround for Safari 15 where the hover effects are not working */
-      #title:hover > .truncated {
-        text-decoration: underline;
-      }
-
-      image-block {
-        display: block;
-        margin-bottom: 5px;
-        position: relative;
-        text-align: center;
-      }
-
-      image-block.has-snippets {
-        /* If there is a text snippet block present, the image block needs to shrink */
-        --imgBlockHeight: 11rem;
-      }
-
-      .created-by,
-      .date-sorted-by {
-        display: flex;
-        justify-content: center;
-        align-items: flex-end; /* Important to start text from bottom */
-        height: 3rem;
-        padding-top: 1rem;
-      }
-
-      .truncated {
-        flex: 1;
-        color: #2c2c2c;
-        min-width: 0; /* Important for long words! */
-        text-align: center;
-        line-height: 2rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        word-wrap: break-word;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-
-      .truncated span {
-        font-size: 1.4rem;
-        display: -webkit-box;
-      }
-
-      h1.truncated {
-        margin-top: 0rem;
-        margin-bottom: 0.5rem;
-        font-size: 1.6rem;
-        height: 4rem;
-        display: -webkit-box;
-      }
-    `;
+    return [
+      baseTileStyles,
+      css`
+        image-block {
+          --imageBlockBackgroundColor: #f1f1f4;
+        }
+
+        text-snippet-block {
+          --containerLeftMargin: 5px;
+          --containerTopMargin: 10px;
+        }
+      `,
+    ];
   }
 }

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -0,0 +1,99 @@
+import { css } from 'lit';
+
+/**
+ * Base tile styles
+ */
+
+const tileCornerRadius = css`var(--collectionTileCornerRadius, 4px)`;
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+
+export const baseTileStyles = css`
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: 1px 1px 2px 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    margin-bottom: 5px;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+  }
+
+  .item-info {
+    flex-grow: 1;
+  }
+
+  #title {
+    flex-shrink: 0;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-end; /* Important to start text from bottom */
+    padding: 10px 5px 0px 5px;
+  }
+
+  .truncated {
+    flex: 1;
+    color: #2c2c2c;
+    min-width: 0; /* Important for long words! */
+    text-align: left;
+    line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  h1.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  span {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 15px;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .container:hover > .tile-details > .item-info > #title > .truncated {
+    text-decoration: underline;
+  }
+
+  /** this is a workaround for Safari 15 where the hover effects are not working */
+  #title:hover > .truncated {
+    text-decoration: underline;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;

package/src/tiles/grid/tile-stats.ts

@@ -91,17 +91,23 @@ export class TileStats extends LitElement {
         list-style-type: none; // remove default list-style
       }
 
+      svg {
+        height: 10px;
+        width: 10px;
+        display: block;
+        margin: auto;
+        pointer-events: none;
+      }
+
       .item-stats {
         height: 35px;
+        padding-left: 5px;
+        padding-right: 5px;
       }
 
       #stats-row {
-        border-top: 1px solid #bbb;
-        align-items: center;
         display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
+        flex-wrap: wrap;
         width: 100%;
         padding-top: 5px;
         padding-bottom: 5px;
@@ -123,14 +129,6 @@ export class TileStats extends LitElement {
         height: 25px;
       }
 
-      svg {
-        height: 10px;
-        width: 10px;
-        display: block;
-        margin: auto;
-        pointer-events: none;
-      }
-
       .status-text {
         font-size: 14px;
         height: 15px;

package/src/tiles/image-block.ts

@@ -81,17 +81,23 @@ export class ImageBlock extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
+    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;
+    const imageBlockBorderColor = css`var(--imageBlockBorderColor, #dddddd)`;
+
     return css`
       div {
         display: flex;
         justify-content: center;
         position: relative;
+        background-color: ${imageBlockBackgroundColor};
+        border: 1px solid ${imageBlockBorderColor};
       }
 
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
         position: initial;
+        padding: 5px;
       }
 
       /** tile-list view */

package/src/tiles/item-image.ts

@@ -81,9 +81,21 @@ export class ItemImage extends LitElement {
       cover: this.isCompactTile,
       blur: toBlur || false,
       waveform: this.isWaveform,
+      radius50: this.itemImageRadius,
     };
   }
 
+  /**
+   * Helper function to determine if border radius is needed
+   */
+  private get itemImageRadius() {
+    return (
+      this.model?.mediatype === 'account' &&
+      !this.isCompactTile &&
+      !this.isListTile
+    );
+  }
+
   /**
    * Event listener sets isWaveform true if image is waveform
    */

package/src/tiles/list/tile-list.ts

@@ -48,44 +48,6 @@ export class TileList extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  protected updated(changed: PropertyValues): void {
-    if (changed.has('model')) {
-      this.fetchCollectionNames();
-    }
-  }
-
-  private async fetchCollectionNames() {
-    if (
-      !this.model?.collections ||
-      this.model.collections.length === 0 ||
-      !this.collectionNameCache
-    ) {
-      return;
-    }
-    // Note: quirk of Lit: need to replace collectionLinks array,
-    // otherwise it will not re-render. Can't simply alter the array.
-    this.collectionLinks = [];
-    const newCollectionLinks: TemplateResult[] = [];
-    const promises: Promise<void>[] = [];
-    for (const collection of this.model.collections) {
-      // Don't include favorites or collections that are meant to be suppressed
-      if (
-        !suppressedCollections[collection] &&
-        !collection.startsWith('fav-')
-      ) {
-        promises.push(
-          this.collectionNameCache?.collectionNameFor(collection).then(name => {
-            newCollectionLinks.push(
-              this.detailsLink(collection, name ?? collection)
-            );
-          })
-        );
-      }
-    }
-    await Promise.all(promises);
-    this.collectionLinks = newCollectionLinks;
-  }
-
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
@@ -96,6 +58,9 @@ export class TileList extends LitElement {
     `;
   }
 
+  /**
+   * Templates
+   */
   private get mobileTemplate() {
     return html`
       <div id="list-line-top">
@@ -366,6 +331,44 @@ export class TileList extends LitElement {
     >`;
   }
 
+  protected updated(changed: PropertyValues): void {
+    if (changed.has('model')) {
+      this.fetchCollectionNames();
+    }
+  }
+
+  private async fetchCollectionNames() {
+    if (
+      !this.model?.collections ||
+      this.model.collections.length === 0 ||
+      !this.collectionNameCache
+    ) {
+      return;
+    }
+    // Note: quirk of Lit: need to replace collectionLinks array,
+    // otherwise it will not re-render. Can't simply alter the array.
+    this.collectionLinks = [];
+    const newCollectionLinks: TemplateResult[] = [];
+    const promises: Promise<void>[] = [];
+    for (const collection of this.model.collections) {
+      // Don't include favorites or collections that are meant to be suppressed
+      if (
+        !suppressedCollections[collection] &&
+        !collection.startsWith('fav-')
+      ) {
+        promises.push(
+          this.collectionNameCache?.collectionNameFor(collection).then(name => {
+            newCollectionLinks.push(
+              this.detailsLink(collection, name ?? collection)
+            );
+          })
+        );
+      }
+    }
+    await Promise.all(promises);
+    this.collectionLinks = newCollectionLinks;
+  }
+
   /*
    * TODO: fix field names to match model in src/collection-browser.ts
    * private get dateSortSelector()

package/src/tiles/text-snippet-block.ts

@@ -19,22 +19,14 @@ export class TextSnippetBlock extends LitElement {
     if (!this.snippets?.length) return html`${nothing}`;
 
     return html`
-      <div class="${this.containerClasses}">${this.ellipsisJoinedSnippets}</div>
-
-      ${this.viewSize === 'grid'
-        ? html`<div class="separator"></div>`
-        : nothing}
+      <div class="container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.ellipsisJoinedSnippets}
+        </div>
+      </div>
     `;
   }
 
-  private get viewSizeClass() {
-    return this.viewSize === 'grid' ? 'grid' : 'list';
-  }
-
-  private get containerClasses() {
-    return `container ${this.viewSizeClass}`;
-  }
-
   /**
    * An array of HTML templates derived from the snippets, with ellipses inserted
    * at the beginning, end, and between each pair of snippets.
@@ -90,32 +82,36 @@ export class TextSnippetBlock extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 100%;
+        border-left: 5px solid #194880;
+        margin-top: var(--containerTopMargin, 10px);
+        margin-left: var(--containerLeftMargin, 0px);
+        border-radius: 3px;
+      }
+
+      .snippet-view {
         display: -webkit-box;
-        font-family: 'Times New Roman', serif;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 14px;
         overflow: hidden;
         overflow-wrap: break-word;
         -webkit-line-clamp: var(--maxLines, 3);
         -webkit-box-orient: vertical;
-      }
-
-      .separator {
-        /* Border line should extend to the edges of the tile */
-        margin: 0 -5px;
-        border-bottom: 1px solid #bbb;
+        margin-left: 5px;
+        margin-right: 10px;
       }
 
       .grid {
-        /* Bottom margin reduced by 1px to account for the separator */
-        margin: 0.5rem 0 0.4rem;
+        margin: 0px 15px 0px 5px;
         font-size: 1.2rem;
         line-height: 1.5rem;
       }
 
       .list {
-        margin: 1rem 0 0;
-        padding: 0 0 0 1.5rem;
-        border-left: 0.5rem solid #194880;
-        border-radius: 3px;
+        padding-left: 20px;
         font-size: 1.4rem;
         line-height: 2rem;
       }

package/src/tiles/tile-dispatcher.ts

@@ -150,6 +150,7 @@ export class TileDispatcher
           case 'account':
             return html`<account-tile
               .model=${model}
+              .baseImageUrl=${this.baseImageUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
             >

package/test/collection-browser.test.ts

@@ -61,10 +61,10 @@ describe('Collection Browser', () => {
 
     expect(el.selectedFacets).to.equal(defaultSelectedFacets);
     expect(el.selectedSort).to.equal('relevance');
-    expect(el.sortDirection).to.be.undefined;
-    expect(el.sortParam).to.be.undefined;
-    expect(el.selectedCreatorFilter).to.be.undefined;
-    expect(el.selectedTitleFilter).to.be.undefined;
+    expect(el.sortDirection).to.null;
+    expect(el.sortParam).to.null;
+    expect(el.selectedCreatorFilter).to.null;
+    expect(el.selectedTitleFilter).to.null;
   });
 
   it('filterBy creator with analytics', async () => {
@@ -87,7 +87,7 @@ describe('Collection Browser', () => {
     el.clearFilters();
     await el.updateComplete;
 
-    expect(el.selectedTitleFilter).to.be.undefined;
+    expect(el.selectedTitleFilter).to.null;
     expect(mockAnalyticsHandler.callCategory).to.equal('betaSearchService');
     expect(mockAnalyticsHandler.callAction).to.equal('filterByCreator');
     expect(mockAnalyticsHandler.callLabel).to.equal('clear-A');
@@ -113,7 +113,7 @@ describe('Collection Browser', () => {
     el.clearFilters();
     await el.updateComplete;
 
-    expect(el.selectedTitleFilter).to.be.undefined;
+    expect(el.selectedTitleFilter).to.null;
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('filterByTitle');
     expect(mockAnalyticsHandler.callLabel).to.equal('clear-A');
@@ -660,7 +660,7 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     const fetchPromise = el.fetchPage(2);
-    el.sortParam = undefined;
+    el.sortParam = null;
     await fetchPromise;
 
     // If the different sort param causes the results to be discarded,