@internetarchive/collection-browser - npm Package Compare versions

Comparing version 0.0.1-alpha.44 to 0.0.1-alpha.45

dist/src/collection-browser.js

@@ -1009,2 +1009,6 @@ import { __decorate } from "tslib";
 
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
+    }
+
     infinite-scroller.grid {
@@ -1011,0 +1015,0 @@ --infiniteScrollerCellMinWidth: var(

dist/src/mediatype-icon.d.ts

@@ -6,7 +6,5 @@ import { CSSResultGroup, LitElement } from 'lit';
     showText: boolean;
-    private readonly mediatypeIcons;
-    private readonly mediatypeText;
-    private get displayMediaType();
+    private get displayMediatype();
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;
 }

dist/src/mediatype-icon.js

 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { accountIcon } from './assets/img/icons/mediatype/account';
-import { audioIcon } from './assets/img/icons/mediatype/audio';
-import { collectionIcon } from './assets/img/icons/mediatype/collection';
-import { dataIcon } from './assets/img/icons/mediatype/data';
-import { etreeIcon } from './assets/img/icons/mediatype/etree';
-import { imagesIcon } from './assets/img/icons/mediatype/images';
-import { filmIcon } from './assets/img/icons/mediatype/film';
-import { radioIcon } from './assets/img/icons/mediatype/radio';
-import { softwareIcon } from './assets/img/icons/mediatype/software';
-import { textsIcon } from './assets/img/icons/mediatype/texts';
-import { tvIcon } from './assets/img/icons/mediatype/tv';
-import { videoIcon } from './assets/img/icons/mediatype/video';
-import { webIcon } from './assets/img/icons/mediatype/web';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { mediatypeConfig } from './mediatype/mediatype-config';
 let MediatypeIcon = class MediatypeIcon extends LitElement {
@@ -21,36 +10,4 @@ constructor() {
         this.showText = false;
-        this.mediatypeIcons = {
-            account: accountIcon,
-            audio: audioIcon,
-            collection: collectionIcon,
-            data: dataIcon,
-            etree: etreeIcon,
-            film: filmIcon,
-            image: imagesIcon,
-            movies: filmIcon,
-            radio: radioIcon,
-            software: softwareIcon,
-            texts: textsIcon,
-            tv: tvIcon,
-            video: videoIcon,
-            web: webIcon,
-        };
-        this.mediatypeText = {
-            account: 'Account',
-            audio: 'Audio',
-            collection: 'Collection',
-            data: 'Data',
-            etree: 'E-tree',
-            film: 'Film',
-            image: 'Image',
-            movies: 'Movie',
-            radio: 'Radio',
-            software: 'Software',
-            texts: 'Text',
-            tv: 'TV',
-            video: 'Video',
-            web: 'Web',
-        };
     }
-    get displayMediaType() {
+    get displayMediatype() {
         var _a, _b;
@@ -67,3 +24,3 @@ const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
         }
-        return this.mediatype;
+        return this.mediatype || '';
     }
@@ -74,7 +31,12 @@ render() {
         }
-        const displayMediatype = this.displayMediaType || '';
         return html `
-      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}">
-        ${this.mediatypeIcons[displayMediatype]}
-        <p class="status-text">${this.mediatypeText[displayMediatype]}</p>
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${ifDefined(mediatypeConfig[this.displayMediatype].color)}"
+      >
+        ${ifDefined(mediatypeConfig[this.displayMediatype].icon)}
+        <p class="status-text">
+          ${ifDefined(mediatypeConfig[this.displayMediatype].text)}
+        </p>
       </div>
@@ -81,0 +43,0 @@ `;

dist/src/tiles/grid/item-tile.d.ts

@@ -8,3 +8,2 @@ import { CSSResultGroup, LitElement } from 'lit';
     baseNavigationUrl?: string;
-    private readonly mediatypeIconsColor;
     get renderItemImageView(): import("lit-html").TemplateResult<1>;
@@ -11,0 +10,0 @@ render(): import("lit-html").TemplateResult<1>;

dist/src/tiles/grid/item-tile.js

@@ -12,19 +12,2 @@ import { __decorate } from "tslib";
 let ItemTile = class ItemTile extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.mediatypeIconsColor = {
-            account: '#000000',
-            audio: '#8fdaef',
-            data: '#333333',
-            etree: '#3871c1',
-            film: '#bf1b2c',
-            image: '#62c4a9',
-            movies: '#bf1b2c',
-            software: '#80cc28',
-            texts: '#f9a72b',
-            tv: '#f25d54',
-            video: '#bf1b2c',
-            web: '#fddd10',
-        };
-    }
     get renderItemImageView() {
@@ -65,16 +48,18 @@ var _a, _b, _c;
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const mediatype = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) || '';
-        const iconFillColor = this.mediatypeIconsColor[mediatype];
-        const itemTitle = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.title) || '';
-        const itemCreator = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.creator) || '-';
+        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || '';
+        const itemCreator = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) || '-';
         return html `
       <div id="container">
         <div id="title-image-container">
-          <h1 id="item-title" title=${itemTitle}>${(_d = this.model) === null || _d === void 0 ? void 0 : _d.title}</h1>
+          <h1 id="item-title" title=${itemTitle}>${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</h1>
           <div id="item-image-container">${this.renderItemImageView}</div>
           <div class="item-creator">
-            <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            <div class="truncated">
+              <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            </div>
           </div>
         </div>
 
+        <div class="hr"></div>
+
         <div id="item-stats-container">
@@ -84,6 +69,5 @@ <div id="stats-holder">
               <mediatype-icon
-                .mediatype=${mediatype}
+                .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
                 .collection=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.collections}
                 ?showText=${true}
-                style="--iconFillColor: ${iconFillColor};"
               >
@@ -225,17 +209,31 @@ </mediatype-icon>
       .item-creator {
-        color: #2c2c2c;
-        font-size: 1.4rem;
-        height: 3rem;
-        overflow: hidden;
-        text-align: center;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
         display: flex;
         justify-content: center;
-        align-items: flex-end;
+        align-items: flex-end; /* Important to start text from bottom */
+        height: 3rem;
         padding-top: 1rem;
-        padding-bottom: 0.5rem;
       }
 
+      .truncated {
+        flex: 1;
+        min-width: 0; /* Important for long words! */
+      }
+
+      .truncated span {
+        font-size: 1.4rem;
+        color: #2c2c2c;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      .hr {
+        border: 0.5px solid #ccc;
+      }
+
       #item-stats-container {
@@ -247,3 +245,2 @@ align-items: center;
         padding-right: 0.5rem;
-        border-top: 1px solid #ccc;
       }
@@ -250,0 +247,0 @@

dist/src/tiles/list/tile-list.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { SortParam } from '@internetarchive/search-service';
@@ -14,3 +14,9 @@ import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
     mobileBreakpoint?: number;
-    render(): import("lit-html").TemplateResult<1>;
+    private collectionLinks;
+    protected updated(changed: PropertyValues): void;
+    private fetchCollectionNames;
+    render(): TemplateResult<1>;
+    private get mobileTemplate();
+    private get desktopTemplate();
+    private get detailsTemplate();
     private get imgTemplate();
@@ -20,5 +26,5 @@ private get iconRightTemplate();
     private get itemLineTemplate();
+    private get sourceTemplate();
     private get volumeTemplate();
     private get issueTemplate();
-    private get sourceTemplate();
     private get creatorTemplate();
@@ -37,4 +43,2 @@ private get datePublishedTemplate();
     private detailsLink;
-    private collectionLink;
-    private collectionName;
     private get date();
@@ -41,0 +45,0 @@ private get classSize();

dist/src/tiles/list/tile-list.js

 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
@@ -17,6 +17,41 @@ import { dateLabel } from './date-label';
         this.sortParam = null;
+        this.collectionLinks = [];
     }
+    updated(changed) {
+        if (changed.has('model')) {
+            this.fetchCollectionNames();
+        }
+    }
+    async fetchCollectionNames() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.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 newCollellectionLinks = [];
+        const promises = [];
+        for (const collection of this.model.collections) {
+            promises.push((_b = this.collectionNameCache) === null || _b === void 0 ? void 0 : _b.collectionNameFor(collection).then(name => {
+                newCollellectionLinks.push(this.detailsLink(collection, name !== null && name !== void 0 ? name : collection));
+            }));
+        }
+        await Promise.all(promises);
+        this.collectionLinks = newCollellectionLinks;
+    }
     render() {
         return html `
       <div id="list-line" class="${this.classSize}">
