@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-alpha-webdev9189.0

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

@@ -1,130 +0,0 @@
-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/src/tiles/grid/tile-stats.ts

@@ -1,211 +0,0 @@
-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;
-        }
-      `,
-    ];
-  }
-}