@internetarchive/collection-browser 3.5.3-alpha-webdev8156.0 → 4.0.0

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

@@ -1,10 +1,12 @@
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
 import { formatUnitSize } from '../../utils/format-unit-size';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import { BaseTileComponent } from '../base-tile-component';
+import { LayoutType } from '../models';
 import '../image-block';
 
 @customElement('collection-tile')
@@ -27,9 +29,16 @@ export class CollectionTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showInfoButton = false;
 
+  @property({ type: String }) layoutType: LayoutType = 'default';
+
   render() {
+    const containerClasses = classMap({
+      container: true,
+      minimal: this.layoutType === 'minimal',
+    });
+
     return html`
-      <div class="container">
+      <div class=${containerClasses}>
         ${this.infoButtonTemplate}
         <div class="tile-details">
           <div class="item-info">
@@ -157,6 +166,18 @@ export class CollectionTile extends BaseTileComponent {
           flex-direction: column;
           margin-left: 10px;
         }
+
+        .minimal #item-stats {
+          display: none;
+        }
+
+        .minimal .truncated {
+          -webkit-line-clamp: initial;
+        }
+
+        .minimal .item-info {
+          padding-bottom: 5px;
+        }
       `,
     ];
   }

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

@@ -10,7 +10,7 @@ import type { DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { SimpleLayoutType } from '../models';
+import { LayoutType } from '../models';
 
 import '../image-block';
 import '../review-block';
@@ -42,15 +42,16 @@ export class ItemTile extends BaseTileComponent {
 
   @property({ type: Boolean }) showTvClips = false;
 
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   render() {
     const itemTitle = this.model?.title;
     const containerClasses = classMap({
       container: true,
-      simple: this.simpleLayoutType !== 'none',
-      'stats-only': this.simpleLayoutType === 'stats-only',
-      'snippets-only': this.simpleLayoutType === 'snippets-only',
+      simple: this.layoutType !== 'default',
+      'stats-only': this.layoutType === 'stats-only',
+      'snippets-only': this.layoutType === 'snippets-only',
+      minimal: this.layoutType === 'minimal',
     });
 
     return html`
@@ -175,8 +176,10 @@ export class ItemTile extends BaseTileComponent {
   }
 
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
-    if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
+    if (!this.hasSnippets) return nothing;
+    if (['stats-only', 'minimal'].includes(this.layoutType)) {
       return nothing;
+    }
 
     return html`
       <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
@@ -221,7 +224,9 @@ export class ItemTile extends BaseTileComponent {
    * Template for the stats row along the bottom of the tile.
    */
   private get tileStatsTemplate(): TemplateResult | typeof nothing {
-    if (this.simpleLayoutType === 'snippets-only') return nothing;
+    if (['snippets-only', 'minimal'].includes(this.layoutType)) {
+      return nothing;
+    }
 
     const effectiveSort = this.sortParam ?? this.defaultSortParam;
     const [viewCount, viewLabel] =
@@ -301,7 +306,8 @@ export class ItemTile extends BaseTileComponent {
           -webkit-line-clamp: 1;
         }
 
-        .simple.snippets-only .item-info {
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
           padding-bottom: 5px;
         }
 

package/src/tiles/models.ts

@@ -1 +1,8 @@
-export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';
+/**
+ * What type of simplified tile layout to use.
+ *  - `default`: Do not apply any layout simplifications.
+ *  - `stats-only`: Only show the tile stats row, but not text snippets.
+ *  - `snippets-only`: Only show the text snippets row (if snippets exist), but not tile stats.
+ *  - `minimal`: Show neither tile stats nor the text snippets.
+ */
+export type LayoutType = 'default' | 'stats-only' | 'snippets-only' | 'minimal';

package/src/tiles/tile-dispatcher.ts

@@ -18,7 +18,7 @@ import './list/tile-list-compact';
 import './list/tile-list-compact-header';
 import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
-import { SimpleLayoutType } from './models';
+import { LayoutType } from './models';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
@@ -62,8 +62,8 @@ export class TileDispatcher
 
   @property({ type: Boolean }) showTvClips = false;
 
-  /** What type of simple layout to use in grid mode, if any */
-  @property({ type: String }) simpleLayoutType: SimpleLayoutType = 'none';
+  /** What type of simplified layout to use in grid mode, if any */
+  @property({ type: String }) layoutType: LayoutType = 'default';
 
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
@@ -325,6 +325,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
+              .layoutType=${this.layoutType}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
@@ -370,7 +371,7 @@ export class TileDispatcher
               .loggedIn=${this.loggedIn}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              .simpleLayoutType=${this.simpleLayoutType}
+              .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${!this.isHoverEnabled}
               ?useLocalTime=${this.useLocalTime}