@internetarchive/collection-browser 0.2.5 → 0.2.7-alpha.2

package/dist/src/tiles/grid/account-tile.js

@@ -1,52 +1,37 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 let AccountTile = class AccountTile extends LitElement {
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `
-      <div class="outer-holder">
-        <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${(_b = this
-            .model) === null || _b === void 0 ? void 0 : _b.identifier}')"
-              ></div>
-            </div>
-          </div>
-          <div id="year-holder">
-            <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}</h3>
-            </div>
+      <div class="account-tile-main">
+        <div id="title">
+          <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
+        </div>
+
+        <div class="account-info">
+          <div id="avatar-info">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}"
+            />
           </div>
+
+          <span id="archivist-since">
+            Archivist since ${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}
+          </span>
         </div>
+
+        <tile-stats
+          .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
+          .itemCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount}
+          .favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
+          .commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
     }
@@ -58,41 +43,45 @@ let AccountTile = class AccountTile extends LitElement {
         margin: 0;
       }
 
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
 
-      .outer-holder {
+      .account-tile-main {
         background-color: #fcf5e6;
         border: 1px #2c2c2c;
         border-radius: 4px;
         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;
+      .account-info {
+        flex-grow: 1;
       }
 
-      #header-holder {
-        flex: 1;
+      #title {
+        padding: 5px 5px 0px 5px;
+        flex-shrink: 0;
+        height: 40px;
       }
 
-      #title-holder {
-        height: 40px;
-        margin-bottom: 5px;
+      .account-tile-main:hover > #title > .truncated {
+        text-decoration: underline;
+      }
+
+      /** this is a workaround for Safari 15 where the hover effects are not working */
+      #title:hover > .truncated {
+        text-decoration: underline;
       }
 
-      #avatar-holder {
+      #avatar-info {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -107,27 +96,11 @@ let AccountTile = class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px #888888;
       }
 
-      #year-holder {
+      #archivist-since {
         margin-bottom: 5px;
         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! */
@@ -137,15 +110,9 @@ let AccountTile = 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;
-      }
     `;
     }
 };

