@internetarchive/collection-browser 2.14.1-alpha-webdev7568.0 → 2.14.1

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -65,9 +65,6 @@ export class SmartFacetBar extends LitElement {
     return html`
       <div id="smart-facets-container">
         ${this.filtersToggleTemplate}
-        ${this.smartFacets.length > 0
-          ? html`<p id="filters-label">${msg('Insights:')}</p>`
-          : nothing}
         ${repeat(
           this.smartFacets,
           f =>
@@ -341,7 +338,7 @@ export class SmartFacetBar extends LitElement {
         margin: 0;
         border: 0;
         padding: 5px 8px;
-        border-radius: 50%;
+        border-radius: 5px;
         background: white;
         color: #2c2c2c;
         border: 1px solid #194880;
@@ -365,11 +362,6 @@ export class SmartFacetBar extends LitElement {
       #filters-toggle.active > svg {
         filter: invert(1);
       }
-
-      #filters-label {
-        font-weight: bold;
-        margin: 0 -5px 0 0;
-      }
     `;
   }
 }

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

@@ -1,9 +1,10 @@
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 
-import { map } from 'lit/directives/map.js';
 import type { SortParam } from '@internetarchive/search-service';
 import { DateFormat, formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
@@ -38,16 +39,17 @@ export class ItemTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showTvClips = false;
 
+  @property({ type: Boolean }) useSimpleLayout = false;
+
   render() {
     const itemTitle = this.model?.title;
-    const effectiveSort = this.sortParam ?? this.defaultSortParam;
-    const [viewCount, viewLabel] =
-      effectiveSort?.field === 'week'
-        ? [this.model?.weeklyViewCount, 'weekly views']
-        : [this.model?.viewCount, 'all-time views'];
+    const containerClasses = classMap({
+      container: true,
+      simple: this.useSimpleLayout,
+    });
 
     return html`
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -67,19 +69,7 @@ export class ItemTile extends BaseTileComponent {
             ${this.reviewBlockTemplate}
           </div>
 
-          <tile-stats
-            .model=${this.model}
-            .mediatype=${this.model?.mediatype}
-            .collections=${this.model?.collections}
-            .viewCount=${viewCount}
-            .viewLabel=${viewLabel}
-            .favCount=${this.model?.favCount}
-            .commentCount=${this.model?.commentCount}
-            ?isTvSearchResult=${this.model?.isTvSearchResult}
-            .tvClipCount=${this.model?.tvClipCount}
-            .showTvClips=${this.showTvClips}
-          >
-          </tile-stats>
+          ${this.tileStatsTemplate}
         </div>
       </div>
     `;
@@ -220,6 +210,33 @@ export class ItemTile extends BaseTileComponent {
     `;
   }
 
+  /**
+   * Template for the stats row along the bottom of the tile.
+   */
+  private get tileStatsTemplate(): TemplateResult | typeof nothing {
+    if (this.useSimpleLayout) return nothing;
+
+    const effectiveSort = this.sortParam ?? this.defaultSortParam;
+    const [viewCount, viewLabel] =
+      effectiveSort?.field === 'week'
+        ? [this.model?.weeklyViewCount, 'weekly views']
+        : [this.model?.viewCount, 'all-time views'];
+
+    return html`
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${this.model?.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${this.model?.favCount}
+        .commentCount=${this.model?.commentCount}
+        .tvClipCount=${this.model?.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
+    `;
+  }
+
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
       this.effectiveSort?.field as string,
@@ -267,6 +284,24 @@ export class ItemTile extends BaseTileComponent {
           border: 1px solid ${tileBorderColor};
         }
 
+        .simple .item-info {
+          padding-bottom: 5px;
+        }
+
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+
+        .simple text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
+
         .capture-dates {
           margin: 0;
           padding: 0 5px;

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

@@ -20,9 +20,6 @@ export class TileStats extends LitElement {
   /** The mediatype of the item these stats represent */
   @property({ type: String }) mediatype?: string;
 
-  /** The collections this item is part of */
-  @property({ type: Array }) collections?: string[];
-
   /** The number of uploaded items, if representing an account */
   @property({ type: Number }) itemCount?: number;
 
@@ -38,9 +35,6 @@ export class TileStats extends LitElement {
   /** The number of times the item has been reviewed */
   @property({ type: Number }) commentCount?: number;
 
-  /** Whether the tile represents the result of a search */
-  @property({ type: Boolean }) isTvSearchResult = false;
-
   /** Whether to show the number of TV clips in place of reviews */
   @property({ type: Boolean }) showTvClips = false;
 

package/src/tiles/tile-dispatcher.ts

@@ -58,6 +58,9 @@ export class TileDispatcher
 
   @property({ type: Boolean }) showTvClips = false;
 
+  /** Whether to use the simple layout in grid mode */
+  @property({ type: Boolean }) useSimpleLayout = false;
+
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
 
@@ -342,6 +345,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
               .isManageView=${this.isManageView}
+              ?useSimpleLayout=${this.useSimpleLayout}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}