npm - @internetarchive/collection-browser - Versions diffs - 0.2.3 → 0.2.4-alpha.3 - Mend

@internetarchive/collection-browser 0.2.3 → 0.2.4-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/src/tiles/grid/tile-stats.js ADDED Viewed

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { favoriteFilledIcon } 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 { formatCount } from '../../utils/format-count';
+let TileStats = class TileStats extends LitElement {
+    render() {
+        console.log('tile-stats here');
+        return html `
+      <div class="stats-wrapper">
+        <div id="stats-holder">
+          <div class="col">
+            <mediatype-icon
+              .mediatype=${this.mediatype}
+              style="--iconHeight:25px; --iconWidth:25px;"
+            >
+            </mediatype-icon>
+          </div>
+          <div class="col">
+            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
+            <p class="status-text">
+              ${formatCount(this.mediatype === 'account' ? this.itemCount : this.viewCount, 'short', 'short')}
+            </p>
+          </div>
+          <div class="col">
+            ${favoriteFilledIcon}
+            <p class="status-text">
+              ${formatCount(this.favCount, 'short', 'short')}
+            </p>
+          </div>
+          <div class="col">
+            ${reviewsIcon}
+            <p class="status-text">
+              ${formatCount(this.commentCount, 'short', 'short')}
+            </p>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .stats-wrapper {
+        height: 35px;
+        flex-shrink: 0;
+      }
+      #stats-holder {
+        border-top: 1px solid #bbb;
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+      .col {
+        width: 25%;
+        height: 25px;
+      }
+      svg {
+        height: 10px;
+        width: 10px;
+        display: block;
+        margin: auto;
+      }
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 20px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TileStats.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "itemCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "viewCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "favCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "commentCount", void 0);
+TileStats = __decorate([
+    customElement('tile-stats')
+], TileStats);
+export { TileStats };
+//# sourceMappingURL=tile-stats.js.map

package/dist/src/tiles/grid/tile-stats.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAC9B,OAAO,IAAI,CAAA;;;;;2BAKY,IAAI,CAAC,SAAS;;;;;;cAM3B,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;gBAEnD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;;cAID,kBAAkB;;gBAEhB,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;cAI9C,WAAW;;gBAET,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;KAK3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuCT,CAAC;IACJ,CAAC;CACF,CAAA;AA3F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4FrB;SA5FY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n @property({ type: String }) mediatype?: string;\n\n @property({ type: Number }) itemCount?: number;\n\n @property({ type: Number }) viewCount?: number;\n\n @property({ type: Number }) favCount?: number;\n\n @property({ type: Number }) commentCount?: number;\n\n render() {\n console.log('tile-stats here')\n return html`\n <div class=\"stats-wrapper\">\n <div id=\"stats-holder\">\n <div class=\"col\">\n <mediatype-icon\n .mediatype=${this.mediatype}\n style=\"--iconHeight:25px; --iconWidth:25px;\"\n >\n </mediatype-icon>\n </div>\n <div class=\"col\">\n ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n <p class=\"status-text\">\n ${formatCount(\n this.mediatype === 'account' ? this.itemCount : this.viewCount,\n 'short',\n 'short'\n )}\n </p>\n </div>\n <div class=\"col\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n ${formatCount(this.favCount, 'short', 'short')}\n </p>\n </div>\n <div class=\"col\">\n ${reviewsIcon}\n <p class=\"status-text\">\n ${formatCount(this.commentCount, 'short', 'short')}\n </p>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .stats-wrapper {\n height: 35px;\n flex-shrink: 0;\n }\n\n #stats-holder {\n border-top: 1px solid #bbb;\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-evenly;\n text-align: center;\n width: 100%;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n .col {\n width: 25%;\n height: 25px;\n }\n\n svg {\n height: 10px;\n width: 10px;\n display: block;\n margin: auto;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 20px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `;\n }\n}\n"]}

package/dist/src/tiles/list/tile-list-compact.d.ts CHANGED Viewed