package/dist/src/tiles/grid/account-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;;sCAKuB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;iFAKqB,MAAA,IAAI;aAClE,KAAK,0CAAE,UAAU;;;;;;;;;oBAShB,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;oCAIpB,WAAW;;gBAE/B,UAAU;oBACN,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;gBAGzB,kBAAkB;oBACd,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;;;gBAGxB,WAAW;oBACP,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;;KAKvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;IACJ,CAAC;CACF,CAAA;AAhJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiJvB;SAjJY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport { accountIcon } from './icons/account';\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport { uploadIcon } from './icons/upload';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div class=\"outer-holder\">\n        <div class=\"inner-holder\">\n          <div id=\"header-holder\">\n            <div id=\"title-holder\">\n              <h1 class=\"truncated\">${this.model?.identifier}</h1>\n            </div>\n            <div id=\"avatar-holder\">\n              <div\n                id=\"avatar\"\n                style=\"background-image: url('https://archive.org/services/img/${this\n                  .model?.identifier}')\"\n              ></div>\n            </div>\n          </div>\n          <div id=\"year-holder\">\n            <div id=\"archivist-since\">\n              <h3>Archivist Since</h3>\n            </div>\n            <div id=\"year-holder\">\n              <h3>${this.model?.dateAdded?.getFullYear()}</h3>\n            </div>\n          </div>\n          <div id=\"status-holder\">\n            <div id=\"patron-icon\">${accountIcon}</div>\n            <div class=\"stat-icon\">\n              ${uploadIcon}\n              <h3>${this.model?.itemCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${favoriteFilledIcon}\n              <h3>${this.model?.favCount}</h3>\n            </div>\n            <div class=\"stat-icon\">\n              ${reviewsIcon}\n              <h3>${this.model?.commentCount}</h3>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        color: black;\n        font-size: 16px;\n        margin: 0;\n      }\n\n      h3 {\n        font-size: 14px;\n        font-weight: bold;\n        color: #2c2c2c;\n        margin: 0px;\n      }\n\n      .outer-holder {\n        background-color: #fcf5e6;\n        border: 1px #2c2c2c;\n        border-radius: 4px;\n        box-shadow: 1px 1px 2px 0px;\n        height: 100%;\n        display: flex;\n        text-align: center;\n        width: 100%;\n      }\n\n      .inner-holder {\n        padding: 5px;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #header-holder {\n        flex: 1;\n      }\n\n      #title-holder {\n        height: 40px;\n        margin-bottom: 5px;\n      }\n\n      #avatar-holder {\n        margin-bottom: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #avatar {\n        background-position: 50% 50%;\n        border-radius: 50%;\n        width: 160px;\n        height: 160px;\n        box-shadow: 1px 1px 2px #888888;\n      }\n\n      #year-holder {\n        margin-bottom: 5px;\n        height: 40px;\n      }\n\n      #year-holder {\n        margin: 0px;\n      }\n\n      #status-holder {\n        height: 25px;\n        display: flex;\n        justify-content: space-evenly;\n        line-height: initial;\n      }\n\n      #patron-icon {\n        height: 25px;\n        width: 25px;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        word-break: break-all;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .stat-icon {\n        height: 10px;\n        width: 10px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kCAGmB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;;sDAQF,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;8BAK9C,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;;uBAK3C,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ET,CAAC;IACJ,CAAC;CACF,CAAA;AAlH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmHvB;SAnHY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div class=\"account-tile-main\">\n        <div id=\"title\">\n          <h1 class=\"truncated\">${this.model?.identifier}</h1>\n        </div>\n\n        <div class=\"account-info\">\n          <div id=\"avatar-info\">\n            <img\n              id=\"avatar\"\n              alt=\"patron-avatar\"\n              src=\"https://archive.org/services/img/${this.model?.identifier}\"\n            />\n          </div>\n\n          <span id=\"archivist-since\">\n            Archivist since ${this.model?.dateAdded?.getFullYear()}\n          </span>\n        </div>\n\n        <tile-stats\n          .mediatype=${this.model?.mediatype}\n          .itemCount=${this.model?.itemCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}\n        >\n        </tile-stats>\n      </div>\n    `;\n  }\n\n  static get styles() {\n    return css`\n      h1 {\n        color: black;\n        font-size: 16px;\n        margin: 0;\n      }\n\n      span {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: 0px;\n      }\n\n      .account-tile-main {\n        background-color: #fcf5e6;\n        border: 1px #2c2c2c;\n        border-radius: 4px;\n        box-shadow: 1px 1px 2px 0px;\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n        text-align: center;\n        width: 100%;\n      }\n\n      .account-info {\n        flex-grow: 1;\n      }\n\n      #title {\n        padding: 5px 5px 0px 5px;\n        flex-shrink: 0;\n        height: 40px;\n      }\n\n      .account-tile-main:hover > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      #avatar-info {\n        margin-top: 5px;\n        margin-bottom: 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      #avatar {\n        background-position: 50% 50%;\n        border-radius: 50%;\n        width: 160px;\n        height: 160px;\n        box-shadow: 1px 1px 2px #888888;\n      }\n\n      #archivist-since {\n        margin-bottom: 5px;\n        height: 40px;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}

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

@@ -2,9 +2,16 @@ import { CSSResultGroup, LitElement } from 'lit';
 import { TileModel } from '../../models';
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
+import '../overlay/text-overlay';
 export declare class ItemTile extends LitElement {
+    loggedIn: boolean;
     model?: TileModel;
     baseImageUrl?: string;
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Templates
+     */
+    private get textOverlayTemplate();
     static get styles(): CSSResultGroup;
 }

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

