@internetarchive/collection-browser 0.0.1-alpha.13 → 0.0.1-alpha.16

package/dist/src/tiles/tile-dispatcher.js

@@ -7,25 +7,44 @@ import './grid/item-tile';
 import './grid/account-tile';
 import './list/tile-list';
 import './list/tile-list-compact';
+import './list/tile-list-compact-header';
 let TileDispatcher = class TileDispatcher extends LitElement {
     constructor() {
         super(...arguments);
         this.showDeleteButton = false;
     }
     render() {
-        var _a, _b;
         return html `
       <div id="container">
-        ${this.showDeleteButton
+        ${this.displayMode === 'list-header'
+            ? this.headerTemplate
+            : this.tileTemplate}
+      </div>
+    `;
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam } = this;
+        return html `
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam}
+      >
+      </tile-list-compact-header>
+    `;
+    }
+    get tileTemplate() {
+        var _a, _b;
+        return html `
+      ${this.showDeleteButton
             ? html `<button id="delete-button">X</button>`
             : nothing}
-        <a
-          href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
-          title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
-        >
-          ${this.tile}
-        </a>
-      </div>
+      <a
+        href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
+        title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
+      >
+        ${this.tile}
+      </a>
     `;
     }
     handleResize(entry) {
@@ -79,9 +98,9 @@ let TileDispatcher = class TileDispatcher extends LitElement {
                     default:
                         return html `<item-tile
               .model=${model}
-              .baseNavigationUrl=${this.baseNavigationUrl}
-              .currentWidth=${this.currentWidth}
-              .currentHeight=${this.currentHeight}
+              .baseNavigationUrl=${baseNavigationUrl}
+              .currentWidth=${currentWidth}
+              .currentHeight=${currentHeight}
             ></item-tile>`;
                 }
             case 'list-compact':

package/dist/src/tiles/tile-dispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.showDeleteButton\n          ? html`<button id=\"delete-button\">X</button>`\n          : nothing}\n        <a\n          href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n          title=${ifDefined(this.model?.title)}\n        >\n          ${this.tile}\n        </a>\n      </div>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.displayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.showDeleteButton\n        ? html`<button id=\"delete-button\">X</button>`\n        : nothing}\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${baseNavigationUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\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.0.1-alpha.13",
+  "version": "0.0.1-alpha.16",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/assets/img/icons/chevron.ts

@@ -0,0 +1,4 @@
+import { svg } from 'lit';
+
+export default svg`<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z"/></svg>
+`;

package/src/collection-browser.ts

@@ -24,7 +24,10 @@ import {
   AggregateSearchParams,
   SortParam,
 } from '@internetarchive/search-service';
-import { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
+import {
+  SharedResizeObserverInterface,
+  SharedResizeObserverResizeHandlerInterface,
+} from '@internetarchive/shared-resize-observer';
 import type { TileModel, CollectionDisplayMode } from './models';
 import '@internetarchive/infinite-scroller';
 import './tiles/tile-dispatcher';
@@ -45,11 +48,14 @@ import {
   RestorationStateHandler,
   RestorationState,
 } from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
 
 @customElement('collection-browser')
 export class CollectionBrowser
   extends LitElement
-  implements InfiniteScrollerCellProviderInterface
+  implements
+    InfiniteScrollerCellProviderInterface,
+    SharedResizeObserverResizeHandlerInterface
 {
   @property({ type: String }) baseNavigationUrl?: string;
 
@@ -63,7 +69,7 @@ export class CollectionBrowser
 
   @property({ type: Object }) sortParam: SortParam | null = null;
 
-  @property({ type: String }) selectedSort: SortField = 'relevance';
+  @property({ type: String }) selectedSort: SortField = SortField.relevance;
 
   @property({ type: String }) selectedTitleFilter: string | null = null;
 
@@ -98,6 +104,8 @@ export class CollectionBrowser
     }
   );
 
+  @property({ type: Number }) mobileBreakpoint = 530;
+
   /**
    * The page that the consumer wants to load.
    */
@@ -123,6 +131,12 @@ export class CollectionBrowser
 
   @state() private totalResults?: number;
 
+  @state() private mobileView = false;
+
+  @state() private mobileFacetsVisible = false;
+
+  @query('#content-container') private contentContainer!: HTMLDivElement;
+
   /**
    * When we're animated scrolling to the page, we don't want to fetch
    * all of the pages as it scrolls so this lets us know if we're scrolling
@@ -201,30 +215,48 @@ export class CollectionBrowser
 
   render() {
     return html`
-      <div id="content-container">
+      <div id="content-container" class=${this.mobileView ? 'mobile' : ''}>
         <div id="left-column" class="column">
-          <div id="results-total">
-            <span id="big-results-count"
-              >${this.totalResults
-                ? this.totalResults.toLocaleString()
-                : '-'}</span
-            >
-            <span id="big-results-label">Results</span>
+          <div id="mobile-header-container">
+            ${this.mobileView
+              ? html`
+                  <div id="mobile-filter-collapse">
+                    <h1
+                      @click=${() => {
+                        this.mobileFacetsVisible = !this.mobileFacetsVisible;
+                      }}
+                      @keyup=${() => {
+                        this.mobileFacetsVisible = !this.mobileFacetsVisible;
+                      }}
+                    >
+                      <span
+                        class="collapser ${this.mobileFacetsVisible
+                          ? 'open'
+                          : ''}"
+                      >
+                        ${chevronIcon}
+                      </span>
+                      Filters
+                    </h1>
+                  </div>
+                `
+              : nothing}
+            <div id="results-total">
+              <span id="big-results-count"
+                >${this.totalResults
+                  ? this.totalResults.toLocaleString()
+                  : '-'}</span
+              >
+              <span id="big-results-label">Results</span>
+            </div>
           </div>
-          <div id="facets-container">
-            ${this.facetsLoading ? this.loadingTemplate : nothing}
-            <collection-facets
-              @facetsChanged=${this.facetsChanged}
-              @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-              .aggregations=${this.aggregations}
-              .fullYearsHistogramAggregation=${this
-                .fullYearsHistogramAggregation}
-              .minSelectedDate=${this.minSelectedDate}
-              .maxSelectedDate=${this.maxSelectedDate}
-              .selectedFacets=${this.selectedFacets}
-              ?facetsLoading=${this.facetDataLoading}
-              ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
-            ></collection-facets>
+          <div
+            id="facets-container"
+            class=${!this.mobileView || this.mobileFacetsVisible
+              ? 'expanded'
+              : ''}
+          >
+            ${this.facetsTemplate}
           </div>
         </div>
         <div id="right-column" class="column">
@@ -235,12 +267,17 @@ export class CollectionBrowser
             .displayMode=${this.displayMode}
             .selectedTitleFilter=${this.selectedTitleFilter}
             .selectedCreatorFilter=${this.selectedCreatorFilter}
-            @sortChanged=${this.sortChanged}
+            .resizeObserver=${this.resizeObserver}
+            @sortChanged=${this.userChangedSort}
             @displayModeChanged=${this.displayModeChanged}
             @titleLetterChanged=${this.titleLetterSelected}
             @creatorLetterChanged=${this.creatorLetterSelected}
           ></sort-filter-bar>
 
+          ${this.displayMode === `list-compact`
+            ? this.listHeaderTemplate
+            : nothing}
+
           <infinite-scroller
             class="${ifDefined(this.displayMode)}"
             .cellProvider=${this}
@@ -254,7 +291,7 @@ export class CollectionBrowser
     `;
   }
 
-  private sortChanged(
+  private userChangedSort(
     e: CustomEvent<{
       selectedSort: SortField;
       sortDirection: SortDirection | null;
@@ -263,6 +300,11 @@ export class CollectionBrowser
     const { selectedSort, sortDirection } = e.detail;
     this.selectedSort = selectedSort;
     this.sortDirection = sortDirection;
+
+    if ((this.currentPage ?? 1) > 1) {
+      this.goToPage(1);
+    }
+    this.currentPage = 1;
   }
 
   private selectedSortChanged() {
@@ -270,17 +312,9 @@ export class CollectionBrowser
       this.sortParam = null;
       return;
     }
-
     const sortField = SortFieldToMetadataField[this.selectedSort];
-
     if (!sortField) return;
-
     this.sortParam = new SortParam(sortField, this.sortDirection);
-
-    if ((this.currentPage ?? 1) > 1) {
-      this.goToPage(1);
-    }
-    this.currentPage = 1;
   }
 
   private displayModeChanged(
@@ -313,6 +347,24 @@ export class CollectionBrowser
     return this.facetsLoading || this.fullYearAggregationLoading;
   }
 
+  private get facetsTemplate() {
+    return html`
+      ${this.facetsLoading ? this.loadingTemplate : nothing}
+      <collection-facets
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .aggregations=${this.aggregations}
+        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+      ></collection-facets>
+    `;
+  }
+
   private get loadingTemplate() {
     return html`
       <div class="loading-cover">
@@ -321,6 +373,17 @@ export class CollectionBrowser
     `;
   }
 
+  private get listHeaderTemplate() {
+    return html`
+      <tile-dispatcher
+        .displayMode=${'list-header'}
+        .resizeObserver=${this.resizeObserver}
+        .sortParam=${this.sortParam}
+      >
+      </tile-dispatcher>
+    `;
+  }
+
   private get queryDebuggingTemplate() {
     return html`
       <div>
@@ -386,6 +449,42 @@ export class CollectionBrowser
         this.infiniteScroller.itemCount = this.estimatedTileCount;
       }
     }
+    if (changed.has('resizeObserver')) {
+      const oldObserver = changed.get(
+        'resizeObserver'
+      ) as SharedResizeObserverInterface;
+      if (oldObserver) this.disconnectResizeObserver(oldObserver);
+      this.setupResizeObserver();
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.resizeObserver) {
+      this.disconnectResizeObserver(this.resizeObserver);
+    }
+  }
+
+  handleResize(entry: ResizeObserverEntry): void {
+    if (entry.target === this.contentContainer) {
+      this.mobileView = entry.contentRect.width < 600;
+    }
+  }
+
+  private disconnectResizeObserver(
+    resizeObserver: SharedResizeObserverInterface
+  ) {
+    resizeObserver.removeObserver({
+      target: this.contentContainer,
+      handler: this,
+    });
+  }
+
+  private setupResizeObserver() {
+    if (!this.resizeObserver) return;
+    this.resizeObserver.addObserver({
+      target: this.contentContainer,
+      handler: this,
+    });
   }
 
   /**
@@ -449,7 +548,7 @@ export class CollectionBrowser
   private restoreState() {
     const restorationState = this.restorationStateHandler.getRestorationState();
     this.displayMode = restorationState.displayMode;
-    this.selectedSort = restorationState.selectedSort ?? 'relevance';
+    this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
     this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
@@ -860,23 +959,69 @@ export class CollectionBrowser
       display: flex;
     }
 
+    .collapser {
+      display: inline-block;
+    }
+
+    .collapser svg {
+      width: 10px;
+      height: 10px;
+      transition: transform 0.2s ease-out;
+    }
+
+    .collapser.open svg {
+      transform: rotate(90deg);
+    }
+
+    #mobile-filter-collapse h1 {
+      cursor: pointer;
+    }
+
+    #content-container.mobile {
+      display: block;
+    }
+
+    .column {
+      padding-top: 2rem;
+    }
+
     #right-column {
       flex: 1;
       position: relative;
       border-left: 1px solid rgb(232, 232, 232);
+      padding-left: 1rem;
+    }
+
+    .mobile #right-column {
+      border-left: none;
+      padding: 0;
     }
 
     #left-column {
       width: 18rem;
       padding-right: 12px;
+      padding-right: 1rem;
     }
 
-    .column {
-      padding: 2rem 1rem;
+    .mobile #left-column {
+      width: 100%;
+      padding: 0;
+    }
+
+    #mobile-header-container {
+      display: flex;
+      justify-content: space-between;
     }
 
     #facets-container {
       position: relative;
+      max-height: 0;
+      transition: max-height 0.2s ease-in-out;
+      overflow: hidden;
+    }
+
+    #facets-container.expanded {
+      max-height: 2000px;
     }
 
     #results-total {
@@ -885,6 +1030,10 @@ export class CollectionBrowser
       margin-bottom: 5rem;
     }
 
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
     #big-results-count {
       font-size: 2.4rem;
       font-weight: 500;

package/src/collection-facets.ts

@@ -1,11 +1,12 @@
-import { css, html, LitElement, PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, LitElement, PropertyValues, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Aggregation, Bucket } from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import eyeIcon from './assets/img/icons/eye';
 import eyeClosedIcon from './assets/img/icons/eye-closed';
+import chevronIcon from './assets/img/icons/chevron';
 import {
   FacetOption,
   SelectedFacets,
@@ -57,6 +58,17 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
+  @property({ type: Boolean }) collapsableFacets = false;
+
+  @state() openFacets: Record<FacetOption, boolean> = {
+    subject: false,
+    mediatype: false,
+    language: false,
+    creator: false,
+    collection: false,
+    year: false,
+  };
+
   render() {
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
@@ -65,14 +77,8 @@ export class CollectionFacets extends LitElement {
           ${this.histogramTemplate}
         </div>
 
-        ${this.mergedFacets.map(
-          facetGroup =>
-            html`
-              <div class="facet-group">
-                <h1>${facetGroup.title}</h1>
-                ${this.getFacetTemplate(facetGroup)}
-              </div>
-            `
+        ${this.mergedFacets.map(facetGroup =>
+          this.getFacetGroupTemplate(facetGroup)
         )}
       </div>
     `;
@@ -236,6 +242,36 @@ export class CollectionFacets extends LitElement {
     return facetGroups;
   }
 
+  private getFacetGroupTemplate(facetGroup: FacetGroup) {
+    const { key } = facetGroup;
+    const isOpen = this.openFacets[key];
+    const collapser = html`
+      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
+    `;
+
+    return html`
+      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
+        <h1
+          @click=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+          }}
+          @keyup=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+          }}
+        >
+          ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
+        </h1>
+        <div class="facet-group-content ${isOpen ? 'open' : ''}">
+          ${this.getFacetTemplate(facetGroup)}
+        </div>
+      </div>
+    `;
+  }
+
   private getFacetTemplate(facetGroup: FacetGroup) {
     return html`
       <ul class="facet-list">
@@ -348,12 +384,52 @@ export class CollectionFacets extends LitElement {
         opacity: 0.5;
       }
 
+      .collapser {
+        display: inline-block;
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+      }
+
+      .collapser svg {
+        transition: transform 0.2s ease-in-out;
+      }
+
+      .collapser.open svg {
+        transform: rotate(90deg);
+      }
+
+      .facet-group {
+        margin-bottom: 2rem;
+      }
+
+      .facet-group h1 {
+        margin-bottom: 0.7rem;
+      }
+
+      .facet-group.mobile h1 {
+        cursor: pointer;
+      }
+
+      .facet-group-content {
+        transition: max-height 0.2s ease-in-out;
+      }
+
+      .facet-group.mobile .facet-group-content {
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      .facet-group.mobile .facet-group-content.open {
+        max-height: 2000px;
+      }
+
       h1 {
         font-size: 1.4rem;
         font-weight: 200;
         border-bottom: 1px solid rgb(232, 232, 232);
         padding-bottom: 3px;
-        margin: 24px 0 14px 0;
+        margin: 0;
       }
 
       ul.facet-list {

package/src/mediatype-icon.ts

@@ -78,8 +78,8 @@ export class MediatypeIcon extends LitElement {
       }
 
       svg {
-        height: var(--iconHeight);
-        width: var(--iconWidth);
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
       }
 
       .fill-color {