@@ -12,7 +12,6 @@ export declare class TileListCompact extends LitElement {
     mobileBreakpoint?: number;
     baseImageUrl?: string;
     render(): import("lit-html").TemplateResult<1>;
-    private get collectionColor();
     private get imageTemplate();
     private get date();
     private get classSize();

package/dist/src/tiles/list/tile-list-compact.js CHANGED Viewed

@@ -31,7 +31,6 @@ let TileListCompact = class TileListCompact extends LitElement {
           <mediatype-icon
             .mediatype=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.mediatype}
             .collections=${(_j = this.model) === null || _j === void 0 ? void 0 : _j.collections}
-            style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
           >
           </mediatype-icon>
         </div>
@@ -41,14 +40,6 @@ let TileListCompact = class TileListCompact extends LitElement {
       </div>
     `;
     }
-    // Only in list, not tile
-    get collectionColor() {
-        var _a;
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'collection') {
-            return undefined;
-        }
-        return '#4666FF';
-    }
     get imageTemplate() {
         var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {

package/dist/src/tiles/list/tile-list-compact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,SAAS,MAAM,WAAW,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAG3B,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAS8B,cAAS,GAAqB,IAAI,CAAC;~~IAkMjE~~,CAAC;~~IA5LC~~,MAAM;;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;iCAChB,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YACrD,IAAI,CAAC,aAAa;;0BAEJ,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,mCAAI,EAAE,CAAC;;YAEzD,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,SAAS;YACnC,CAAC,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YACrC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,mCAAI,EAAE,CAAC;;yBAElC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;;;yBAGtC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;2BACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW~~;4CACN,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC~~;;;;;~~YAK/D~~,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;;KAG/D,CAAC;IACJ,CAAC;IAED,~~yBAAyB;IACzB,~~IAAY,~~eAAe;;QACzB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,YAAY,EAAE;YAC1C,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,~~aAAa;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA,EAAE;YAC3B,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;sBACnB,IAAI;yBACD,IAAI;;;;KAIxB,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,UAAU;QACpB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FT,CAAC;IACJ,CAAC;CACF,CAAA;~~AA1M6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAuB;AAbvC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,~~CA2M3B~~;~~SA3MY~~,eAAe","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\n\nimport '../item-image';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imageTemplate}\n </div>\n <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? accountLabel(this.model?.dateAdded)\n : DOMPurify.sanitize(this.model?.creator ?? '')}\n </div>\n <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n ~~style=\"--iconCustomFillColor: ${ifDefined(this.collectionColor)}\"\n~~ >\n </mediatype-icon>\n </div>\n <div id=\"views\">\n ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n </div>\n </div>\n `;\n }\n\n ~~// Only in list, not tile\n~~ private get ~~collectionColor() {\n if (this.model?.mediatype !== 'collection') {\n return undefined;\n }\n return '#4666FF';\n }\n\n private get~~ imageTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html`\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${true}\n .isCompactTile=${true}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n `;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 62px 19px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n / fields */\n #thumb {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb {\n width: 30px;\n height: 30px;\n padding-top: 2px;\n padding-bottom: 2px;\n padding-left: 4px;\n }\n\n .desktop #thumb {\n width: 45px;\n height: 45px;\n padding-top: 5px;\n padding-bottom: 5px;\n padding-left: 6px;\n }\n\n #thumb.collection {\n --border-radius: 8px;\n }\n\n .mobile #thumb.account {\n --border-radius: 15px;\n }\n\n .desktop #thumb.account {\n --border-radius: 22.5px;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { accountLabel } from './account-label';\n\nimport '../item-image';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @property({ type: String }) baseImageUrl?: string;\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imageTemplate}\n </div>\n <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n <div id=\"creator\">\n ${this.model?.mediatype === 'account'\n ? accountLabel(this.model?.dateAdded)\n : DOMPurify.sanitize(this.model?.creator ?? '')}\n </div>\n <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n <div id=\"icon\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n <div id=\"views\">\n ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n </div>\n </div>\n `;\n }\n\n private get imageTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html`\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${true}\n .isCompactTile=${true}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n `;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n #list-line {\n display: grid;\n column-gap: 10px;\n border-top: 1px solid #ddd;\n align-items: center;\n line-height: 20px;\n }\n\n #list-line.mobile {\n grid-template-columns: 36px 3fr 2fr 62px 19px;\n }\n\n #list-line.desktop {\n grid-template-columns: 51px 3fr 2fr 100px 20px 60px;\n }\n\n #list-line:hover #title {\n text-decoration: underline;\n }\n\n / fields */\n #thumb {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb {\n width: 30px;\n height: 30px;\n padding-top: 2px;\n padding-bottom: 2px;\n padding-left: 4px;\n }\n\n .desktop #thumb {\n width: 45px;\n height: 45px;\n padding-top: 5px;\n padding-bottom: 5px;\n padding-left: 6px;\n }\n\n #thumb.collection {\n --border-radius: 8px;\n }\n\n .mobile #thumb.account {\n --border-radius: 15px;\n }\n\n .desktop #thumb.account {\n --border-radius: 22.5px;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n }\n\n #title,\n #creator {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n #views {\n text-align: right;\n padding-right: 8px;\n }\n\n .mobile #views {\n display: none;\n }\n\n .mobile mediatype-icon {\n --iconHeight: 14px;\n --iconWidth: 14px;\n }\n\n .desktop #icon {\n --iconHeight: 20px;\n --iconWidth: 20px;\n }\n `;\n }\n}\n"]}

package/dist/src/tiles/list/tile-list.d.ts CHANGED Viewed

@@ -22,7 +22,6 @@ export declare class TileList extends LitElement {
     private get detailsTemplate();
     private get imgTemplate();
     private get iconRightTemplate();
-    private get collectionColor();
     private get titleTemplate();
     private get itemLineTemplate();
     private get sourceTemplate();

package/dist/src/tiles/list/tile-list.js CHANGED Viewed

@@ -123,20 +123,11 @@ let TileList = class TileList extends LitElement {
         <mediatype-icon
           .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}
           .collections=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.collections}
-          style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
         >
         </mediatype-icon>
       </div>
     `;
     }
-    // Only in list, not tile
-    get collectionColor() {
-        var _a;
-        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'collection') {
-            return undefined;
-        }
-        return '#4666FF';
-    }
     get titleTemplate() {
         var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)) {

package/dist/src/tiles/list/tile-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../item-image';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections \|\|\n this.model.collections.length === 0 \|\|\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollellectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollellectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n await Promise.all(promises);\n this.collectionLinks = newCollellectionLinks;\n }\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imgTemplate}\n </div>\n </div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imgTemplate}\n </div>\n </div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate}\n `;\n }\n\n // Data templates\n private get imgTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html`\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${true}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n `;\n }\n\n private get iconRightTemplate() {\n return html`\n <div id=\"icon-right\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n style=\"--iconCustomFillColor: ${ifDefined(this.collectionColor)}\"\n >\n </mediatype-icon>\n </div>\n `;\n }\n\n // Only in list, not tile\n private get collectionColor() {\n if (this.model?.mediatype !== 'collection') {\n return undefined;\n }\n return '#4666FF';\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Achivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators \|\| this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' \|\|\n this.sortParam.field === 'reviewdate' \|\|\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n return this.metadataTemplate(\n `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects \|\| this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks \|\| this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n DOMPurify.sanitize(this.model?.description ?? ''),\n '',\n 'description'\n );\n }\n\n // Utility functions\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field \|\| !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n // eslint-disable-next-line lit/no-invalid-html\n return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n / fields /\n\n #thumb img {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb {\n width: 90px;\n height: 90px;\n }\n\n .desktop #thumb {\n width: 100px;\n height: 100px;\n }\n\n #thumb.collection {\n --border-radius: 8px;\n }\n\n .mobile #thumb.account {\n --border-radius: 45px;\n }\n\n .desktop #thumb.account {\n --border-radius: 50px;\n }\n\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n / align top of text with image /\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; / number of lines to show /\n line-clamp: 3;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n / Top level container /\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n / Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../item-image';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseNavigationUrl?: string;\n\n @property({ type: Object })\n collectionNameCache?: CollectionNameCacheInterface;\n\n @property({ type: Number }) currentWidth?: number;\n\n @property({ type: Number }) currentHeight?: number;\n\n @property({ type: Object }) sortParam: SortParam \| null = null;\n\n @property({ type: Number }) mobileBreakpoint?: number;\n\n @state() private collectionLinks: TemplateResult[] = [];\n\n @property({ type: String }) baseImageUrl?: string;\n\n protected updated(changed: PropertyValues): void {\n if (changed.has('model')) {\n this.fetchCollectionNames();\n }\n }\n\n private async fetchCollectionNames() {\n if (\n !this.model?.collections \|\|\n this.model.collections.length === 0 \|\|\n !this.collectionNameCache\n ) {\n return;\n }\n // Note: quirk of Lit: need to replace collectionLinks array,\n // otherwise it will not re-render. Can't simply alter the array.\n this.collectionLinks = [];\n const newCollellectionLinks: TemplateResult[] = [];\n const promises: Promise<void>[] = [];\n for (const collection of this.model.collections) {\n promises.push(\n this.collectionNameCache?.collectionNameFor(collection).then(name => {\n newCollellectionLinks.push(\n this.detailsLink(collection, name ?? collection)\n );\n })\n );\n }\n await Promise.all(promises);\n this.collectionLinks = newCollellectionLinks;\n }\n\n render() {\n return html`\n <div id=\"list-line\" class=\"${this.classSize}\">\n ${this.classSize === 'mobile'\n ? this.mobileTemplate\n : this.desktopTemplate}\n </div>\n `;\n }\n\n private get mobileTemplate() {\n return html`\n <div id=\"list-line-top\">\n <div id=\"list-line-left\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imgTemplate}\n </div>\n </div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n </div>\n </div>\n <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n `;\n }\n\n private get desktopTemplate() {\n return html`\n <div id=\"list-line-left\">\n <div id=\"thumb\" class=\"${ifDefined(this.model?.mediatype)}\">\n ${this.imgTemplate}\n </div>\n </div>\n <div id=\"list-line-right\">\n <div id=\"title-line\">\n <div id=\"title\">${this.titleTemplate}</div>\n ${this.iconRightTemplate}\n </div>\n ${this.detailsTemplate}\n </div>\n `;\n }\n\n private get detailsTemplate() {\n return html`\n ${this.itemLineTemplate} ${this.creatorTemplate}\n <div id=\"dates-line\">\n ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n </div>\n <div id=\"views-line\">\n ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n </div>\n ${this.topicsTemplate} ${this.collectionsTemplate}\n ${this.descriptionTemplate}\n `;\n }\n\n // Data templates\n private get imgTemplate() {\n if (!this.model?.identifier) {\n return nothing;\n }\n return html`\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}\n .isListTile=${true}\n style=\"--imgHeight: 100%; --imgWidth: 100%\"\n >\n </item-image>\n `;\n }\n\n private get iconRightTemplate() {\n return html`\n <div id=\"icon-right\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collections=${this.model?.collections}\n >\n </mediatype-icon>\n </div>\n `;\n }\n\n private get titleTemplate() {\n if (!this.model?.title) {\n return nothing;\n }\n return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n }\n\n private get itemLineTemplate() {\n const source = this.sourceTemplate;\n const volume = this.volumeTemplate;\n const issue = this.issueTemplate;\n if (!source && !volume && !issue) {\n return nothing;\n }\n return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n }\n\n private get sourceTemplate() {\n if (!this.model?.source) {\n return nothing;\n }\n return html`\n <div id=\"source\" class=\"metadata\">\n ${this.labelTemplate('Source')}\n ${this.searchLink('source', this.model.source)}\n </div>\n `;\n }\n\n private get volumeTemplate() {\n return this.metadataTemplate(this.model?.volume, 'Volume');\n }\n\n private get issueTemplate() {\n return this.metadataTemplate(this.model?.issue, 'Issue');\n }\n\n private get creatorTemplate() {\n // \"Achivist since\" if account\n if (this.model?.mediatype === 'account') {\n return html`\n <div id=\"creator\" class=\"metadata\">\n <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n </div>\n `;\n }\n // \"Creator\" if not account tile\n if (!this.model?.creators \|\| this.model.creators.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"creator\" class=\"metadata\">\n ${this.labelTemplate('By')}\n ${join(\n map(this.model.creators, id => this.searchLink('creator', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get datePublishedTemplate() {\n return this.metadataTemplate(\n formatDate(this.model?.datePublished, 'long'),\n 'Published'\n );\n }\n\n // Show date label/value when sorted by date type\n // Except datePublished which is always shown\n private get dateSortByTemplate() {\n if (\n this.sortParam &&\n (this.sortParam.field === 'addeddate' \|\|\n this.sortParam.field === 'reviewdate' \|\|\n this.sortParam.field === 'publicdate')\n ) {\n return this.metadataTemplate(\n formatDate(this.date, 'long'),\n dateLabel(this.sortParam.field)\n );\n }\n return nothing;\n }\n\n private get viewsTemplate() {\n return this.metadataTemplate(\n `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n 'Views'\n );\n }\n\n private get ratingTemplate() {\n return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n }\n\n private get reviewsTemplate() {\n return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n }\n\n private get topicsTemplate() {\n if (!this.model?.subjects \|\| this.model.subjects.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"topics\" class=\"metadata\">\n ${this.labelTemplate('Topics')}\n ${join(\n map(this.model.subjects, id => this.searchLink('subject', id)),\n html`, `\n )}\n </div>\n `;\n }\n\n private get collectionsTemplate() {\n if (!this.collectionLinks \|\| this.collectionLinks.length === 0) {\n return nothing;\n }\n return html`\n <div id=\"collections\" class=\"metadata\">\n ${this.labelTemplate('Collections')}\n ${join(this.collectionLinks, html`, `)}\n </div>\n `;\n }\n\n private get descriptionTemplate() {\n return this.metadataTemplate(\n DOMPurify.sanitize(this.model?.description ?? ''),\n '',\n 'description'\n );\n }\n\n // Utility functions\n private metadataTemplate(text: any, label = '', id?: string) {\n if (!text) return nothing;\n return html`\n <div id=${ifDefined(id)} class=\"metadata\">\n ${this.labelTemplate(label)} ${text}\n </div>\n `;\n }\n\n private labelTemplate(label: string) {\n return html` ${label\n ? html`<span class=\"label\">${label}: </span>`\n : nothing}`;\n }\n\n private searchLink(field: string, searchTerm: string) {\n if (!field \|\| !searchTerm) {\n return nothing;\n }\n const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n // No whitespace after closing tag\n // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n // eslint-disable-next-line lit/no-invalid-html\n return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n ${DOMPurify.sanitize(searchTerm)}</a\n >`;\n }\n\n private detailsLink(identifier: string, text?: string): TemplateResult {\n const linkText = text ?? identifier;\n // No whitespace after closing tag\n // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n return html`<a\n href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n >${DOMPurify.sanitize(linkText)}</a\n >`;\n }\n\n /\n TODO: fix field names to match model in src/collection-browser.ts\n * private get dateSortSelector()\n * @see src/models.ts\n /\n private get date(): Date \| undefined {\n switch (this.sortParam?.field) {\n case 'date':\n return this.model?.datePublished;\n case 'reviewdate':\n return this.model?.dateReviewed;\n case 'addeddate':\n return this.model?.dateAdded;\n default:\n return this.model?.dateArchived; // publicdate\n }\n }\n\n private get classSize(): string {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'mobile';\n }\n return 'desktop';\n }\n\n private get formatSize(): DateFormat \| NumberFormat {\n if (\n this.mobileBreakpoint &&\n this.currentWidth &&\n this.currentWidth < this.mobileBreakpoint\n ) {\n return 'short';\n }\n return 'long';\n }\n\n static get styles() {\n return css`\n html {\n font-size: unset;\n }\n\n div {\n font-size: 14px;\n }\n\n div a {\n text-decoration: none;\n }\n\n .label {\n font-weight: bold;\n }\n\n #list-line.mobile {\n --infiniteScrollerRowGap: 20px;\n --infiniteScrollerRowHeight: auto;\n }\n\n #list-line.desktop {\n --infiniteScrollerRowGap: 30px;\n --infiniteScrollerRowHeight: auto;\n }\n\n / fields /\n\n #thumb img {\n object-fit: cover;\n display: block;\n }\n\n .mobile #thumb {\n width: 90px;\n height: 90px;\n }\n\n .desktop #thumb {\n width: 100px;\n height: 100px;\n }\n\n #thumb.collection {\n --border-radius: 8px;\n }\n\n .mobile #thumb.account {\n --border-radius: 45px;\n }\n\n .desktop #thumb.account {\n --border-radius: 50px;\n }\n\n #icon-right {\n width: 20px;\n padding-top: 5px;\n --iconHeight: 20px;\n --iconWidth: 20px;\n --iconTextAlign: right;\n margin-top: -8px;\n text-align: right;\n }\n\n #title {\n color: #4b64ff;\n text-decoration: none;\n font-size: 22px;\n font-weight: bold;\n / align top of text with image /\n line-height: 25px;\n margin-top: -4px;\n padding-bottom: 2px;\n flex-grow: 1;\n }\n\n .metadata {\n line-height: 20px;\n }\n\n #description,\n #creator,\n #topics,\n #source {\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n word-break: break-word;\n -webkit-line-clamp: 3; / number of lines to show /\n line-clamp: 3;\n }\n\n #icon {\n padding-top: 5px;\n }\n\n #description {\n padding-top: 10px;\n }\n\n / Top level container /\n #list-line {\n display: flex;\n }\n\n #list-line.mobile {\n flex-direction: column;\n }\n\n #list-line.desktop {\n column-gap: 10px;\n }\n\n #list-line-top {\n display: flex;\n column-gap: 7px;\n }\n\n #list-line-bottom {\n padding-top: 4px;\n }\n\n #list-line-right,\n #list-line-top,\n #list-line-bottom {\n width: 100%;\n }\n\n div a:hover {\n text-decoration: underline;\n }\n\n / Lines containing multiple div as row */\n #item-line,\n #dates-line,\n #views-line,\n #title-line {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n `;\n }\n}\n"]}

