@internetarchive/collection-browser 0.2.4-rc1 → 0.2.6-alpha1

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

@@ -0,0 +1 @@
+import '../../../src/tiles/grid/item-tile';

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

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../../src/tiles/grid/item-tile';
+describe('Item Tile', () => {
+    it('should render initial component', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const itemImage = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('item-image');
+        const itemTitle = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#title');
+        expect(itemInfo).to.exist;
+        expect(itemImage).to.exist;
+        expect(itemTitle).to.exist;
+    });
+    it('should render with created-by element', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
+        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(itemInfo).to.exist;
+        expect(createdBy).to.exist;
+        expect(dateSortedBy).to.not.exist;
+    });
+    it('should not render with created-by but date element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        el.sortParam = {
+            field: 'date',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should not render with created-by but reviewdate element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        el.sortParam = {
+            field: 'reviewdate',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should not render with created-by but publicdate element', async () => {
+        var _a, _b;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        el.sortParam = {
+            field: 'publicdate',
+            direction: 'desc',
+        };
+        await el.updateComplete;
+        const createdBy = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.created-by');
+        const dateSortedBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.date-sorted-by');
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should render with created-by when sorting not related to date', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        el.sortParam = {
+            field: 'addeddate',
+            direction: 'asc',
+        };
+        await el.updateComplete;
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
+        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(itemInfo).to.exist;
+        expect(createdBy).to.not.exist;
+        expect(dateSortedBy).to.exist;
+    });
+    it('should render with created-by when sort field id not like date', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `<item-tile></item-tile>`);
+        el.sortParam = {
+            field: 'week',
+            direction: 'asc',
+        };
+        await el.updateComplete;
+        const itemInfo = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-info');
+        const createdBy = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.created-by');
+        const dateSortedBy = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.date-sorted-by');
+        expect(itemInfo).to.exist;
+        expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort
+        expect(createdBy).to.exist;
+    });
+});
+//# sourceMappingURL=item-tile.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-tile.test.js","sourceRoot":"","sources":["../../../../test/tiles/grid/item-tile.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { ItemTile } from '../../../src/tiles/grid/item-tile';\n\nimport '../../../src/tiles/grid/item-tile';\n\ndescribe('Item Tile', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const itemImage = el.shadowRoot?.querySelector('item-image');\n    const itemTitle = el.shadowRoot?.querySelector('#title');\n\n    expect(itemInfo).to.exist;\n    expect(itemImage).to.exist;\n    expect(itemTitle).to.exist;\n  });\n\n  it('should render with created-by element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.exist;\n    expect(dateSortedBy).to.not.exist;\n  });\n\n  it('should not render with created-by but date element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'date',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but reviewdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'reviewdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but publicdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'publicdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sorting not related to date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'addeddate',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sort field id not like date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'week',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort\n    expect(createdBy).to.exist;\n  });\n});\n"]}

package/package.json

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

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

@@ -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/sort-filter-bar/sort-filter-bar.ts

@@ -371,7 +371,7 @@ export class SortFilterBar
               this.displayMode = 'list-detail';
             }}
             class=${this.displayMode === 'list-detail' ? 'active' : ''}
-            title="Extended list view"
+            title="List view"
           >
             ${listIcon}
           </button>

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

@@ -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 {
@@ -13,44 +10,32 @@ export class AccountTile extends LitElement {
 
   render() {
     return html`
-      <div class="outer-holder">
-        <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>
-          <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>
-            </div>
+      <div class="account-tile-main">
+        <div id="title">
+          <h1 class="truncated">${this.model?.identifier}</h1>
+        </div>
+
+        <div class="account-info">
+          <div id="avatar-info">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${this.model?.identifier}"
+            />
           </div>
+
+          <span id="archivist-since">
+            Archivist since ${this.model?.dateAdded?.getFullYear()}
+          </span>
         </div>
+
+        <tile-stats
+          .mediatype=${this.model?.mediatype}
+          .itemCount=${this.model?.itemCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
   }
@@ -63,41 +48,45 @@ export 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;
@@ -112,27 +101,11 @@ export 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! */
@@ -142,15 +115,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;
-      }
     `;
   }
 }

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

@@ -1,16 +1,15 @@
 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { SortParam } from '@internetarchive/search-service';
 
+import { formatDate } from '../../utils/format-date';
 import { TileModel } from '../../models';
-import { formatCount } from '../../utils/format-count';
-
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import viewsIcon from './icons/views';
 
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
@@ -18,183 +17,162 @@ export class ItemTile extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Object }) sortParam?: SortParam;
+
   render() {
-    const itemTitle = this.model?.title || nothing;
-    const itemCreator = this.model?.creator;
+    const itemTitle = this.model?.title;
     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}>
-            </item-image>
+      <div class="container">
+        <div class="item-info">
+          <div id="title">
+            <h1 class="truncated" title=${ifDefined(
+              itemTitle
+            )}>${itemTitle}</h1>
           </div>
-          <div class="item-creator">
-            <div class="truncated">
-              ${itemCreator
-                ? html`<span>by&nbsp;${itemCreator}</span>`
-                : nothing}
-            </div>
+
+          <div id="image">
+            <item-image
+              .model=${this.model}
+              .baseImageUrl=${this.baseImageUrl}>
+            </item-image>
           </div>
+          ${
+            this.doesSortedByDate
+              ? this.sortedDateInfoTemplate
+              : this.creatorTemplate
+          }
         </div>
 
-        <div class="hr"></div>
-
-        <div id="item-stats-container">
-          <div id="stats-holder">
-            <div class="col">
-              <mediatype-icon
-                .mediatype=${this.model?.mediatype}
-                .collection=${this.model?.collections}
-                style="--iconHeight:25px; --iconWidth:25px;"
-              >
-              </mediatype-icon>
-            </div>
-            <div class="col">
-              ${viewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.viewCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${favoriteFilledIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.itemCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${reviewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.favCount, 'short', 'short')}
-              </p>
-            </div>
-          </div>
+        <tile-stats 
+          .mediatype=${this.model?.mediatype}
+          .viewCount=${this.model?.viewCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}>
+        </tile-stats>
         </div>
       </div>
     `;
   }
 
-  static get styles(): CSSResultGroup {
-    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
+  private get doesSortedByDate() {
+    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
+      this.sortParam?.field as string
+    );
+  }
+
+  private get sortedDateInfoTemplate() {
+    let sortedValue;
+
+    switch (this.sortParam?.field) {
+      case 'date':
+        sortedValue = { field: 'published', value: this.model?.datePublished };
+        break;
+      case 'reviewdate':
+        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };
+        break;
+      case 'addeddate':
+        sortedValue = { field: 'added', value: this.model?.dateAdded };
+        break;
+      case 'publicdate':
+        sortedValue = { field: 'archived', value: this.model?.dateArchived };
+        break;
+      default:
+        break;
+    }
+
+    return html`
+      <div class="date-sorted-by truncated">
+        <span>
+          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}
+        </span>
+      </div>
+    `;
+  }
+
+  private get creatorTemplate() {
+    return html`
+      <div class="created-by truncated">
+        ${this.model?.creator
+          ? html`<span>by&nbsp;${this.model?.creator}</span>`
+          : nothing}
+      </div>
+    `;
+  }
 
+  static get styles(): CSSResultGroup {
     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;
       }
 
       .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,
+      .date-sorted-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;
       }
     `;
   }