@@ -2,193 +2,147 @@ import { __decorate } from "tslib";
 /* eslint-disable import/no-duplicates */
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { formatCount } from '../../utils/format-count';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import viewsIcon from './icons/views';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
+import '../overlay/text-overlay';
 let ItemTile = class ItemTile extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loggedIn = false;
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || nothing;
+        var _a, _b, _c, _d, _e, _f;
+        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}>${itemTitle}</h1>
-          <div id="item-image-container">
-            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
+      <div class="container">
+        <div class="item-info">
+          <div id="title">
+            <h1 class="truncated" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
+          </div>
+
+          <div id="image">
+            <item-image
+              .model=${this.model}
+              .baseImageUrl=${this.baseImageUrl}>
             </item-image>
+            ${this.textOverlayTemplate}
           </div>
-          <div class="item-creator">
-            <div class="truncated">
-              ${itemCreator
-            ? html `<span>by&nbsp;${itemCreator}</span>`
-            : nothing}
-            </div>
+
+          <div class="created-by truncated">
+            ${itemCreator ? html `<span>by&nbsp;${itemCreator}</span>` : nothing}
           </div>
         </div>
 
-        <div class="hr"></div>
-
-        <div id="item-stats-container">
-          <div id="stats-holder">
-            <div class="col">
-              <mediatype-icon
-                .mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
-                .collection=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections}
-                style="--iconHeight:25px; --iconWidth:25px;"
-              >
-              </mediatype-icon>
-            </div>
-            <div class="col">
-              ${viewsIcon}
-              <p class="status-text">
-                ${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${favoriteFilledIcon}
-              <p class="status-text">
-                ${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${reviewsIcon}
-              <p class="status-text">
-                ${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}
-              </p>
-            </div>
-          </div>
+        <tile-stats 
+          .mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
+          .viewCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount}
+          .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
+          .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}>
+        </tile-stats>
         </div>
       </div>
     `;
     }
+    /**
+     * Templates
+     */
+    get textOverlayTemplate() {
+        var _a, _b, _c, _d;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.loginRequired) && !((_b = this.model) === null || _b === void 0 ? void 0 : _b.contentWarning)) {
+            return nothing;
+        }
+        return html `
+      <text-overlay
+        .loggedIn=${this.loggedIn}
+        .loginRequired=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.loginRequired}
+        .contentWarning=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.contentWarning}
+      ></text-overlay>
+    `;
+    }
     static get styles() {
-        const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
         return css `
-      #container {
+      .container {
         background-color: #ffffff;
-        border-radius: ${cornerRadiusCss};
+        border-radius: var(--collectionTileCornerRadius, 4px);
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
-        position: relative;
       }
 
-      #title-image-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        padding: 0.5rem 0.5rem 0 0.5rem;
+      .item-info {
+        padding: 5px 5px 0 5px;
+        flex-grow: 1;
       }
 
-      #item-title {
-        color: #2c2c2c;
-        font-size: 1.6rem;
-        text-align: center;
-        margin-top: 0rem;
-        margin-bottom: 0.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 2rem;
-        height: 4rem;
+      #title {
+        flex-shrink: 0;
       }
 
-      #item-image-container {
+      #image {
         display: flex;
         justify-content: center;
         flex: 1;
+        height: 16rem;
+        position: relative;
       }
 
       .hidden {
         display: none;
       }
 
-      #container:hover > #title-image-container > .item-title {
+      .container:hover > .item-info > #title > .truncated {
         text-decoration: underline;
       }
 
       /** this is a workaround for Safari 15 where the hover effects are not working */
-      #title-image-container:hover > #item-title {
+      #title:hover > .truncated {
         text-decoration: underline;
       }
 