package/dist/src/tiles/mediatype-icon.js CHANGED Viewed

@@ -39,6 +39,10 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
     }
     static get styles() {
         return css `
+      #icon {
+        height: var(--iconHeight, 25px);
+      }
       .status-text {
         font-size: 14px;
         color: #2c2c2c;
@@ -57,7 +61,7 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
       }
       .fill-color {
-        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+        fill: var(--iconFillColor, '#000000');
       }
     `;
     }

package/dist/src/tiles/mediatype-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;~~IA+DhD~~,CAAC;~~IA7DC~~,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;KAqBT~~,CAAC;IACJ,CAAC;CACF,CAAA;~~AAnE6B~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,~~CAoEzB~~;~~SApEY~~,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string \| undefined;\n\n @property({ type: Array }) collections: string[] \| undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype \|\| '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--~~iconCustomFillColor, var(--~~iconFillColor, '#000000'));\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAmEhD,CAAC;IAjEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAwEzB;SAxEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string \| undefined;\n\n @property({ type: Array }) collections: string[] \| undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype \|\| '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n #icon {\n height: var(--iconHeight, 25px);\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.3",
+  "version": "0.2.4-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/{tiles/grid → assets/img}/icons/favorite-filled.ts RENAMED Viewed

File without changes

package/src/{tiles/grid → assets/img}/icons/reviews.ts RENAMED Viewed

