@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -0,0 +1,130 @@
+import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
+
+/**
+ * Base tile styles
+ */
+
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
+
+export const baseTileStyles = css`
+  /* Include .sr-only styles for all tiles */
+  ${srOnlyStyle}
+
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    flex-grow: 1;
+  }
+
+  #title {
+    padding: 0 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0 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;
+  }
+
+  h4.truncated,
+  h3.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 1px;
+  }
+
+  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;
+    padding-bottom: 1px;
+  }
+
+  .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;
+  }
+
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2.4rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;

package/.claude/worktrees/WEBDEV-8677-bump-field-parsers/src/tiles/grid/tile-stats.ts

@@ -0,0 +1,211 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { msg, str } from '@lit/localize';
+import { favoriteFilledIcon as favIcon } from '../../assets/img/icons/favorite-filled';
+import { reviewsIcon } from '../../assets/img/icons/reviews';
+import { uploadIcon } from '../../assets/img/icons/upload';
+import { viewsIcon } from '../../assets/img/icons/views';
+import { quoteIcon } from '../../assets/img/icons/quote';
+import { srOnlyStyle } from '../../styles/sr-only';
+
+import { formatCount } from '../../utils/format-count';
+import { TileModel } from '../../models';
+
+@customElement('tile-stats')
+export class TileStats extends LitElement {
+  /** The tile model these stats represent */
+  @property({ type: Object }) model?: TileModel;
+
+  /** The mediatype of the item these stats represent */
+  @property({ type: String }) mediatype?: string;
+
+  /** The number of uploaded items, if representing an account */
+  @property({ type: Number }) itemCount?: number;
+
+  /** The number of times the item has been viewed */
+  @property({ type: Number }) viewCount?: number;
+
+  /** The text label describing the type of views (default "all-time views") */
+  @property({ type: String }) viewLabel?: string;
+
+  /** The number of times the item has been favorited */
+  @property({ type: Number }) favCount?: number;
+
+  /** The number of times the item has been reviewed */
+  @property({ type: Number }) commentCount?: number;
+
+  /** Whether to show the number of TV clips in place of reviews */
+  @property({ type: Boolean }) showTvClips = false;
+
+  /** The number of times the TV item has been clipped */
+  @property({ type: Number }) tvClipCount?: number;
+
+  render() {
+    return html`
+      <div class="item-stats">
+        <p class="sr-only">
+          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}
+        </p>
+        <ul id="stats-row">
+          ${this.mediatypeIconColumnTemplate}
+          ${this.mediatype === 'account'
+            ? this.uploadsColumnTemplate
+            : this.viewsColumnTemplate}
+          ${this.favoritesColumnTemplate}
+          ${this.showTvClips
+            ? this.tvClipsColumnTemplate
+            : this.reviewsColumnTemplate}
+        </ul>
+      </div>
+    `;
+  }
+
+  /**
+   * Template for the mediatype icon column.
+   */
+  private get mediatypeIconColumnTemplate(): TemplateResult {
+    return html`
+      <li class="col">
+        <p class="sr-only">${msg('Mediatype:')}</p>
+        <tile-mediatype-icon .model=${this.model}></tile-mediatype-icon>
+      </li>
+    `;
+  }
+
+  /**
+   * Helper method to construct a template for one of the tile stat columns,
+   * given its stat count, labels, and icon.
+   *
+   * @param count The numeric count to show for the stat. If undefined, will be treated as 0.
+   * @param label The textual label describing the stat (used in the title and screenreader text).
+   * @param icon The icon visually representing the stat.
+   * @param classes Any additional CSS classes the stat column should have (optional).
+   */
+  private columnTemplate(
+    count: number | undefined,
+    label: string,
+    icon: TemplateResult,
+    classes: string[] = [],
+  ): TemplateResult {
+    const formattedCount = formatCount(count ?? 0, 'short', 'short');
+    const title = msg(str`${formattedCount} ${label}`);
+    const srLabel = label + ':';
+
+    return html`
+      <li class="col ${classes.join(' ')}" title=${title}>
+        ${icon}
+        <p class="status-text">
+          <span class="sr-only">${srLabel}</span>
+          ${formattedCount}
+        </p>
+      </li>
+    `;
+  }
+
+  /**
+   * Template for the views count column.
+   */
+  private get viewsColumnTemplate(): TemplateResult {
+    const label = this.viewLabel ?? msg('all-time views');
+    return this.columnTemplate(this.viewCount, label, viewsIcon);
+  }
+
+  /**
+   * Template for the uploads count column (replaces views for account tiles).
+   */
+  private get uploadsColumnTemplate(): TemplateResult {
+    return this.columnTemplate(this.itemCount, msg('uploads'), uploadIcon);
+  }
+
+  /**
+   * Template for the favorites count column.
+   */
+  private get favoritesColumnTemplate(): TemplateResult {
+    return this.columnTemplate(this.favCount, msg('favorites'), favIcon);
+  }
+
+  /**
+   * Template for the reviews count column.
+   */
+  private get reviewsColumnTemplate(): TemplateResult {
+    return this.columnTemplate(this.commentCount, msg('reviews'), reviewsIcon, [
+      'reviews',
+    ]);
+  }
+
+  /**
+   * Template for the TV clips count column (replaces reviews for TV tiles).
+   */
+  private get tvClipsColumnTemplate(): TemplateResult {
+    return this.columnTemplate(this.tvClipCount, msg('clips'), quoteIcon);
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      srOnlyStyle,
+      css`
+        tile-mediatype-icon {
+          --iconHeight: 25px;
+          --iconWidth: 25px;
+        }
+
+        ul {
+          all: unset;
+          list-style-type: none;
+        }
+
+        li {
+          list-style-type: none;
+        }
+
+        svg {
+          height: 13px;
+          width: 13px;
+          display: block;
+          margin: auto;
+          pointer-events: none;
+        }
+
+        /* Make the reviews icon slightly smaller/lower, for even visual weight */
+        .reviews svg {
+          height: 11px;
+          width: 11px;
+          margin-top: 2px;
+        }
+
+        .item-stats {
+          height: 30px;
+          padding-left: 5px;
+          padding-right: 5px;
+          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+          text-align: center;
+        }
+
+        #stats-row {
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          width: 100%;
+          padding-bottom: 5px;
+        }
+
+        .col {
+          min-width: 15px;
+          max-width: 25%;
+          height: 25px;
+        }
+
+        .status-text {
+          font-size: 14px;
+          height: 15px;
+          color: #2c2c2c;
+          line-height: 17px;
+          margin: auto;
+          display: block;
+          text-align: center;
+        }
+      `,
+    ];
+  }
+}