-      #container:hover > #item-title {
-        background-color: #fcfcfc;
-      }
-
-      .item-creator {
+      .created-by {
         display: flex;
         justify-content: center;
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
+        margin-top: 5px;
       }
 
       .truncated {
         flex: 1;
-        min-width: 0; /* Important for long words! */
-      }
-
-      .truncated span {
-        font-size: 1.4rem;
         color: #2c2c2c;
-        -webkit-line-clamp: 2;
+        min-width: 0; /* Important for long words! */
+        text-align: center;
+        line-height: 2rem;
         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 {
-        align-items: center;
-        display: flex;
-        height: 5.5rem;
-        padding-left: 1rem;
-        padding-right: 0.5rem;
-      }
-
-      #stats-holder {
-        align-items: center;
-        display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
-        width: 100%;
-      }
-
-      svg {
-        height: 10px;
-        width: 10px;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
 
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
+      .truncated span {
+        font-size: 1.4rem;
+        display: -webkit-box;
       }
 
-      .col {
-        width: 25%;
+      h1.truncated {
+        margin-top: 0rem;
+        margin-bottom: 0.5rem;
+        font-size: 1.6rem;
+        height: 4rem;
+        display: -webkit-box;
       }
     `;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], ItemTile.prototype, "loggedIn", void 0);
 __decorate([
     property({ type: Object })
 ], ItemTile.prototype, "model", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,OAAO,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,SAAS;;iCAE3B,IAAI,CAAC,KAAK,kBAAkB,IAAI,CAAC,YAAY;;;;;gBAK9D,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OAAO;;;;;;;;;;;6BAWI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AAxL6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAHvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB;SAzLY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title || nothing;\n    const itemCreator = this.model?.creator;\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${itemTitle}</h1>\n          <div id=\"item-image-container\">\n            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>\n            </item-image>\n          </div>\n          <div class=\"item-creator\">\n            <div class=\"truncated\">\n              ${itemCreator\n                ? html`<span>by&nbsp;${itemCreator}</span>`\n                : nothing}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"hr\"></div>\n\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                .collection=${this.model?.collections}\n                style=\"--iconHeight:25px; --iconWidth:25px;\"\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem 0.5rem 0 0.5rem;\n      }\n\n      #item-title {\n        color: #2c2c2c;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        min-width: 0; /* Important for long words! */\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        color: #2c2c2c;\n        -webkit-line-clamp: 2;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        word-wrap: break-word;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hr {\n        border: 0.5px solid #ccc;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,yBAAyB,CAAC;AAGjC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAC+B,aAAQ,GAAG,KAAK,CAAC;IAwIhD,CAAC;IAlIC,MAAM;;QACJ,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC;QACpC,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QAExC,OAAO,IAAI,CAAA;;;;0CAI2B,SAAS,CACrC,SAAS,CACV,IAAI,SAAS;;;;;uBAKH,IAAI,CAAC,KAAK;8BACH,IAAI,CAAC,YAAY;;cAEjC,IAAI,CAAC,mBAAmB;;;;cAIxB,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS,CAAC,CAAC,CAAC,OAAO;;;;;uBAKxD,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,mBAAmB;;QAC7B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAA,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc,CAAA,EAAE;YAC7D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;yBACR,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa;0BACxB,MAAA,IAAI,CAAC,KAAK,0CAAE,cAAc;;KAE/C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;IACJ,CAAC;CACF,CAAA;AAxI8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AALvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyIpB;SAzIY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../../models';\n\nimport '../mediatype-icon';\nimport '../item-image';\nimport './tile-stats';\nimport '../overlay/text-overlay';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  render() {\n    const itemTitle = this.model?.title;\n    const itemCreator = this.model?.creator;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(\n              itemTitle\n            )}>${itemTitle}</h1>\n          </div>\n\n          <div id=\"image\">\n            <item-image\n              .model=${this.model}\n              .baseImageUrl=${this.baseImageUrl}>\n            </item-image>\n            ${this.textOverlayTemplate}\n          </div>\n\n          <div class=\"created-by truncated\">\n            ${itemCreator ? html`<span>by&nbsp;${itemCreator}</span>` : nothing}\n          </div>\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get textOverlayTemplate() {\n    if (!this.model?.loginRequired && !this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n        .contentWarning=${this.model?.contentWarning}\n      ></text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      #image {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n        height: 16rem;\n        position: relative;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .item-info > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      .created-by {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n        margin-top: 5px;\n      }\n\n      .truncated {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/grid/tile-stats.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class TileStats extends LitElement {
+    mediatype?: string;
+    itemCount?: number;
+    viewCount?: number;
+    favCount?: number;
+    commentCount?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}