File without changes

package/src/{tiles/grid → assets/img}/icons/upload.ts RENAMED Viewed

File without changes

package/src/{tiles/grid → assets/img}/icons/views.ts RENAMED Viewed

@@ -1,6 +1,6 @@
 import { svg } from 'lit';
-export default svg`
+export const viewsIcon = svg`
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

package/src/mediatype/mediatype-config.ts CHANGED Viewed

@@ -19,12 +19,12 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Account',
   },
   audio: {
-    color: '#8fdaef',
+    color: '#00adef',
     icon: audioIcon,
     text: 'Audio',
   },
   collection: {
-    color: '#000000',
+    color: '#4666ff',
     icon: collectionIcon,
     text: 'Collection',
   },
@@ -34,7 +34,7 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Data',
   },
   etree: {
-    color: '#3871c1',
+    color: '#00adef',
     icon: etreeIcon,
     text: 'E-tree',
   },
@@ -44,12 +44,12 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Film',
   },
   image: {
-    color: '#62c4a9',
+    color: '#aa99c9',
     icon: imagesIcon,
     text: 'Image',
   },
   movies: {
-    color: '#bf1b2c',
+    color: '#f1644b',
     icon: filmIcon,
     text: 'Movie',
   },
@@ -59,27 +59,27 @@ export const mediatypeConfig: { [key: string]: any } = {
     text: 'Radio',
   },
   software: {
-    color: '#80cc28',
+    color: '#9ecc4f',
     icon: softwareIcon,
     text: 'Software',
   },
   texts: {
-    color: '#f9a72b',
+    color: '#faab3c',
     icon: textsIcon,
     text: 'Text',
   },
   tv: {
-    color: '#f25d54',
+    color: '#f1644b',
     icon: tvIcon,
     text: 'TV',
   },
   video: {
-    color: '#bf1b2c',
+    color: '#f1644b',
     icon: videoIcon,
     text: 'Video',
   },
   web: {
-    color: '#fddd10',
+    color: '#ffcd27',
     icon: webIcon,
     text: 'Web',
   },