+        ${this.classSize === 'mobile'
+            ? this.mobileTemplate
+            : this.desktopTemplate}
+      </div>
+    `;
+    }
+    get mobileTemplate() {
+        return html `
+      <div id="list-line-top">
         <div id="list-line-left">
@@ -30,16 +65,35 @@ <div id="thumb">${this.imgTemplate}</div>
           </div>
-          ${this.itemLineTemplate} ${this.creatorTemplate}
-          <div id="dates-line">
-            ${this.datePublishedTemplate} ${this.dateSortByTemplate}
-          </div>
-          <div id="views-line">
-            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
-          </div>
-          ${this.topicsTemplate} ${this.collectionsTemplate}
-          ${this.descriptionTemplate}
         </div>
       </div>
+      <div id="list-line-bottom">${this.detailsTemplate}</div>
     `;
     }
-    // Display templates
+    get desktopTemplate() {
+        return html `
+      <div id="list-line-left">
+        <div id="thumb">${this.imgTemplate}</div>
+      </div>
+      <div id="list-line-right">
+        <div id="title-line">
+          <div id="title">${this.titleTemplate}</div>
+          ${this.iconRightTemplate}
+        </div>
+        ${this.detailsTemplate}
+      </div>
+    `;
+    }
+    get detailsTemplate() {
+        return html `
+      ${this.itemLineTemplate} ${this.creatorTemplate}
+      <div id="dates-line">
+        ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+      </div>
+      <div id="views-line">
+        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
+      </div>
+      ${this.topicsTemplate} ${this.collectionsTemplate}
+      ${this.descriptionTemplate}
+    `;
+    }
+    // Data templates
     get imgTemplate() {
@@ -58,5 +112,2 @@ var _a, _b;
         var _a, _b;
-        if (this.classSize !== 'desktop') {
-            return nothing;
-        }
         return html `
