@internetarchive/collection-browser 2.22.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +29 -29
- package/.github/workflows/ci.yml +27 -27
- package/.github/workflows/gh-pages-main.yml +39 -39
- package/.github/workflows/npm-publish.yml +39 -39
- package/.github/workflows/pr-preview.yml +38 -38
- package/.husky/pre-commit +4 -4
- package/.prettierignore +1 -1
- package/LICENSE +661 -661
- package/README.md +83 -83
- package/dist/src/collection-browser.d.ts +1 -2
- package/dist/src/collection-browser.js +681 -687
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets/facet-row.js +130 -130
- package/dist/src/collection-facets/facet-row.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +75 -75
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
- package/dist/src/collection-facets.js +263 -263
- package/dist/src/collection-facets.js.map +1 -1
- package/dist/src/data-source/collection-browser-data-source.js.map +1 -1
- package/dist/src/data-source/collection-browser-query-state.js.map +1 -1
- package/dist/src/data-source/models.js.map +1 -1
- package/dist/src/models.js.map +1 -1
- package/dist/src/restoration-state-handler.js.map +1 -1
- package/dist/src/tiles/base-tile-component.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +139 -139
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/hover/hover-pane-controller.js +21 -21
- package/dist/src/tiles/hover/hover-pane-controller.js.map +1 -1
- package/dist/src/tiles/hover/tile-hover-pane.js +108 -108
- package/dist/src/tiles/hover/tile-hover-pane.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact-header.js +45 -45
- package/dist/src/tiles/list/tile-list-compact-header.js.map +1 -1
- package/dist/src/tiles/list/tile-list-compact.js +97 -97
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.js +289 -289
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +200 -200
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/dist/src/tiles/tile-display-value-provider.js.map +1 -1
- package/dist/test/collection-browser.test.js +183 -197
- package/dist/test/collection-browser.test.js.map +1 -1
- package/dist/test/restoration-state-handler.test.js.map +1 -1
- package/eslint.config.mjs +53 -53
- package/index.html +24 -24
- package/local.archive.org.cert +86 -86
- package/local.archive.org.key +27 -27
- package/package.json +117 -117
- package/renovate.json +6 -6
- package/src/collection-browser.ts +2775 -2779
- package/src/collection-facets/facet-row.ts +282 -282
- package/src/collection-facets/smart-facets/smart-facet-bar.ts +437 -437
- package/src/collection-facets.ts +990 -990
- package/src/data-source/collection-browser-data-source.ts +1390 -1390
- package/src/data-source/collection-browser-query-state.ts +63 -63
- package/src/data-source/models.ts +43 -43
- package/src/models.ts +870 -870
- package/src/restoration-state-handler.ts +544 -544
- package/src/tiles/base-tile-component.ts +53 -53
- package/src/tiles/grid/item-tile.ts +339 -339
- package/src/tiles/hover/hover-pane-controller.ts +517 -517
- package/src/tiles/hover/tile-hover-pane.ts +180 -180
- package/src/tiles/list/tile-list-compact-header.ts +86 -86
- package/src/tiles/list/tile-list-compact.ts +236 -236
- package/src/tiles/list/tile-list.ts +688 -688
- package/src/tiles/tile-dispatcher.ts +486 -486
- package/src/tiles/tile-display-value-provider.ts +124 -124
- package/test/collection-browser.test.ts +2340 -2359
- package/test/restoration-state-handler.test.ts +510 -510
- package/tsconfig.json +20 -20
- package/web-dev-server.config.mjs +30 -30
- package/web-test-runner.config.mjs +41 -41
|
@@ -125,7 +125,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
125
125
|
this.manageViewLabel = 'Select items to remove';
|
|
126
126
|
/** Whether to replace the default sort options with a slot for customization (default: false) */
|
|
127
127
|
this.enableSortOptionsSlot = false;
|
|
128
|
-
/** Whether to
|
|
128
|
+
/** Whether to expose a slot for a smart results carousel above the full results */
|
|
129
129
|
this.showSmartResults = false;
|
|
130
130
|
/**
|
|
131
131
|
* The maximum number of pages we will load when a privileged user clicks
|
|
@@ -358,32 +358,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
358
358
|
this.setPlaceholderType();
|
|
359
359
|
}
|
|
360
360
|
render() {
|
|
361
|
-
return html `
|
|
361
|
+
return html `
|
|
362
362
|
${this.showSmartFacetBar && this.placeholderType === null
|
|
363
|
-
? html `<smart-facet-bar
|
|
364
|
-
.query=${this.baseQuery}
|
|
365
|
-
.aggregations=${this.dataSource.aggregations}
|
|
366
|
-
.selectedFacets=${this.selectedFacets}
|
|
367
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
368
|
-
.filterToggleShown=${!this.mobileView}
|
|
369
|
-
.filterToggleActive=${this.facetPaneVisible}
|
|
370
|
-
.label=${this.smartFacetBarLabel}
|
|
371
|
-
@facetsChanged=${this.facetsChanged}
|
|
363
|
+
? html `<smart-facet-bar
|
|
364
|
+
.query=${this.baseQuery}
|
|
365
|
+
.aggregations=${this.dataSource.aggregations}
|
|
366
|
+
.selectedFacets=${this.selectedFacets}
|
|
367
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
368
|
+
.filterToggleShown=${!this.mobileView}
|
|
369
|
+
.filterToggleActive=${this.facetPaneVisible}
|
|
370
|
+
.label=${this.smartFacetBarLabel}
|
|
371
|
+
@facetsChanged=${this.facetsChanged}
|
|
372
372
|
@filtersToggled=${() => {
|
|
373
373
|
this.facetPaneVisible = !this.facetPaneVisible;
|
|
374
374
|
this.emitFacetPaneVisibilityChanged();
|
|
375
|
-
}}
|
|
375
|
+
}}
|
|
376
376
|
></smart-facet-bar>`
|
|
377
|
-
: nothing}
|
|
378
|
-
|
|
379
|
-
<div
|
|
380
|
-
id="content-container"
|
|
381
|
-
class=${this.mobileView ? 'mobile' : 'desktop'}
|
|
382
|
-
>
|
|
377
|
+
: nothing}
|
|
378
|
+
|
|
379
|
+
<div
|
|
380
|
+
id="content-container"
|
|
381
|
+
class=${this.mobileView ? 'mobile' : 'desktop'}
|
|
382
|
+
>
|
|
383
383
|
${this.placeholderType
|
|
384
384
|
? this.emptyPlaceholderTemplate
|
|
385
|
-
: this.collectionBrowserTemplate}
|
|
386
|
-
</div>
|
|
385
|
+
: this.collectionBrowserTemplate}
|
|
386
|
+
</div>
|
|
387
387
|
`;
|
|
388
388
|
}
|
|
389
389
|
/**
|
|
@@ -427,23 +427,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
427
427
|
*/
|
|
428
428
|
get emptyPlaceholderTemplate() {
|
|
429
429
|
var _a;
|
|
430
|
-
return html `
|
|
431
|
-
<empty-placeholder
|
|
432
|
-
.placeholderType=${this.placeholderType}
|
|
433
|
-
?isMobileView=${this.mobileView}
|
|
434
|
-
?isCollection=${!!this.withinCollection}
|
|
435
|
-
.detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
|
|
436
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
437
|
-
></empty-placeholder>
|
|
430
|
+
return html `
|
|
431
|
+
<empty-placeholder
|
|
432
|
+
.placeholderType=${this.placeholderType}
|
|
433
|
+
?isMobileView=${this.mobileView}
|
|
434
|
+
?isCollection=${!!this.withinCollection}
|
|
435
|
+
.detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
|
|
436
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
437
|
+
></empty-placeholder>
|
|
438
438
|
`;
|
|
439
439
|
}
|
|
440
440
|
/**
|
|
441
441
|
* Top-level template for rendering the left (facets) and right (results) columns.
|
|
442
442
|
*/
|
|
443
443
|
get collectionBrowserTemplate() {
|
|
444
|
-
return html `
|
|
445
|
-
<div id="left-column-scroll-sentinel"></div>
|
|
446
|
-
${this.leftColumnTemplate} ${this.rightColumnTemplate}
|
|
444
|
+
return html `
|
|
445
|
+
<div id="left-column-scroll-sentinel"></div>
|
|
446
|
+
${this.leftColumnTemplate} ${this.rightColumnTemplate}
|
|
447
447
|
`;
|
|
448
448
|
}
|
|
449
449
|
/**
|
|
@@ -462,33 +462,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
462
462
|
* accordion-style facets.
|
|
463
463
|
*/
|
|
464
464
|
get mobileLeftColumnTemplate() {
|
|
465
|
-
return html `
|
|
466
|
-
<div
|
|
467
|
-
id="left-column"
|
|
468
|
-
class="column${this.isResizeToMobile ? ' preload' : ''}"
|
|
469
|
-
>
|
|
470
|
-
${this.facetTopViewSlot} ${this.resultsCountTemplate}
|
|
471
|
-
<div id="facets-header-container">${this.mobileFacetsTemplate}</div>
|
|
472
|
-
</div>
|
|
465
|
+
return html `
|
|
466
|
+
<div
|
|
467
|
+
id="left-column"
|
|
468
|
+
class="column${this.isResizeToMobile ? ' preload' : ''}"
|
|
469
|
+
>
|
|
470
|
+
${this.facetTopViewSlot} ${this.resultsCountTemplate}
|
|
471
|
+
<div id="facets-header-container">${this.mobileFacetsTemplate}</div>
|
|
472
|
+
</div>
|
|
473
473
|
`;
|
|
474
474
|
}
|
|
475
475
|
/**
|
|
476
476
|
* Template for the desktop version of the left column, displaying the facets sidebar.
|
|
477
477
|
*/
|
|
478
478
|
get desktopLeftColumnTemplate() {
|
|
479
|
-
return html `
|
|
480
|
-
<div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
|
|
481
|
-
${this.facetTopViewSlot}
|
|
482
|
-
<div id="facets-header-container">
|
|
483
|
-
<h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
|
|
484
|
-
${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
|
|
485
|
-
</div>
|
|
486
|
-
<div id="facets-container" aria-labelledby="facets-header">
|
|
487
|
-
${this.facetsTemplate}
|
|
488
|
-
<div id="facets-scroll-sentinel"></div>
|
|
489
|
-
</div>
|
|
490
|
-
<div id="facets-bottom-fade"></div>
|
|
491
|
-
</div>
|
|
479
|
+
return html `
|
|
480
|
+
<div id="left-column" class="column" ?hidden=${!this.facetPaneVisible}>
|
|
481
|
+
${this.facetTopViewSlot}
|
|
482
|
+
<div id="facets-header-container">
|
|
483
|
+
<h2 id="facets-header" class="sr-only">${msg('Filters')}</h2>
|
|
484
|
+
${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
|
|
485
|
+
</div>
|
|
486
|
+
<div id="facets-container" aria-labelledby="facets-header">
|
|
487
|
+
${this.facetsTemplate}
|
|
488
|
+
<div id="facets-scroll-sentinel"></div>
|
|
489
|
+
</div>
|
|
490
|
+
<div id="facets-bottom-fade"></div>
|
|
491
|
+
</div>
|
|
492
492
|
`;
|
|
493
493
|
}
|
|
494
494
|
/**
|
|
@@ -496,8 +496,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
496
496
|
* - mainly used to render userlists
|
|
497
497
|
*/
|
|
498
498
|
get facetTopViewSlot() {
|
|
499
|
-
return html `<div id="facet-top-view">
|
|
500
|
-
<slot name="facet-top-slot"></slot>
|
|
499
|
+
return html `<div id="facet-top-view">
|
|
500
|
+
<slot name="facet-top-slot"></slot>
|
|
501
501
|
</div>`;
|
|
502
502
|
}
|
|
503
503
|
/**
|
|
@@ -512,15 +512,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
512
512
|
const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
|
|
513
513
|
const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
|
|
514
514
|
// Added data-testid for Playwright testing
|
|
515
|
-
return html `
|
|
516
|
-
<div id="results-total" data-testid="results-total">
|
|
517
|
-
<span id="big-results-count">
|
|
518
|
-
${shouldShowSearching ? html `Searching…` : resultsCount}
|
|
519
|
-
</span>
|
|
520
|
-
<span id="big-results-label">
|
|
521
|
-
${shouldShowSearching ? nothing : resultsLabel}
|
|
522
|
-
</span>
|
|
523
|
-
</div>
|
|
515
|
+
return html `
|
|
516
|
+
<div id="results-total" data-testid="results-total">
|
|
517
|
+
<span id="big-results-count">
|
|
518
|
+
${shouldShowSearching ? html `Searching…` : resultsCount}
|
|
519
|
+
</span>
|
|
520
|
+
<span id="big-results-label">
|
|
521
|
+
${shouldShowSearching ? nothing : resultsLabel}
|
|
522
|
+
</span>
|
|
523
|
+
</div>
|
|
524
524
|
`;
|
|
525
525
|
}
|
|
526
526
|
/**
|
|
@@ -528,53 +528,50 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
528
528
|
* tiles and sort/filter bar are shown.
|
|
529
529
|
*/
|
|
530
530
|
get rightColumnTemplate() {
|
|
531
|
-
var _a;
|
|
532
531
|
const rightColumnClasses = classMap({
|
|
533
532
|
column: true,
|
|
534
533
|
'full-width': !this.facetPaneVisible,
|
|
535
534
|
'smart-results-spacing': !!this.showSmartResults,
|
|
536
535
|
});
|
|
537
|
-
return html `
|
|
538
|
-
<div id="right-column" class=${rightColumnClasses}>
|
|
536
|
+
return html `
|
|
537
|
+
<div id="right-column" class=${rightColumnClasses}>
|
|
539
538
|
${this.showSmartResults
|
|
540
539
|
? html `<slot name="smart-results"></slot>`
|
|
541
|
-
: nothing}
|
|
542
|
-
<section id="results">
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
<slot name="cb-top-slot"></slot>
|
|
550
|
-
</div>
|
|
540
|
+
: nothing}
|
|
541
|
+
<section id="results">
|
|
542
|
+
<h2 class="results-section-heading">
|
|
543
|
+
<slot name="results-heading"></slot>
|
|
544
|
+
</h2>
|
|
545
|
+
<div id="cb-top-view">
|
|
546
|
+
<slot name="cb-top-slot"></slot>
|
|
547
|
+
</div>
|
|
551
548
|
${this.isManageView
|
|
552
549
|
? this.manageBarTemplate
|
|
553
|
-
: this.sortFilterBarTemplate}
|
|
554
|
-
<slot name="cb-results"></slot>
|
|
550
|
+
: this.sortFilterBarTemplate}
|
|
551
|
+
<slot name="cb-results"></slot>
|
|
555
552
|
${this.displayMode === `list-compact` && this.totalResults
|
|
556
553
|
? this.listHeaderTemplate
|
|
557
|
-
: nothing}
|
|
558
|
-
${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
|
|
559
|
-
</section>
|
|
560
|
-
</div>
|
|
554
|
+
: nothing}
|
|
555
|
+
${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
|
|
556
|
+
</section>
|
|
557
|
+
</div>
|
|
561
558
|
`;
|
|
562
559
|
}
|
|
563
560
|
/**
|
|
564
561
|
* Template for the infinite scroller widget that contains the result tiles.
|
|
565
562
|
*/
|
|
566
563
|
get infiniteScrollerTemplate() {
|
|
567
|
-
return html `<infinite-scroller
|
|
568
|
-
class=${this.infiniteScrollerClasses}
|
|
569
|
-
itemCount=${this.placeholderType ? 0 : nothing}
|
|
570
|
-
ariaLandmarkLabel="Search results"
|
|
571
|
-
.cellProvider=${this}
|
|
572
|
-
.placeholderCellTemplate=${this.placeholderCellTemplate}
|
|
573
|
-
@scrollThresholdReached=${this.scrollThresholdReached}
|
|
574
|
-
@visibleCellsChanged=${this.visibleCellsChanged}
|
|
564
|
+
return html `<infinite-scroller
|
|
565
|
+
class=${this.infiniteScrollerClasses}
|
|
566
|
+
itemCount=${this.placeholderType ? 0 : nothing}
|
|
567
|
+
ariaLandmarkLabel="Search results"
|
|
568
|
+
.cellProvider=${this}
|
|
569
|
+
.placeholderCellTemplate=${this.placeholderCellTemplate}
|
|
570
|
+
@scrollThresholdReached=${this.scrollThresholdReached}
|
|
571
|
+
@visibleCellsChanged=${this.visibleCellsChanged}
|
|
575
572
|
>${this.displayMode === 'grid'
|
|
576
573
|
? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
|
|
577
|
-
: nothing}
|
|
574
|
+
: nothing}
|
|
578
575
|
</infinite-scroller>`;
|
|
579
576
|
}
|
|
580
577
|
/**
|
|
@@ -615,32 +612,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
615
612
|
}
|
|
616
613
|
// We only show relevance sort if a search query is currently defined
|
|
617
614
|
sortFieldAvailability.relevance = this.isRelevanceSortAvailable;
|
|
618
|
-
return html `
|
|
619
|
-
<sort-filter-bar
|
|
620
|
-
.defaultSortField=${this.defaultSortField}
|
|
621
|
-
.defaultSortDirection=${this.defaultSortDirection}
|
|
622
|
-
.defaultViewSort=${defaultViewSort}
|
|
623
|
-
.defaultDateSort=${defaultDateSort}
|
|
624
|
-
.selectedSort=${this.selectedSort}
|
|
625
|
-
.sortDirection=${this.sortDirection}
|
|
626
|
-
.sortFieldAvailability=${sortFieldAvailability}
|
|
627
|
-
.displayMode=${this.displayMode}
|
|
628
|
-
.selectedTitleFilter=${this.selectedTitleFilter}
|
|
629
|
-
.selectedCreatorFilter=${this.selectedCreatorFilter}
|
|
630
|
-
.prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
|
|
631
|
-
.resizeObserver=${this.resizeObserver}
|
|
632
|
-
.enableSortOptionsSlot=${this.enableSortOptionsSlot}
|
|
633
|
-
.suppressDisplayModes=${this.suppressDisplayModes}
|
|
634
|
-
@sortChanged=${this.userChangedSort}
|
|
635
|
-
@displayModeChanged=${this.displayModeChanged}
|
|
636
|
-
@titleLetterChanged=${this.titleLetterSelected}
|
|
637
|
-
@creatorLetterChanged=${this.creatorLetterSelected}
|
|
638
|
-
>
|
|
639
|
-
${this.tileBlurCheckboxTemplate}
|
|
640
|
-
<slot name="sort-options-left" slot="sort-options-left"></slot>
|
|
641
|
-
<slot name="sort-options" slot="sort-options"></slot>
|
|
642
|
-
<slot name="sort-options-right" slot="sort-options-right"></slot>
|
|
643
|
-
</sort-filter-bar>
|
|
615
|
+
return html `
|
|
616
|
+
<sort-filter-bar
|
|
617
|
+
.defaultSortField=${this.defaultSortField}
|
|
618
|
+
.defaultSortDirection=${this.defaultSortDirection}
|
|
619
|
+
.defaultViewSort=${defaultViewSort}
|
|
620
|
+
.defaultDateSort=${defaultDateSort}
|
|
621
|
+
.selectedSort=${this.selectedSort}
|
|
622
|
+
.sortDirection=${this.sortDirection}
|
|
623
|
+
.sortFieldAvailability=${sortFieldAvailability}
|
|
624
|
+
.displayMode=${this.displayMode}
|
|
625
|
+
.selectedTitleFilter=${this.selectedTitleFilter}
|
|
626
|
+
.selectedCreatorFilter=${this.selectedCreatorFilter}
|
|
627
|
+
.prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
|
|
628
|
+
.resizeObserver=${this.resizeObserver}
|
|
629
|
+
.enableSortOptionsSlot=${this.enableSortOptionsSlot}
|
|
630
|
+
.suppressDisplayModes=${this.suppressDisplayModes}
|
|
631
|
+
@sortChanged=${this.userChangedSort}
|
|
632
|
+
@displayModeChanged=${this.displayModeChanged}
|
|
633
|
+
@titleLetterChanged=${this.titleLetterSelected}
|
|
634
|
+
@creatorLetterChanged=${this.creatorLetterSelected}
|
|
635
|
+
>
|
|
636
|
+
${this.tileBlurCheckboxTemplate}
|
|
637
|
+
<slot name="sort-options-left" slot="sort-options-left"></slot>
|
|
638
|
+
<slot name="sort-options" slot="sort-options"></slot>
|
|
639
|
+
<slot name="sort-options-right" slot="sort-options-right"></slot>
|
|
640
|
+
</sort-filter-bar>
|
|
644
641
|
`;
|
|
645
642
|
}
|
|
646
643
|
/**
|
|
@@ -652,20 +649,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
652
649
|
// Only show the checkbox for @archive.org users
|
|
653
650
|
if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
|
|
654
651
|
return nothing;
|
|
655
|
-
return html `
|
|
656
|
-
<label
|
|
657
|
-
id="tile-blur-label"
|
|
658
|
-
for="tile-blur-check"
|
|
659
|
-
slot="sort-options-right"
|
|
660
|
-
>
|
|
661
|
-
${msg('Blurring')}
|
|
662
|
-
<input
|
|
663
|
-
id="tile-blur-check"
|
|
664
|
-
type="checkbox"
|
|
665
|
-
?checked=${!this.shouldSuppressTileBlurring}
|
|
666
|
-
@change=${this.tileBlurCheckboxChanged}
|
|
667
|
-
/>
|
|
668
|
-
</label>
|
|
652
|
+
return html `
|
|
653
|
+
<label
|
|
654
|
+
id="tile-blur-label"
|
|
655
|
+
for="tile-blur-check"
|
|
656
|
+
slot="sort-options-right"
|
|
657
|
+
>
|
|
658
|
+
${msg('Blurring')}
|
|
659
|
+
<input
|
|
660
|
+
id="tile-blur-check"
|
|
661
|
+
type="checkbox"
|
|
662
|
+
?checked=${!this.shouldSuppressTileBlurring}
|
|
663
|
+
@change=${this.tileBlurCheckboxChanged}
|
|
664
|
+
/>
|
|
665
|
+
</label>
|
|
669
666
|
`;
|
|
670
667
|
}
|
|
671
668
|
/**
|
|
@@ -691,27 +688,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
691
688
|
* showing the management view. This generally replaces the sort bar when present.
|
|
692
689
|
*/
|
|
693
690
|
get manageBarTemplate() {
|
|
694
|
-
return html `
|
|
695
|
-
<manage-bar
|
|
696
|
-
.label=${this.manageViewLabel}
|
|
697
|
-
.modalManager=${this.modalManager}
|
|
698
|
-
.selectedItems=${this.dataSource.checkedTileModels}
|
|
699
|
-
.manageViewModalMsg=${this.manageViewModalMsg}
|
|
700
|
-
showSelectAll
|
|
701
|
-
showUnselectAll
|
|
702
|
-
?showItemManageButton=${this.pageContext === 'search'}
|
|
703
|
-
?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
|
|
704
|
-
@removeItems=${this.handleRemoveItems}
|
|
705
|
-
@manageItems=${this.handleManageItems}
|
|
706
|
-
@selectAll=${() => this.dataSource.checkAllTiles()}
|
|
707
|
-
@unselectAll=${() => this.dataSource.uncheckAllTiles()}
|
|
691
|
+
return html `
|
|
692
|
+
<manage-bar
|
|
693
|
+
.label=${this.manageViewLabel}
|
|
694
|
+
.modalManager=${this.modalManager}
|
|
695
|
+
.selectedItems=${this.dataSource.checkedTileModels}
|
|
696
|
+
.manageViewModalMsg=${this.manageViewModalMsg}
|
|
697
|
+
showSelectAll
|
|
698
|
+
showUnselectAll
|
|
699
|
+
?showItemManageButton=${this.pageContext === 'search'}
|
|
700
|
+
?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
|
|
701
|
+
@removeItems=${this.handleRemoveItems}
|
|
702
|
+
@manageItems=${this.handleManageItems}
|
|
703
|
+
@selectAll=${() => this.dataSource.checkAllTiles()}
|
|
704
|
+
@unselectAll=${() => this.dataSource.uncheckAllTiles()}
|
|
708
705
|
@cancel=${() => {
|
|
709
706
|
this.isManageView = false;
|
|
710
707
|
this.dataSource.uncheckAllTiles();
|
|
711
708
|
if (this.searchResultsLoading)
|
|
712
709
|
this.dataSource.resetPages();
|
|
713
|
-
}}
|
|
714
|
-
></manage-bar>
|
|
710
|
+
}}
|
|
711
|
+
></manage-bar>
|
|
715
712
|
`;
|
|
716
713
|
}
|
|
717
714
|
/**
|
|
@@ -959,15 +956,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
959
956
|
label: target.open ? 'open' : 'closed',
|
|
960
957
|
});
|
|
961
958
|
};
|
|
962
|
-
return html `
|
|
963
|
-
<details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
|
|
964
|
-
<summary>
|
|
965
|
-
<span class="collapser-icon">${chevronIcon}</span>
|
|
966
|
-
<h2>${msg('Filters')}</h2>
|
|
967
|
-
${this.clearFiltersBtnTemplate(true)}
|
|
968
|
-
</summary>
|
|
969
|
-
${this.facetsTemplate}
|
|
970
|
-
</details>
|
|
959
|
+
return html `
|
|
960
|
+
<details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
|
|
961
|
+
<summary>
|
|
962
|
+
<span class="collapser-icon">${chevronIcon}</span>
|
|
963
|
+
<h2>${msg('Filters')}</h2>
|
|
964
|
+
${this.clearFiltersBtnTemplate(true)}
|
|
965
|
+
</summary>
|
|
966
|
+
${this.facetsTemplate}
|
|
967
|
+
</details>
|
|
971
968
|
`;
|
|
972
969
|
}
|
|
973
970
|
/**
|
|
@@ -977,10 +974,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
977
974
|
if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
|
|
978
975
|
return nothing;
|
|
979
976
|
if (this.facetLoadStrategy === 'off') {
|
|
980
|
-
return html `
|
|
981
|
-
<p class="facets-message">
|
|
982
|
-
${msg('Facets are temporarily unavailable.')}
|
|
983
|
-
</p>
|
|
977
|
+
return html `
|
|
978
|
+
<p class="facets-message">
|
|
979
|
+
${msg('Facets are temporarily unavailable.')}
|
|
980
|
+
</p>
|
|
984
981
|
`;
|
|
985
982
|
}
|
|
986
983
|
// We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
|
|
@@ -989,44 +986,44 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
989
986
|
const facetDisplayOrder = shouldUseTvInterface
|
|
990
987
|
? tvFacetDisplayOrder
|
|
991
988
|
: defaultFacetDisplayOrder;
|
|
992
|
-
const facets = html `
|
|
993
|
-
<collection-facets
|
|
994
|
-
.collectionPagePath=${this.collectionPagePath}
|
|
995
|
-
.parentCollections=${this.dataSource.parentCollections}
|
|
996
|
-
.pageSpecifierParams=${this.dataSource.pageSpecifierParams}
|
|
997
|
-
.searchService=${this.searchService}
|
|
998
|
-
.featureFeedbackService=${this.featureFeedbackService}
|
|
999
|
-
.recaptchaManager=${this.recaptchaManager}
|
|
1000
|
-
.resizeObserver=${this.resizeObserver}
|
|
1001
|
-
.searchType=${this.searchType}
|
|
1002
|
-
.aggregations=${this.dataSource.aggregations}
|
|
1003
|
-
.histogramAggregation=${this.dataSource.histogramAggregation}
|
|
1004
|
-
.minSelectedDate=${this.minSelectedDate}
|
|
1005
|
-
.maxSelectedDate=${this.maxSelectedDate}
|
|
1006
|
-
.selectedFacets=${this.selectedFacets}
|
|
1007
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1008
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1009
|
-
.tvChannelAliases=${this.dataSource.tvChannelAliases}
|
|
1010
|
-
.showHistogramDatePicker=${this.showHistogramDatePicker}
|
|
1011
|
-
.allowExpandingDatePicker=${!this.mobileView}
|
|
1012
|
-
.allowDatePickerMonths=${shouldUseTvInterface}
|
|
1013
|
-
.contentWidth=${this.contentWidth}
|
|
1014
|
-
.query=${this.baseQuery}
|
|
1015
|
-
.filterMap=${this.dataSource.filterMap}
|
|
1016
|
-
.isManageView=${this.isManageView}
|
|
1017
|
-
.modalManager=${this.modalManager}
|
|
1018
|
-
.analyticsHandler=${this.analyticsHandler}
|
|
1019
|
-
.facetDisplayOrder=${facetDisplayOrder}
|
|
1020
|
-
.isTvSearch=${shouldUseTvInterface}
|
|
1021
|
-
?collapsableFacets=${this.mobileView}
|
|
1022
|
-
?facetsLoading=${this.facetsLoading}
|
|
1023
|
-
?histogramAggregationLoading=${this.facetsLoading}
|
|
1024
|
-
?suppressMediatypeFacets=${this.suppressMediatypeFacets}
|
|
1025
|
-
@facetClick=${this.facetClickHandler}
|
|
1026
|
-
@facetsChanged=${this.facetsChanged}
|
|
1027
|
-
@histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
|
|
1028
|
-
>
|
|
1029
|
-
</collection-facets>
|
|
989
|
+
const facets = html `
|
|
990
|
+
<collection-facets
|
|
991
|
+
.collectionPagePath=${this.collectionPagePath}
|
|
992
|
+
.parentCollections=${this.dataSource.parentCollections}
|
|
993
|
+
.pageSpecifierParams=${this.dataSource.pageSpecifierParams}
|
|
994
|
+
.searchService=${this.searchService}
|
|
995
|
+
.featureFeedbackService=${this.featureFeedbackService}
|
|
996
|
+
.recaptchaManager=${this.recaptchaManager}
|
|
997
|
+
.resizeObserver=${this.resizeObserver}
|
|
998
|
+
.searchType=${this.searchType}
|
|
999
|
+
.aggregations=${this.dataSource.aggregations}
|
|
1000
|
+
.histogramAggregation=${this.dataSource.histogramAggregation}
|
|
1001
|
+
.minSelectedDate=${this.minSelectedDate}
|
|
1002
|
+
.maxSelectedDate=${this.maxSelectedDate}
|
|
1003
|
+
.selectedFacets=${this.selectedFacets}
|
|
1004
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1005
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1006
|
+
.tvChannelAliases=${this.dataSource.tvChannelAliases}
|
|
1007
|
+
.showHistogramDatePicker=${this.showHistogramDatePicker}
|
|
1008
|
+
.allowExpandingDatePicker=${!this.mobileView}
|
|
1009
|
+
.allowDatePickerMonths=${shouldUseTvInterface}
|
|
1010
|
+
.contentWidth=${this.contentWidth}
|
|
1011
|
+
.query=${this.baseQuery}
|
|
1012
|
+
.filterMap=${this.dataSource.filterMap}
|
|
1013
|
+
.isManageView=${this.isManageView}
|
|
1014
|
+
.modalManager=${this.modalManager}
|
|
1015
|
+
.analyticsHandler=${this.analyticsHandler}
|
|
1016
|
+
.facetDisplayOrder=${facetDisplayOrder}
|
|
1017
|
+
.isTvSearch=${shouldUseTvInterface}
|
|
1018
|
+
?collapsableFacets=${this.mobileView}
|
|
1019
|
+
?facetsLoading=${this.facetsLoading}
|
|
1020
|
+
?histogramAggregationLoading=${this.facetsLoading}
|
|
1021
|
+
?suppressMediatypeFacets=${this.suppressMediatypeFacets}
|
|
1022
|
+
@facetClick=${this.facetClickHandler}
|
|
1023
|
+
@facetsChanged=${this.facetsChanged}
|
|
1024
|
+
@histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
|
|
1025
|
+
>
|
|
1026
|
+
</collection-facets>
|
|
1030
1027
|
`;
|
|
1031
1028
|
// If we are using one of the opt-in facet load strategies, we may need to wrap the
|
|
1032
1029
|
// desktop view facets in a <details> widget so that patrons can opt into loading them.
|
|
@@ -1034,20 +1031,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1034
1031
|
const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
|
|
1035
1032
|
(this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
|
|
1036
1033
|
if (showDesktopOptInWidget && !this.mobileView) {
|
|
1037
|
-
return html `
|
|
1038
|
-
<details
|
|
1039
|
-
class="desktop-facets-dropdown"
|
|
1034
|
+
return html `
|
|
1035
|
+
<details
|
|
1036
|
+
class="desktop-facets-dropdown"
|
|
1040
1037
|
@toggle=${(e) => {
|
|
1041
1038
|
const target = e.target;
|
|
1042
1039
|
this.collapsibleFacetsVisible = target.open;
|
|
1043
|
-
}}
|
|
1044
|
-
>
|
|
1045
|
-
<summary>
|
|
1046
|
-
<span class="collapser-icon">${chevronIcon}</span>
|
|
1047
|
-
<h2>${msg('Filters')}</h2>
|
|
1048
|
-
</summary>
|
|
1049
|
-
${facets}
|
|
1050
|
-
</details>
|
|
1040
|
+
}}
|
|
1041
|
+
>
|
|
1042
|
+
<summary>
|
|
1043
|
+
<span class="collapser-icon">${chevronIcon}</span>
|
|
1044
|
+
<h2>${msg('Filters')}</h2>
|
|
1045
|
+
</summary>
|
|
1046
|
+
${facets}
|
|
1047
|
+
</details>
|
|
1051
1048
|
`;
|
|
1052
1049
|
}
|
|
1053
1050
|
// Otherwise, just render the facets component bare
|
|
@@ -1067,34 +1064,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1067
1064
|
mobile,
|
|
1068
1065
|
});
|
|
1069
1066
|
const buttonText = mobile ? 'Clear all' : 'Clear all filters';
|
|
1070
|
-
return html `
|
|
1071
|
-
<div class="clear-filters-btn-row">
|
|
1067
|
+
return html `
|
|
1068
|
+
<div class="clear-filters-btn-row">
|
|
1072
1069
|
${mobile
|
|
1073
1070
|
? html `<span class="clear-filters-btn-separator"> </span>`
|
|
1074
|
-
: nothing}
|
|
1075
|
-
<button class=${buttonClasses} @click=${this.clearFilters}>
|
|
1076
|
-
${buttonText}
|
|
1077
|
-
</button>
|
|
1078
|
-
</div>
|
|
1071
|
+
: nothing}
|
|
1072
|
+
<button class=${buttonClasses} @click=${this.clearFilters}>
|
|
1073
|
+
${buttonText}
|
|
1074
|
+
</button>
|
|
1075
|
+
</div>
|
|
1079
1076
|
`;
|
|
1080
1077
|
}
|
|
1081
1078
|
/**
|
|
1082
1079
|
* Template for the table header content that appears atop the compact list view.
|
|
1083
1080
|
*/
|
|
1084
1081
|
get listHeaderTemplate() {
|
|
1085
|
-
return html `
|
|
1086
|
-
<div id="list-header">
|
|
1087
|
-
<tile-dispatcher
|
|
1088
|
-
.tileDisplayMode=${'list-header'}
|
|
1089
|
-
.resizeObserver=${this.resizeObserver}
|
|
1090
|
-
.sortParam=${this.sortParam}
|
|
1091
|
-
.defaultSortParam=${this.defaultSortParam}
|
|
1092
|
-
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1093
|
-
.loggedIn=${this.loggedIn}
|
|
1094
|
-
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1095
|
-
>
|
|
1096
|
-
</tile-dispatcher>
|
|
1097
|
-
</div>
|
|
1082
|
+
return html `
|
|
1083
|
+
<div id="list-header">
|
|
1084
|
+
<tile-dispatcher
|
|
1085
|
+
.tileDisplayMode=${'list-header'}
|
|
1086
|
+
.resizeObserver=${this.resizeObserver}
|
|
1087
|
+
.sortParam=${this.sortParam}
|
|
1088
|
+
.defaultSortParam=${this.defaultSortParam}
|
|
1089
|
+
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1090
|
+
.loggedIn=${this.loggedIn}
|
|
1091
|
+
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1092
|
+
>
|
|
1093
|
+
</tile-dispatcher>
|
|
1094
|
+
</div>
|
|
1098
1095
|
`;
|
|
1099
1096
|
}
|
|
1100
1097
|
/**
|
|
@@ -1823,27 +1820,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1823
1820
|
const model = this.tileModelAtCellIndex(index);
|
|
1824
1821
|
if (!model)
|
|
1825
1822
|
return undefined;
|
|
1826
|
-
return html `
|
|
1827
|
-
<tile-dispatcher
|
|
1828
|
-
.collectionPagePath=${this.collectionPagePath}
|
|
1829
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1830
|
-
.baseImageUrl=${this.baseImageUrl}
|
|
1831
|
-
.model=${model}
|
|
1832
|
-
.tileDisplayMode=${this.displayMode}
|
|
1833
|
-
.resizeObserver=${this.resizeObserver}
|
|
1834
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1835
|
-
.sortParam=${this.sortParam}
|
|
1836
|
-
.defaultSortParam=${this.defaultSortParam}
|
|
1837
|
-
.creatorFilter=${this.selectedCreatorFilter}
|
|
1838
|
-
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1839
|
-
.loggedIn=${this.loggedIn}
|
|
1840
|
-
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1841
|
-
.isManageView=${this.isManageView}
|
|
1842
|
-
?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
|
|
1843
|
-
?enableHoverPane=${true}
|
|
1844
|
-
@resultSelected=${(e) => this.resultSelected(e)}
|
|
1845
|
-
>
|
|
1846
|
-
</tile-dispatcher>
|
|
1823
|
+
return html `
|
|
1824
|
+
<tile-dispatcher
|
|
1825
|
+
.collectionPagePath=${this.collectionPagePath}
|
|
1826
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1827
|
+
.baseImageUrl=${this.baseImageUrl}
|
|
1828
|
+
.model=${model}
|
|
1829
|
+
.tileDisplayMode=${this.displayMode}
|
|
1830
|
+
.resizeObserver=${this.resizeObserver}
|
|
1831
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1832
|
+
.sortParam=${this.sortParam}
|
|
1833
|
+
.defaultSortParam=${this.defaultSortParam}
|
|
1834
|
+
.creatorFilter=${this.selectedCreatorFilter}
|
|
1835
|
+
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1836
|
+
.loggedIn=${this.loggedIn}
|
|
1837
|
+
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1838
|
+
.isManageView=${this.isManageView}
|
|
1839
|
+
?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
|
|
1840
|
+
?enableHoverPane=${true}
|
|
1841
|
+
@resultSelected=${(e) => this.resultSelected(e)}
|
|
1842
|
+
>
|
|
1843
|
+
</tile-dispatcher>
|
|
1847
1844
|
`;
|
|
1848
1845
|
}
|
|
1849
1846
|
/**
|
|
@@ -1879,440 +1876,440 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1879
1876
|
static get styles() {
|
|
1880
1877
|
return [
|
|
1881
1878
|
srOnlyStyle,
|
|
1882
|
-
css `
|
|
1883
|
-
:host {
|
|
1884
|
-
display: block;
|
|
1885
|
-
--leftColumnWidth: 18rem;
|
|
1886
|
-
--leftColumnPaddingTop: 2rem;
|
|
1887
|
-
--leftColumnPaddingRight: 2.5rem;
|
|
1888
|
-
}
|
|
1889
|
-
|
|
1890
|
-
#facet-top-view {
|
|
1891
|
-
display: flex;
|
|
1892
|
-
}
|
|
1893
|
-
|
|
1894
|
-
/**
|
|
1895
|
-
* When page width resizes from desktop to mobile, use this class to
|
|
1896
|
-
* disable expand/collapse transition when loading.
|
|
1897
|
-
*/
|
|
1898
|
-
.preload * {
|
|
1899
|
-
transition: none !important;
|
|
1900
|
-
-webkit-transition: none !important;
|
|
1901
|
-
-moz-transition: none !important;
|
|
1902
|
-
-ms-transition: none !important;
|
|
1903
|
-
-o-transition: none !important;
|
|
1904
|
-
}
|
|
1905
|
-
|
|
1906
|
-
#content-container {
|
|
1907
|
-
display: flex;
|
|
1908
|
-
}
|
|
1909
|
-
|
|
1910
|
-
empty-placeholder {
|
|
1911
|
-
margin-top: var(--placeholderMarginTop, 0);
|
|
1912
|
-
}
|
|
1913
|
-
|
|
1914
|
-
.collapser-icon {
|
|
1915
|
-
display: inline-block;
|
|
1916
|
-
}
|
|
1917
|
-
|
|
1918
|
-
.collapser-icon svg {
|
|
1919
|
-
display: inline-block;
|
|
1920
|
-
width: 12px;
|
|
1921
|
-
height: 12px;
|
|
1922
|
-
transition: transform 0.2s ease-out;
|
|
1923
|
-
}
|
|
1924
|
-
|
|
1925
|
-
#mobile-filter-collapse {
|
|
1926
|
-
width: 100%;
|
|
1927
|
-
}
|
|
1928
|
-
|
|
1929
|
-
#mobile-filter-collapse > summary {
|
|
1930
|
-
cursor: pointer;
|
|
1931
|
-
list-style: none;
|
|
1932
|
-
}
|
|
1933
|
-
|
|
1934
|
-
#mobile-filter-collapse[open] > summary {
|
|
1935
|
-
margin-bottom: 10px;
|
|
1936
|
-
}
|
|
1937
|
-
|
|
1938
|
-
#mobile-filter-collapse h2 {
|
|
1939
|
-
display: inline-block;
|
|
1940
|
-
margin: 0;
|
|
1941
|
-
font-size: 2rem;
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
#mobile-filter-collapse[open] svg {
|
|
1945
|
-
transform: rotate(90deg);
|
|
1946
|
-
}
|
|
1947
|
-
|
|
1948
|
-
#content-container.mobile {
|
|
1949
|
-
display: block;
|
|
1950
|
-
}
|
|
1951
|
-
|
|
1952
|
-
#right-column {
|
|
1953
|
-
flex: 1;
|
|
1954
|
-
position: relative;
|
|
1955
|
-
min-height: 90vh;
|
|
1956
|
-
border-right: 1px solid rgb(232, 232, 232);
|
|
1957
|
-
margin-top: var(--rightColumnMarginTop, 0);
|
|
1958
|
-
padding-top: 2rem;
|
|
1959
|
-
background: #fff;
|
|
1960
|
-
}
|
|
1961
|
-
|
|
1962
|
-
#left-column:not([hidden]) + #right-column {
|
|
1963
|
-
border-left: 1px solid rgb(232, 232, 232);
|
|
1964
|
-
}
|
|
1965
|
-
|
|
1966
|
-
#right-column.smart-results-spacing {
|
|
1967
|
-
padding-top: 0.5rem;
|
|
1968
|
-
border-right: none;
|
|
1969
|
-
background: transparent;
|
|
1970
|
-
min-width: 0;
|
|
1971
|
-
}
|
|
1972
|
-
|
|
1973
|
-
#results {
|
|
1974
|
-
background: #fff;
|
|
1975
|
-
padding-left: 1rem;
|
|
1976
|
-
padding-right: 1rem;
|
|
1977
|
-
}
|
|
1978
|
-
|
|
1979
|
-
#right-column.smart-results-spacing #results {
|
|
1980
|
-
border-radius: 10px 10px 0px 0px;
|
|
1981
|
-
padding-top: 0.5rem;
|
|
1982
|
-
margin-top: 1rem;
|
|
1983
|
-
}
|
|
1984
|
-
|
|
1985
|
-
.mobile #right-column {
|
|
1986
|
-
border-left: none;
|
|
1987
|
-
}
|
|
1988
|
-
|
|
1989
|
-
.mobile #results {
|
|
1990
|
-
padding: 5px 5px 0;
|
|
1991
|
-
}
|
|
1992
|
-
|
|
1993
|
-
#left-column {
|
|
1994
|
-
width: var(--leftColumnWidth, 18rem);
|
|
1995
|
-
/* Prevents Safari from shrinking col at first draw */
|
|
1996
|
-
min-width: var(--leftColumnWidth, 18rem);
|
|
1997
|
-
padding-top: var(--leftColumnPaddingTop, 2rem);
|
|
1998
|
-
/* Reduced padding by 0.2rem to add the invisible border in the rule below */
|
|
1999
|
-
padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
|
|
2000
|
-
border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
|
|
2001
|
-
z-index: 1;
|
|
2002
|
-
}
|
|
2003
|
-
|
|
2004
|
-
.desktop #left-column {
|
|
2005
|
-
top: 0;
|
|
2006
|
-
position: sticky;
|
|
2007
|
-
height: calc(100vh - 2rem);
|
|
2008
|
-
max-height: calc(100vh - 2rem);
|
|
2009
|
-
overflow-x: hidden;
|
|
2010
|
-
overflow-y: scroll;
|
|
2011
|
-
|
|
2012
|
-
/*
|
|
2013
|
-
* Firefox doesn't support any of the -webkit-scrollbar stuff below, but
|
|
2014
|
-
* does at least give us a tiny bit of control over width & color.
|
|
2015
|
-
*/
|
|
2016
|
-
scrollbar-width: thin;
|
|
2017
|
-
scrollbar-color: transparent transparent;
|
|
2018
|
-
}
|
|
2019
|
-
.desktop #left-column:hover {
|
|
2020
|
-
scrollbar-color: auto;
|
|
2021
|
-
}
|
|
2022
|
-
.desktop #left-column::-webkit-scrollbar {
|
|
2023
|
-
appearance: none;
|
|
2024
|
-
width: 6px;
|
|
2025
|
-
}
|
|
2026
|
-
.desktop #left-column::-webkit-scrollbar-button {
|
|
2027
|
-
height: 3px;
|
|
2028
|
-
background: transparent;
|
|
2029
|
-
}
|
|
2030
|
-
.desktop #left-column::-webkit-scrollbar-corner {
|
|
2031
|
-
background: transparent;
|
|
2032
|
-
}
|
|
2033
|
-
.desktop #left-column::-webkit-scrollbar-thumb {
|
|
2034
|
-
border-radius: 4px;
|
|
2035
|
-
}
|
|
2036
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb {
|
|
2037
|
-
background: rgba(0, 0, 0, 0.15);
|
|
2038
|
-
}
|
|
2039
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
|
|
2040
|
-
background: rgba(0, 0, 0, 0.2);
|
|
2041
|
-
}
|
|
2042
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb:active {
|
|
2043
|
-
background: rgba(0, 0, 0, 0.3);
|
|
2044
|
-
}
|
|
2045
|
-
|
|
2046
|
-
#facets-bottom-fade {
|
|
2047
|
-
background: linear-gradient(
|
|
2048
|
-
to bottom,
|
|
2049
|
-
#f5f5f700 0%,
|
|
2050
|
-
#f5f5f7c0 50%,
|
|
2051
|
-
#f5f5f7 80%,
|
|
2052
|
-
#f5f5f7 100%
|
|
2053
|
-
);
|
|
2054
|
-
position: fixed;
|
|
2055
|
-
bottom: 0;
|
|
2056
|
-
height: 50px;
|
|
2057
|
-
/* Wide enough to cover the content, but leave the scrollbar uncovered */
|
|
2058
|
-
width: calc(
|
|
2059
|
-
var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
|
|
2060
|
-
);
|
|
2061
|
-
z-index: 2;
|
|
2062
|
-
pointer-events: none;
|
|
2063
|
-
transition: height 0.1s ease;
|
|
2064
|
-
}
|
|
2065
|
-
#facets-bottom-fade.hidden {
|
|
2066
|
-
height: 0;
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
.facets-message {
|
|
2070
|
-
font-size: 1.4rem;
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.desktop-facets-dropdown > summary {
|
|
2074
|
-
cursor: pointer;
|
|
2075
|
-
list-style: none;
|
|
2076
|
-
}
|
|
2077
|
-
|
|
2078
|
-
.desktop-facets-dropdown h2 {
|
|
2079
|
-
display: inline-block;
|
|
2080
|
-
margin: 0;
|
|
2081
|
-
font-size: 1.6rem;
|
|
2082
|
-
}
|
|
2083
|
-
|
|
2084
|
-
.desktop-facets-dropdown[open] > summary {
|
|
2085
|
-
margin-bottom: 10px;
|
|
2086
|
-
}
|
|
2087
|
-
|
|
2088
|
-
.desktop-facets-dropdown[open] svg {
|
|
2089
|
-
transform: rotate(90deg);
|
|
2090
|
-
}
|
|
2091
|
-
|
|
2092
|
-
.desktop #left-column-scroll-sentinel {
|
|
2093
|
-
width: 1px;
|
|
2094
|
-
height: 100vh;
|
|
2095
|
-
background: transparent;
|
|
2096
|
-
}
|
|
2097
|
-
|
|
2098
|
-
.desktop #facets-scroll-sentinel {
|
|
2099
|
-
width: 1px;
|
|
2100
|
-
height: 1px;
|
|
2101
|
-
background: transparent;
|
|
2102
|
-
}
|
|
2103
|
-
|
|
2104
|
-
#facets-header-container {
|
|
2105
|
-
display: flex;
|
|
2106
|
-
justify-content: space-between;
|
|
2107
|
-
align-items: flex-start;
|
|
2108
|
-
clear: both;
|
|
2109
|
-
}
|
|
2110
|
-
|
|
2111
|
-
.desktop #facets-header-container {
|
|
2112
|
-
flex-wrap: wrap;
|
|
2113
|
-
}
|
|
2114
|
-
|
|
2115
|
-
.mobile #left-column {
|
|
2116
|
-
width: 100%;
|
|
2117
|
-
min-width: 0;
|
|
2118
|
-
padding: 5px 0;
|
|
2119
|
-
border: 0;
|
|
2120
|
-
}
|
|
2121
|
-
|
|
2122
|
-
.clear-filters-btn-row {
|
|
2123
|
-
display: inline-block;
|
|
2124
|
-
}
|
|
2125
|
-
|
|
2126
|
-
.desktop .clear-filters-btn-row {
|
|
2127
|
-
width: 100%;
|
|
2128
|
-
}
|
|
2129
|
-
|
|
2130
|
-
.clear-filters-btn {
|
|
2131
|
-
display: inline-block;
|
|
2132
|
-
appearance: none;
|
|
2133
|
-
margin: 0;
|
|
2134
|
-
padding: 0;
|
|
2135
|
-
border: 0;
|
|
2136
|
-
background: none;
|
|
2137
|
-
color: var(--ia-theme-link-color);
|
|
2138
|
-
font-size: 1.4rem;
|
|
2139
|
-
font-family: inherit;
|
|
2140
|
-
cursor: pointer;
|
|
2141
|
-
}
|
|
2142
|
-
|
|
2143
|
-
.clear-filters-btn:hover {
|
|
2144
|
-
text-decoration: underline;
|
|
2145
|
-
}
|
|
2146
|
-
|
|
2147
|
-
.clear-filters-btn-separator {
|
|
2148
|
-
display: inline-block;
|
|
2149
|
-
margin-left: 5px;
|
|
2150
|
-
border-left: 1px solid #2c2c2c;
|
|
2151
|
-
font-size: 1.4rem;
|
|
2152
|
-
line-height: 1.3rem;
|
|
2153
|
-
}
|
|
2154
|
-
|
|
2155
|
-
#facets-container {
|
|
2156
|
-
position: relative;
|
|
2157
|
-
max-height: 0;
|
|
2158
|
-
transition: max-height 0.2s ease-in-out;
|
|
2159
|
-
z-index: 1;
|
|
2160
|
-
margin-top: 5rem;
|
|
2161
|
-
padding-bottom: 2rem;
|
|
2162
|
-
}
|
|
2163
|
-
|
|
2164
|
-
.desktop #facets-container {
|
|
2165
|
-
width: 18rem;
|
|
2166
|
-
}
|
|
2167
|
-
|
|
2168
|
-
.mobile #facets-container {
|
|
2169
|
-
overflow: hidden;
|
|
2170
|
-
padding-bottom: 0;
|
|
2171
|
-
padding-left: 10px;
|
|
2172
|
-
padding-right: 10px;
|
|
2173
|
-
}
|
|
2174
|
-
|
|
2175
|
-
#facets-container.expanded {
|
|
2176
|
-
max-height: 2000px;
|
|
2177
|
-
}
|
|
2178
|
-
|
|
2179
|
-
.results-section-heading {
|
|
2180
|
-
margin: 0.5rem 0.3rem;
|
|
2181
|
-
font-size: 2rem;
|
|
2182
|
-
line-height: 25px;
|
|
2183
|
-
}
|
|
2184
|
-
|
|
2185
|
-
#results-total {
|
|
2186
|
-
display: flex;
|
|
2187
|
-
align-items: baseline;
|
|
2188
|
-
}
|
|
2189
|
-
|
|
2190
|
-
.mobile #results-total {
|
|
2191
|
-
position: absolute;
|
|
2192
|
-
right: 10px;
|
|
2193
|
-
}
|
|
2194
|
-
|
|
2195
|
-
#big-results-count {
|
|
2196
|
-
font-size: 2.4rem;
|
|
2197
|
-
font-weight: 500;
|
|
2198
|
-
margin-right: 5px;
|
|
2199
|
-
}
|
|
2200
|
-
|
|
2201
|
-
.mobile #big-results-count {
|
|
2202
|
-
font-size: 2rem;
|
|
2203
|
-
}
|
|
2204
|
-
|
|
2205
|
-
#big-results-label {
|
|
2206
|
-
font-size: 1.4rem;
|
|
2207
|
-
font-weight: 200;
|
|
2208
|
-
}
|
|
2209
|
-
|
|
2210
|
-
#list-header {
|
|
2211
|
-
max-height: 4.2rem;
|
|
2212
|
-
}
|
|
2213
|
-
|
|
2214
|
-
.loading-cover {
|
|
2215
|
-
position: absolute;
|
|
2216
|
-
top: 0;
|
|
2217
|
-
left: 0;
|
|
2218
|
-
width: 100%;
|
|
2219
|
-
height: 100%;
|
|
2220
|
-
display: flex;
|
|
2221
|
-
justify-content: center;
|
|
2222
|
-
z-index: 1;
|
|
2223
|
-
padding-top: 50px;
|
|
2224
|
-
}
|
|
2225
|
-
|
|
2226
|
-
#tile-blur-label {
|
|
2227
|
-
display: flex;
|
|
2228
|
-
align-items: center;
|
|
2229
|
-
column-gap: 5px;
|
|
2230
|
-
}
|
|
2231
|
-
|
|
2232
|
-
#tile-blur-check {
|
|
2233
|
-
margin: 0 5px 0 0;
|
|
2234
|
-
}
|
|
2235
|
-
|
|
2236
|
-
circular-activity-indicator {
|
|
2237
|
-
width: 30px;
|
|
2238
|
-
height: 30px;
|
|
2239
|
-
}
|
|
2240
|
-
|
|
2241
|
-
sort-filter-bar {
|
|
2242
|
-
display: block;
|
|
2243
|
-
margin-bottom: 4rem;
|
|
2244
|
-
}
|
|
2245
|
-
|
|
2246
|
-
infinite-scroller {
|
|
2247
|
-
display: block;
|
|
2248
|
-
--infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
|
|
2249
|
-
--infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
|
|
2250
|
-
}
|
|
2251
|
-
|
|
2252
|
-
infinite-scroller.list-compact {
|
|
2253
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2254
|
-
--collectionBrowserCellMinWidth,
|
|
2255
|
-
100%
|
|
2256
|
-
);
|
|
2257
|
-
--infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
|
|
2258
|
-
--infiniteScrollerCellMaxHeight: 56px;
|
|
2259
|
-
--infiniteScrollerRowGap: 10px;
|
|
2260
|
-
}
|
|
2261
|
-
|
|
2262
|
-
infinite-scroller.list-detail {
|
|
2263
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2264
|
-
--collectionBrowserCellMinWidth,
|
|
2265
|
-
100%
|
|
2266
|
-
);
|
|
2267
|
-
--infiniteScrollerCellMinHeight: var(
|
|
2268
|
-
--collectionBrowserCellMinHeight,
|
|
2269
|
-
5rem
|
|
2270
|
-
);
|
|
2271
|
-
/*
|
|
2272
|
-
30px in spec, compensating for a -4px margin
|
|
2273
|
-
to align title with top of item image
|
|
2274
|
-
src/tiles/list/tile-list.ts
|
|
2275
|
-
*/
|
|
2276
|
-
--infiniteScrollerRowGap: 34px;
|
|
2277
|
-
}
|
|
2278
|
-
|
|
2279
|
-
.mobile infinite-scroller.list-detail {
|
|
2280
|
-
--infiniteScrollerRowGap: 24px;
|
|
2281
|
-
}
|
|
2282
|
-
|
|
2283
|
-
infinite-scroller.grid {
|
|
2284
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2285
|
-
--collectionBrowserCellMinWidth,
|
|
2286
|
-
17rem
|
|
2287
|
-
);
|
|
2288
|
-
--infiniteScrollerCellMaxWidth: var(
|
|
2289
|
-
--collectionBrowserCellMaxWidth,
|
|
2290
|
-
1fr
|
|
2291
|
-
);
|
|
2292
|
-
}
|
|
2293
|
-
|
|
2294
|
-
/* Allow tiles to shrink a bit further at smaller viewport widths */
|
|
2295
|
-
@media screen and (max-width: 880px) {
|
|
2296
|
-
infinite-scroller.grid {
|
|
2297
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2298
|
-
--collectionBrowserCellMinWidth,
|
|
2299
|
-
15rem
|
|
2300
|
-
);
|
|
2301
|
-
}
|
|
2302
|
-
}
|
|
2303
|
-
/* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
|
|
2304
|
-
@media screen and (max-width: 360px) {
|
|
2305
|
-
infinite-scroller.grid {
|
|
2306
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2307
|
-
--collectionBrowserCellMinWidth,
|
|
2308
|
-
12rem
|
|
2309
|
-
);
|
|
2310
|
-
}
|
|
2311
|
-
}
|
|
2312
|
-
|
|
2313
|
-
infinite-scroller.hidden {
|
|
2314
|
-
display: none;
|
|
2315
|
-
}
|
|
1879
|
+
css `
|
|
1880
|
+
:host {
|
|
1881
|
+
display: block;
|
|
1882
|
+
--leftColumnWidth: 18rem;
|
|
1883
|
+
--leftColumnPaddingTop: 2rem;
|
|
1884
|
+
--leftColumnPaddingRight: 2.5rem;
|
|
1885
|
+
}
|
|
1886
|
+
|
|
1887
|
+
#facet-top-view {
|
|
1888
|
+
display: flex;
|
|
1889
|
+
}
|
|
1890
|
+
|
|
1891
|
+
/**
|
|
1892
|
+
* When page width resizes from desktop to mobile, use this class to
|
|
1893
|
+
* disable expand/collapse transition when loading.
|
|
1894
|
+
*/
|
|
1895
|
+
.preload * {
|
|
1896
|
+
transition: none !important;
|
|
1897
|
+
-webkit-transition: none !important;
|
|
1898
|
+
-moz-transition: none !important;
|
|
1899
|
+
-ms-transition: none !important;
|
|
1900
|
+
-o-transition: none !important;
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
#content-container {
|
|
1904
|
+
display: flex;
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
empty-placeholder {
|
|
1908
|
+
margin-top: var(--placeholderMarginTop, 0);
|
|
1909
|
+
}
|
|
1910
|
+
|
|
1911
|
+
.collapser-icon {
|
|
1912
|
+
display: inline-block;
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
.collapser-icon svg {
|
|
1916
|
+
display: inline-block;
|
|
1917
|
+
width: 12px;
|
|
1918
|
+
height: 12px;
|
|
1919
|
+
transition: transform 0.2s ease-out;
|
|
1920
|
+
}
|
|
1921
|
+
|
|
1922
|
+
#mobile-filter-collapse {
|
|
1923
|
+
width: 100%;
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
#mobile-filter-collapse > summary {
|
|
1927
|
+
cursor: pointer;
|
|
1928
|
+
list-style: none;
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
#mobile-filter-collapse[open] > summary {
|
|
1932
|
+
margin-bottom: 10px;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
#mobile-filter-collapse h2 {
|
|
1936
|
+
display: inline-block;
|
|
1937
|
+
margin: 0;
|
|
1938
|
+
font-size: 2rem;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
#mobile-filter-collapse[open] svg {
|
|
1942
|
+
transform: rotate(90deg);
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
#content-container.mobile {
|
|
1946
|
+
display: block;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
#right-column {
|
|
1950
|
+
flex: 1;
|
|
1951
|
+
position: relative;
|
|
1952
|
+
min-height: 90vh;
|
|
1953
|
+
border-right: 1px solid rgb(232, 232, 232);
|
|
1954
|
+
margin-top: var(--rightColumnMarginTop, 0);
|
|
1955
|
+
padding-top: var(--rightColumnPaddingTop, 2rem);
|
|
1956
|
+
background: #fff;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
#left-column:not([hidden]) + #right-column {
|
|
1960
|
+
border-left: 1px solid rgb(232, 232, 232);
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1963
|
+
#right-column.smart-results-spacing {
|
|
1964
|
+
padding-top: 0.5rem;
|
|
1965
|
+
border-right: none;
|
|
1966
|
+
background: transparent;
|
|
1967
|
+
min-width: 0;
|
|
1968
|
+
}
|
|
1969
|
+
|
|
1970
|
+
#results {
|
|
1971
|
+
background: #fff;
|
|
1972
|
+
padding-left: 1rem;
|
|
1973
|
+
padding-right: 1rem;
|
|
1974
|
+
}
|
|
1975
|
+
|
|
1976
|
+
#right-column.smart-results-spacing #results {
|
|
1977
|
+
border-radius: 10px 10px 0px 0px;
|
|
1978
|
+
padding-top: 0.5rem;
|
|
1979
|
+
margin-top: 1rem;
|
|
1980
|
+
}
|
|
1981
|
+
|
|
1982
|
+
.mobile #right-column {
|
|
1983
|
+
border-left: none;
|
|
1984
|
+
}
|
|
1985
|
+
|
|
1986
|
+
.mobile #results {
|
|
1987
|
+
padding: 5px 5px 0;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
#left-column {
|
|
1991
|
+
width: var(--leftColumnWidth, 18rem);
|
|
1992
|
+
/* Prevents Safari from shrinking col at first draw */
|
|
1993
|
+
min-width: var(--leftColumnWidth, 18rem);
|
|
1994
|
+
padding-top: var(--leftColumnPaddingTop, 2rem);
|
|
1995
|
+
/* Reduced padding by 0.2rem to add the invisible border in the rule below */
|
|
1996
|
+
padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
|
|
1997
|
+
border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
|
|
1998
|
+
z-index: 1;
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
.desktop #left-column {
|
|
2002
|
+
top: 0;
|
|
2003
|
+
position: sticky;
|
|
2004
|
+
height: calc(100vh - 2rem);
|
|
2005
|
+
max-height: calc(100vh - 2rem);
|
|
2006
|
+
overflow-x: hidden;
|
|
2007
|
+
overflow-y: scroll;
|
|
2008
|
+
|
|
2009
|
+
/*
|
|
2010
|
+
* Firefox doesn't support any of the -webkit-scrollbar stuff below, but
|
|
2011
|
+
* does at least give us a tiny bit of control over width & color.
|
|
2012
|
+
*/
|
|
2013
|
+
scrollbar-width: thin;
|
|
2014
|
+
scrollbar-color: transparent transparent;
|
|
2015
|
+
}
|
|
2016
|
+
.desktop #left-column:hover {
|
|
2017
|
+
scrollbar-color: auto;
|
|
2018
|
+
}
|
|
2019
|
+
.desktop #left-column::-webkit-scrollbar {
|
|
2020
|
+
appearance: none;
|
|
2021
|
+
width: 6px;
|
|
2022
|
+
}
|
|
2023
|
+
.desktop #left-column::-webkit-scrollbar-button {
|
|
2024
|
+
height: 3px;
|
|
2025
|
+
background: transparent;
|
|
2026
|
+
}
|
|
2027
|
+
.desktop #left-column::-webkit-scrollbar-corner {
|
|
2028
|
+
background: transparent;
|
|
2029
|
+
}
|
|
2030
|
+
.desktop #left-column::-webkit-scrollbar-thumb {
|
|
2031
|
+
border-radius: 4px;
|
|
2032
|
+
}
|
|
2033
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb {
|
|
2034
|
+
background: rgba(0, 0, 0, 0.15);
|
|
2035
|
+
}
|
|
2036
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
|
|
2037
|
+
background: rgba(0, 0, 0, 0.2);
|
|
2038
|
+
}
|
|
2039
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb:active {
|
|
2040
|
+
background: rgba(0, 0, 0, 0.3);
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
#facets-bottom-fade {
|
|
2044
|
+
background: linear-gradient(
|
|
2045
|
+
to bottom,
|
|
2046
|
+
#f5f5f700 0%,
|
|
2047
|
+
#f5f5f7c0 50%,
|
|
2048
|
+
#f5f5f7 80%,
|
|
2049
|
+
#f5f5f7 100%
|
|
2050
|
+
);
|
|
2051
|
+
position: fixed;
|
|
2052
|
+
bottom: 0;
|
|
2053
|
+
height: 50px;
|
|
2054
|
+
/* Wide enough to cover the content, but leave the scrollbar uncovered */
|
|
2055
|
+
width: calc(
|
|
2056
|
+
var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
|
|
2057
|
+
);
|
|
2058
|
+
z-index: 2;
|
|
2059
|
+
pointer-events: none;
|
|
2060
|
+
transition: height 0.1s ease;
|
|
2061
|
+
}
|
|
2062
|
+
#facets-bottom-fade.hidden {
|
|
2063
|
+
height: 0;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.facets-message {
|
|
2067
|
+
font-size: 1.4rem;
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
.desktop-facets-dropdown > summary {
|
|
2071
|
+
cursor: pointer;
|
|
2072
|
+
list-style: none;
|
|
2073
|
+
}
|
|
2074
|
+
|
|
2075
|
+
.desktop-facets-dropdown h2 {
|
|
2076
|
+
display: inline-block;
|
|
2077
|
+
margin: 0;
|
|
2078
|
+
font-size: 1.6rem;
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
.desktop-facets-dropdown[open] > summary {
|
|
2082
|
+
margin-bottom: 10px;
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
.desktop-facets-dropdown[open] svg {
|
|
2086
|
+
transform: rotate(90deg);
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.desktop #left-column-scroll-sentinel {
|
|
2090
|
+
width: 1px;
|
|
2091
|
+
height: 100vh;
|
|
2092
|
+
background: transparent;
|
|
2093
|
+
}
|
|
2094
|
+
|
|
2095
|
+
.desktop #facets-scroll-sentinel {
|
|
2096
|
+
width: 1px;
|
|
2097
|
+
height: 1px;
|
|
2098
|
+
background: transparent;
|
|
2099
|
+
}
|
|
2100
|
+
|
|
2101
|
+
#facets-header-container {
|
|
2102
|
+
display: flex;
|
|
2103
|
+
justify-content: space-between;
|
|
2104
|
+
align-items: flex-start;
|
|
2105
|
+
clear: both;
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
.desktop #facets-header-container {
|
|
2109
|
+
flex-wrap: wrap;
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2112
|
+
.mobile #left-column {
|
|
2113
|
+
width: 100%;
|
|
2114
|
+
min-width: 0;
|
|
2115
|
+
padding: 5px 0;
|
|
2116
|
+
border: 0;
|
|
2117
|
+
}
|
|
2118
|
+
|
|
2119
|
+
.clear-filters-btn-row {
|
|
2120
|
+
display: inline-block;
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2123
|
+
.desktop .clear-filters-btn-row {
|
|
2124
|
+
width: 100%;
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
.clear-filters-btn {
|
|
2128
|
+
display: inline-block;
|
|
2129
|
+
appearance: none;
|
|
2130
|
+
margin: 0;
|
|
2131
|
+
padding: 0;
|
|
2132
|
+
border: 0;
|
|
2133
|
+
background: none;
|
|
2134
|
+
color: var(--ia-theme-link-color);
|
|
2135
|
+
font-size: 1.4rem;
|
|
2136
|
+
font-family: inherit;
|
|
2137
|
+
cursor: pointer;
|
|
2138
|
+
}
|
|
2139
|
+
|
|
2140
|
+
.clear-filters-btn:hover {
|
|
2141
|
+
text-decoration: underline;
|
|
2142
|
+
}
|
|
2143
|
+
|
|
2144
|
+
.clear-filters-btn-separator {
|
|
2145
|
+
display: inline-block;
|
|
2146
|
+
margin-left: 5px;
|
|
2147
|
+
border-left: 1px solid #2c2c2c;
|
|
2148
|
+
font-size: 1.4rem;
|
|
2149
|
+
line-height: 1.3rem;
|
|
2150
|
+
}
|
|
2151
|
+
|
|
2152
|
+
#facets-container {
|
|
2153
|
+
position: relative;
|
|
2154
|
+
max-height: 0;
|
|
2155
|
+
transition: max-height 0.2s ease-in-out;
|
|
2156
|
+
z-index: 1;
|
|
2157
|
+
margin-top: var(--facetsContainerMarginTop, 5rem);
|
|
2158
|
+
padding-bottom: 2rem;
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
.desktop #facets-container {
|
|
2162
|
+
width: 18rem;
|
|
2163
|
+
}
|
|
2164
|
+
|
|
2165
|
+
.mobile #facets-container {
|
|
2166
|
+
overflow: hidden;
|
|
2167
|
+
padding-bottom: 0;
|
|
2168
|
+
padding-left: 10px;
|
|
2169
|
+
padding-right: 10px;
|
|
2170
|
+
}
|
|
2171
|
+
|
|
2172
|
+
#facets-container.expanded {
|
|
2173
|
+
max-height: 2000px;
|
|
2174
|
+
}
|
|
2175
|
+
|
|
2176
|
+
.results-section-heading {
|
|
2177
|
+
margin: 0.5rem 0.3rem;
|
|
2178
|
+
font-size: 2rem;
|
|
2179
|
+
line-height: 25px;
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
#results-total {
|
|
2183
|
+
display: flex;
|
|
2184
|
+
align-items: baseline;
|
|
2185
|
+
}
|
|
2186
|
+
|
|
2187
|
+
.mobile #results-total {
|
|
2188
|
+
position: absolute;
|
|
2189
|
+
right: 10px;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
#big-results-count {
|
|
2193
|
+
font-size: 2.4rem;
|
|
2194
|
+
font-weight: 500;
|
|
2195
|
+
margin-right: 5px;
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.mobile #big-results-count {
|
|
2199
|
+
font-size: 2rem;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
#big-results-label {
|
|
2203
|
+
font-size: 1.4rem;
|
|
2204
|
+
font-weight: 200;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
#list-header {
|
|
2208
|
+
max-height: 4.2rem;
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
.loading-cover {
|
|
2212
|
+
position: absolute;
|
|
2213
|
+
top: 0;
|
|
2214
|
+
left: 0;
|
|
2215
|
+
width: 100%;
|
|
2216
|
+
height: 100%;
|
|
2217
|
+
display: flex;
|
|
2218
|
+
justify-content: center;
|
|
2219
|
+
z-index: 1;
|
|
2220
|
+
padding-top: 50px;
|
|
2221
|
+
}
|
|
2222
|
+
|
|
2223
|
+
#tile-blur-label {
|
|
2224
|
+
display: flex;
|
|
2225
|
+
align-items: center;
|
|
2226
|
+
column-gap: 5px;
|
|
2227
|
+
}
|
|
2228
|
+
|
|
2229
|
+
#tile-blur-check {
|
|
2230
|
+
margin: 0 5px 0 0;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
circular-activity-indicator {
|
|
2234
|
+
width: 30px;
|
|
2235
|
+
height: 30px;
|
|
2236
|
+
}
|
|
2237
|
+
|
|
2238
|
+
sort-filter-bar {
|
|
2239
|
+
display: block;
|
|
2240
|
+
margin-bottom: 4rem;
|
|
2241
|
+
}
|
|
2242
|
+
|
|
2243
|
+
infinite-scroller {
|
|
2244
|
+
display: block;
|
|
2245
|
+
--infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
|
|
2246
|
+
--infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
|
|
2247
|
+
}
|
|
2248
|
+
|
|
2249
|
+
infinite-scroller.list-compact {
|
|
2250
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2251
|
+
--collectionBrowserCellMinWidth,
|
|
2252
|
+
100%
|
|
2253
|
+
);
|
|
2254
|
+
--infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
|
|
2255
|
+
--infiniteScrollerCellMaxHeight: 56px;
|
|
2256
|
+
--infiniteScrollerRowGap: 10px;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
infinite-scroller.list-detail {
|
|
2260
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2261
|
+
--collectionBrowserCellMinWidth,
|
|
2262
|
+
100%
|
|
2263
|
+
);
|
|
2264
|
+
--infiniteScrollerCellMinHeight: var(
|
|
2265
|
+
--collectionBrowserCellMinHeight,
|
|
2266
|
+
5rem
|
|
2267
|
+
);
|
|
2268
|
+
/*
|
|
2269
|
+
30px in spec, compensating for a -4px margin
|
|
2270
|
+
to align title with top of item image
|
|
2271
|
+
src/tiles/list/tile-list.ts
|
|
2272
|
+
*/
|
|
2273
|
+
--infiniteScrollerRowGap: 34px;
|
|
2274
|
+
}
|
|
2275
|
+
|
|
2276
|
+
.mobile infinite-scroller.list-detail {
|
|
2277
|
+
--infiniteScrollerRowGap: 24px;
|
|
2278
|
+
}
|
|
2279
|
+
|
|
2280
|
+
infinite-scroller.grid {
|
|
2281
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2282
|
+
--collectionBrowserCellMinWidth,
|
|
2283
|
+
17rem
|
|
2284
|
+
);
|
|
2285
|
+
--infiniteScrollerCellMaxWidth: var(
|
|
2286
|
+
--collectionBrowserCellMaxWidth,
|
|
2287
|
+
1fr
|
|
2288
|
+
);
|
|
2289
|
+
}
|
|
2290
|
+
|
|
2291
|
+
/* Allow tiles to shrink a bit further at smaller viewport widths */
|
|
2292
|
+
@media screen and (max-width: 880px) {
|
|
2293
|
+
infinite-scroller.grid {
|
|
2294
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2295
|
+
--collectionBrowserCellMinWidth,
|
|
2296
|
+
15rem
|
|
2297
|
+
);
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
/* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
|
|
2301
|
+
@media screen and (max-width: 360px) {
|
|
2302
|
+
infinite-scroller.grid {
|
|
2303
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2304
|
+
--collectionBrowserCellMinWidth,
|
|
2305
|
+
12rem
|
|
2306
|
+
);
|
|
2307
|
+
}
|
|
2308
|
+
}
|
|
2309
|
+
|
|
2310
|
+
infinite-scroller.hidden {
|
|
2311
|
+
display: none;
|
|
2312
|
+
}
|
|
2316
2313
|
`,
|
|
2317
2314
|
];
|
|
2318
2315
|
}
|
|
@@ -2470,9 +2467,6 @@ __decorate([
|
|
|
2470
2467
|
__decorate([
|
|
2471
2468
|
property({ type: Boolean, reflect: true })
|
|
2472
2469
|
], CollectionBrowser.prototype, "showSmartResults", void 0);
|
|
2473
|
-
__decorate([
|
|
2474
|
-
property({ type: String })
|
|
2475
|
-
], CollectionBrowser.prototype, "resultsHeader", void 0);
|
|
2476
2470
|
__decorate([
|
|
2477
2471
|
property({ type: Number })
|
|
2478
2472
|
], CollectionBrowser.prototype, "maxPagesToManage", void 0);
|