package/src/tiles/grid/account-tile.ts CHANGED Viewed

@@ -2,10 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TileModel } from '../../models';
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 @customElement('account-tile')
 export class AccountTile extends LitElement {
@@ -14,43 +11,37 @@ export class AccountTile extends LitElement {
   render() {
     return html`
       <div class="outer-holder">
+        <div id="header-holder">
+          <div id="title-holder">
+            <h1 class="truncated">${this.model?.identifier}</h1>
+          </div>
+        </div>
         <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${this.model?.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${this
-                  .model?.identifier}')"
-              ></div>
-            </div>
+          <div id="avatar-holder">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${this.model?.identifier}"
+            />
           </div>
           <div id="year-holder">
             <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${this.model?.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${this.model?.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${this.model?.commentCount}</h3>
+              <span>
+                Archivist since ${this.model?.dateAdded?.getFullYear()}
+              </span>
             </div>
           </div>
         </div>
+        <tile-stats
+          .mediatype=${this.model?.mediatype}
+          .itemCount=${this.model?.itemCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
   }
@@ -63,9 +54,8 @@ export class AccountTile extends LitElement {
         margin: 0;
       }
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
@@ -77,27 +67,22 @@ export class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
+        flex-direction: column;
         text-align: center;
         width: 100%;
       }
       .inner-holder {
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-      #header-holder {
-        flex: 1;
+        flex-grow: 1;
       }
       #title-holder {
+        flex-shrink: 0;
         height: 40px;
-        margin-bottom: 5px;
       }
       #avatar-holder {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -117,22 +102,6 @@ export class AccountTile extends LitElement {
         height: 40px;
       }
-      #year-holder {
-        margin: 0px;
-      }
-      #status-holder {
-        height: 25px;
-        display: flex;
-        justify-content: space-evenly;
-        line-height: initial;
-      }
-      #patron-icon {
-        height: 25px;
-        width: 25px;
-      }
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -142,15 +111,9 @@ export class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
-        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
-      .stat-icon {
-        height: 10px;
-        width: 10px;
-      }
     `;
   }
 }