@@ -89,10 +140,2 @@ <div id="icon-right">
     }
-    get volumeTemplate() {
-        var _a;
-        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume, 'Volume');
-    }
-    get issueTemplate() {
-        var _a;
-        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, 'Issue');
-    }
     get sourceTemplate() {
@@ -104,3 +147,3 @@ var _a;
         return html `
-      <div id="source">
+      <div id="source" class="metadata">
         ${this.labelTemplate('Source')}
@@ -111,8 +154,16 @@ ${this.searchLink('source', this.model.source)}
     }
+    get volumeTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume, 'Volume');
+    }
+    get issueTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, 'Issue');
+    }
     get creatorTemplate() {
         var _a, _b, _c;
-        // "Achivist since" if account tile
+        // "Achivist since" if account
         if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account') {
             return html `
-        <div id="creator">
+        <div id="creator" class="metadata">
           <span class="label"> ${accountLabel((_b = this.model) === null || _b === void 0 ? void 0 : _b.dateAdded)} </span>
@@ -173,4 +224,3 @@ </div>
     get collectionsTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.collections)) {
+        if (!this.collectionLinks || this.collectionLinks.length === 0) {
             return nothing;
@@ -181,3 +231,3 @@ }
         ${this.labelTemplate('Collections')}
-        ${join(map(this.model.collections, id => this.collectionLink(id)), html `, `)}
+        ${join(this.collectionLinks, html `, `)}
       </div>
@@ -201,6 +251,3 @@ `;
     labelTemplate(label) {
-        // Note nobreak space needed to use display:flex
-        // in parent element when making , delimnited list
-        // to remove space between text and ,
-        return html `${label
+        return html ` ${label
             ? html `<span class="label">${label}: </span>`
@@ -222,26 +269,10 @@ : nothing}`;
     detailsLink(identifier, text) {
-        if (!identifier) {
-            return nothing;
-        }
         const linkText = text !== null && text !== void 0 ? text : identifier;
         // No whitespace after closing tag
-        return html `<a href="${this.baseNavigationUrl}/details/${identifier}"
+        // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway
+        return html `<a
+      href="${this.baseNavigationUrl}/details/${encodeURI(identifier)}"
       >${DOMPurify.sanitize(linkText)}</a
     >`;
     }
-    collectionLink(identifier) {
-        if (!identifier) {
-            return nothing;
-        }
-        // No whitespace after closing tag
-        return html `<a href="${this.baseNavigationUrl}/details/${identifier}"
-      >${this.collectionName(identifier)}</a
-    >`;
-    }
-    collectionName(identifier) {
-        return html `<async-collection-name
-      .collectionNameCache=${this.collectionNameCache}
-      .identifier=${identifier}
-    ></async-collection-name>`;
-    }
     /*
@@ -299,3 +330,3 @@ * TODO: fix field names to match model in src/collection-browser.ts
 
-      .mobile {
+      #list-line.mobile {
         --infiniteScrollerRowGap: 20px;
@@ -305,6 +336,7 @@ --infiniteScrollerRowHeight: auto;
 
-      .desktop {
+      #list-line.desktop {
         --infiniteScrollerRowGap: 30px;
         --infiniteScrollerRowHeight: auto;
       }
+
       /* fields */
@@ -351,3 +383,3 @@
         --iconTextAlign: right;
-        margin-top: -10px;
+        margin-top: -8px;
         text-align: right;
@@ -372,7 +404,14 @@ }
 
+      #description,
       #creator,
-      #topic,
+      #topics,
       #source {
+        text-align: left;
+        overflow: hidden;
         text-overflow: ellipsis;
-        overflow: hidden;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        word-break: break-word;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        line-clamp: 3;
       }
@@ -386,12 +425,2 @@
         padding-top: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        word-break: break-word;
-        -webkit-line-clamp: 3; /* number of lines to show */
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-        text-align: left;
       }
@@ -402,13 +431,27 @@
         display: flex;
+      }
+
+      #list-line.mobile {
+        flex-direction: column;
+      }
+
+      #list-line.desktop {
         column-gap: 10px;
       }
 
-      #list-line-right {
-        width: 100%;
+      #list-line-top {
+        display: flex;
+        column-gap: 7px;
       }
 
-      async-collection-name {
-        display: inline-block;
+      #list-line-bottom {
+        padding-top: 4px;
       }
 
+      #list-line-right,
+      #list-line-top,
+      #list-line-bottom {
+        width: 100%;
+      }
+
       div a:hover {
@@ -451,2 +494,5 @@ text-decoration: underline;
 ], TileList.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    state()
+], TileList.prototype, "collectionLinks", void 0);
 TileList = __decorate([
@@ -453,0 +499,0 @@ customElement('tile-list')

package.json

@@ -6,3 +6,3 @@ {
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.44",
+  "version": "0.0.1-alpha.45",
   "main": "dist/index.js",
@@ -9,0 +9,0 @@ "module": "dist/index.js",

src/collection-browser.ts

@@ -1212,2 +1212,6 @@ /* eslint-disable import/no-duplicates */
 
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
+    }
+
     infinite-scroller.grid {
@@ -1214,0 +1218,0 @@ --infiniteScrollerCellMinWidth: var(

src/mediatype-icon.ts

 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { accountIcon } from './assets/img/icons/mediatype/account';
-import { audioIcon } from './assets/img/icons/mediatype/audio';
-import { collectionIcon } from './assets/img/icons/mediatype/collection';
-import { dataIcon } from './assets/img/icons/mediatype/data';
-import { etreeIcon } from './assets/img/icons/mediatype/etree';
-import { imagesIcon } from './assets/img/icons/mediatype/images';
-import { filmIcon } from './assets/img/icons/mediatype/film';
-import { radioIcon } from './assets/img/icons/mediatype/radio';
-import { softwareIcon } from './assets/img/icons/mediatype/software';
-import { textsIcon } from './assets/img/icons/mediatype/texts';
-import { tvIcon } from './assets/img/icons/mediatype/tv';
-import { videoIcon } from './assets/img/icons/mediatype/video';
-import { webIcon } from './assets/img/icons/mediatype/web';
+import { mediatypeConfig } from './mediatype/mediatype-config';
 
@@ -26,37 +15,3 @@ @customElement('mediatype-icon')
 
-  private readonly mediatypeIcons: { [key: string]: any } = {
-    account: accountIcon,
-    audio: audioIcon,
-    collection: collectionIcon,
-    data: dataIcon,
-    etree: etreeIcon,
-    film: filmIcon,
-    image: imagesIcon,
-    movies: filmIcon,
-    radio: radioIcon,
-    software: softwareIcon,
-    texts: textsIcon,
-    tv: tvIcon,
-    video: videoIcon,
-    web: webIcon,
-  };
-
-  private readonly mediatypeText: { [key: string]: any } = {
-    account: 'Account',
-    audio: 'Audio',
-    collection: 'Collection',
-    data: 'Data',
-    etree: 'E-tree',
-    film: 'Film',
-    image: 'Image',
-    movies: 'Movie',
-    radio: 'Radio',
-    software: 'Software',
-    texts: 'Text',
-    tv: 'TV',
-    video: 'Video',
-    web: 'Web',
-  };
-
-  private get displayMediaType() {
+  private get displayMediatype(): string {
     const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
@@ -77,3 +32,3 @@ const radioIdentifier = ['radio', 'radioprogram'];
     }
-    return this.mediatype;
+    return this.mediatype || '';
   }
@@ -86,8 +41,14 @@
 
-    const displayMediatype = this.displayMediaType || '';
-
     return html`
-      <div id="icon" class="${this.showText ? 'show-text' : 'hide-text'}">
-        ${this.mediatypeIcons[displayMediatype]}
-        <p class="status-text">${this.mediatypeText[displayMediatype]}</p>
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${ifDefined(
+          mediatypeConfig[this.displayMediatype].color
+        )}"
+      >
+        ${ifDefined(mediatypeConfig[this.displayMediatype].icon)}
+        <p class="status-text">
+          ${ifDefined(mediatypeConfig[this.displayMediatype].text)}
+        </p>
       </div>
@@ -94,0 +55,0 @@ `;

src/tiles/grid/item-tile.ts

@@ -20,17 +20,2 @@ /* eslint-disable import/no-duplicates */
 
-  private readonly mediatypeIconsColor: { [key: string]: any } = {
-    account: '#000000',
-    audio: '#8fdaef',
-    data: '#333333',
-    etree: '#3871c1',
-    film: '#bf1b2c',
-    image: '#62c4a9',
-    movies: '#bf1b2c',
-    software: '#80cc28',
-    texts: '#f9a72b',
-    tv: '#f25d54',
-    video: '#bf1b2c',
-    web: '#fddd10',
-  };
-
   get renderItemImageView() {
@@ -77,5 +62,2 @@ const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
   render() {
-    const mediatype = this.model?.mediatype || '';
-    const iconFillColor = this.mediatypeIconsColor[mediatype];
-
     const itemTitle = this.model?.title || '';
@@ -90,6 +72,10 @@ const itemCreator = this.model?.creator || '-';
           <div class="item-creator">
-            <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            <div class="truncated">
+              <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            </div>
           </div>
         </div>
 
+        <div class="hr"></div>
+
         <div id="item-stats-container">
@@ -99,6 +85,5 @@ <div id="stats-holder">
               <mediatype-icon
-                .mediatype=${mediatype}
+                .mediatype=${this.model?.mediatype}
                 .collection=${this.model?.collections}
                 ?showText=${true}
-                style="--iconFillColor: ${iconFillColor};"
               >
@@ -242,17 +227,31 @@ </mediatype-icon>
       .item-creator {
-        color: #2c2c2c;
-        font-size: 1.4rem;
-        height: 3rem;
-        overflow: hidden;
-        text-align: center;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
         display: flex;
         justify-content: center;
-        align-items: flex-end;
+        align-items: flex-end; /* Important to start text from bottom */
+        height: 3rem;
         padding-top: 1rem;
-        padding-bottom: 0.5rem;
       }
 
+      .truncated {
+        flex: 1;
+        min-width: 0; /* Important for long words! */
+      }
+
+      .truncated span {
+        font-size: 1.4rem;
+        color: #2c2c2c;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      .hr {
+        border: 0.5px solid #ccc;
+      }
+
       #item-stats-container {
@@ -264,3 +263,2 @@ align-items: center;
         padding-right: 0.5rem;
-        border-top: 1px solid #ccc;
       }
@@ -267,0 +265,0 @@

src/tiles/list/tile-list.ts

@@ -1,6 +0,13 @@
-import { css, html, LitElement, nothing } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { SortParam } from '@internetarchive/search-service';
@@ -33,5 +40,49 @@ import DOMPurify from 'dompurify';
 
+  @state() private collectionLinks: TemplateResult[] = [];
+
+  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 newCollellectionLinks: TemplateResult[] = [];
+    const promises: Promise<void>[] = [];
+    for (const collection of this.model.collections) {
+      promises.push(
+        this.collectionNameCache?.collectionNameFor(collection).then(name => {
+          newCollellectionLinks.push(
+            this.detailsLink(collection, name ?? collection)
+          );
+        })
+      );
+    }
+    await Promise.all(promises);
+    this.collectionLinks = newCollellectionLinks;
+  }
+
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
+        ${this.classSize === 'mobile'
+          ? this.mobileTemplate
+          : this.desktopTemplate}
+      </div>
+    `;
+  }
+
+  private get mobileTemplate() {
+    return html`
+      <div id="list-line-top">
         <div id="list-line-left">
@@ -45,17 +96,38 @@ <div id="thumb">${this.imgTemplate}</div>
           </div>
-          ${this.itemLineTemplate} ${this.creatorTemplate}
-          <div id="dates-line">
-            ${this.datePublishedTemplate} ${this.dateSortByTemplate}
-          </div>
-          <div id="views-line">
-            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
-          </div>
-          ${this.topicsTemplate} ${this.collectionsTemplate}
-          ${this.descriptionTemplate}
         </div>
       </div>
+      <div id="list-line-bottom">${this.detailsTemplate}</div>
     `;
   }
 
-  // Display templates
+  private get desktopTemplate() {
+    return html`
+      <div id="list-line-left">
+        <div id="thumb">${this.imgTemplate}</div>
+      </div>
+      <div id="list-line-right">
+        <div id="title-line">
+          <div id="title">${this.titleTemplate}</div>
+          ${this.iconRightTemplate}
+        </div>
+        ${this.detailsTemplate}
+      </div>
+    `;
+  }
+
+  private get detailsTemplate() {
+    return html`
+      ${this.itemLineTemplate} ${this.creatorTemplate}
+      <div id="dates-line">
+        ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+      </div>
+      <div id="views-line">
+        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
+      </div>
+      ${this.topicsTemplate} ${this.collectionsTemplate}
+      ${this.descriptionTemplate}
+    `;
+  }
+
+  // Data templates
   private get imgTemplate() {
@@ -73,5 +145,2 @@ if (!this.model?.identifier) {
   private get iconRightTemplate() {
-    if (this.classSize !== 'desktop') {
-      return nothing;
-    }
     return html`
@@ -106,10 +175,2 @@ <div id="icon-right">
 
-  private get volumeTemplate() {
-    return this.metadataTemplate(this.model?.volume, 'Volume');
-  }
-
-  private get issueTemplate() {
-    return this.metadataTemplate(this.model?.issue, 'Issue');
-  }
-
   private get sourceTemplate() {
@@ -120,3 +181,3 @@ if (!this.model?.source) {
     return html`
-      <div id="source">
+      <div id="source" class="metadata">
         ${this.labelTemplate('Source')}
@@ -128,7 +189,15 @@ ${this.searchLink('source', this.model.source)}
 
+  private get volumeTemplate() {
+    return this.metadataTemplate(this.model?.volume, 'Volume');
+  }
+
+  private get issueTemplate() {
+    return this.metadataTemplate(this.model?.issue, 'Issue');
+  }
+
   private get creatorTemplate() {
-    // "Achivist since" if account tile
+    // "Achivist since" if account
     if (this.model?.mediatype === 'account') {
       return html`
-        <div id="creator">
+        <div id="creator" class="metadata">
           <span class="label"> ${accountLabel(this.model?.dateAdded)} </span>
@@ -208,3 +277,3 @@ </div>
   private get collectionsTemplate() {
-    if (!this.model?.collections) {
+    if (!this.collectionLinks || this.collectionLinks.length === 0) {
       return nothing;
@@ -215,6 +284,3 @@ }
         ${this.labelTemplate('Collections')}
-        ${join(
-          map(this.model.collections, id => this.collectionLink(id)),
-          html`, `
-        )}
+        ${join(this.collectionLinks, html`, `)}
       </div>
@@ -243,6 +309,3 @@ `;
   private labelTemplate(label: string) {
-    // Note nobreak space needed to use display:flex
-    // in parent element when making , delimnited list
-    // to remove space between text and ,
-    return html`${label
+    return html` ${label
       ? html`<span class="label">${label}: </span>`
@@ -266,9 +329,8 @@ : nothing}`;
 
-  private detailsLink(identifier: string, text?: string) {
-    if (!identifier) {
-      return nothing;
-    }
+  private detailsLink(identifier: string, text?: string): TemplateResult {
     const linkText = text ?? identifier;
     // No whitespace after closing tag
-    return html`<a href="${this.baseNavigationUrl}/details/${identifier}"
+    // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway
+    return html`<a
+      href="${this.baseNavigationUrl}/details/${encodeURI(identifier)}"
       >${DOMPurify.sanitize(linkText)}</a
@@ -278,19 +340,2 @@ >`;
 
-  private collectionLink(identifier: string) {
-    if (!identifier) {
-      return nothing;
-    }
-    // No whitespace after closing tag
-    return html`<a href="${this.baseNavigationUrl}/details/${identifier}"
-      >${this.collectionName(identifier)}</a
-    >`;
-  }
-
-  private collectionName(identifier: string) {
-    return html`<async-collection-name
-      .collectionNameCache=${this.collectionNameCache}
-      .identifier=${identifier}
-    ></async-collection-name>`;
-  }
-
   /*
@@ -354,3 +399,3 @@ * TODO: fix field names to match model in src/collection-browser.ts
 
-      .mobile {
+      #list-line.mobile {
         --infiniteScrollerRowGap: 20px;
@@ -360,6 +405,7 @@ --infiniteScrollerRowHeight: auto;
 
-      .desktop {
+      #list-line.desktop {
         --infiniteScrollerRowGap: 30px;
         --infiniteScrollerRowHeight: auto;
       }
+
       /* fields */
@@ -406,3 +452,3 @@
         --iconTextAlign: right;
-        margin-top: -10px;
+        margin-top: -8px;
         text-align: right;
@@ -427,7 +473,14 @@ }
 
+      #description,
       #creator,
-      #topic,
+      #topics,
       #source {
+        text-align: left;
+        overflow: hidden;
         text-overflow: ellipsis;
-        overflow: hidden;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        word-break: break-word;
+        -webkit-line-clamp: 3; /* number of lines to show */
+        line-clamp: 3;
       }
@@ -441,12 +494,2 @@
         padding-top: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        display: -webkit-box;
-        word-break: break-word;
-        -webkit-line-clamp: 3; /* number of lines to show */
-        line-clamp: 3;
-        -webkit-box-orient: vertical;
-        text-align: left;
       }
@@ -457,13 +500,27 @@
         display: flex;
+      }
+
+      #list-line.mobile {
+        flex-direction: column;
+      }
+
+      #list-line.desktop {
         column-gap: 10px;
       }
 
-      #list-line-right {
-        width: 100%;
+      #list-line-top {
+        display: flex;
+        column-gap: 7px;
       }
 
-      async-collection-name {
-        display: inline-block;
+      #list-line-bottom {
+        padding-top: 4px;
       }
 
+      #list-line-right,
+      #list-line-top,
+      #list-line-bottom {
+        width: 100%;
+      }
+
       div a:hover {
@@ -470,0 +527,0 @@ text-decoration: underline;

No alert changes

Improved metrics

Total package byte prevSize

950143

increased by1.08%

Number of package files

259

increased by3.19%

Lines of code

13603

increased by1.64%

No dependency changes