@internetarchive/collection-browser 2.18.3-alpha-webdev7768.0 → 2.18.3-alpha-webdev7768.2
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/dist/src/collection-browser.d.ts +7 -0
- package/dist/src/collection-browser.js +689 -682
- package/dist/src/collection-browser.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.d.ts +5 -0
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js +43 -7
- package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map +1 -1
- package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.d.ts +12 -0
- package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js +24 -4
- package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js.map +1 -1
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js +118 -118
- package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map +1 -1
- package/dist/src/tiles/tile-dispatcher.js +200 -200
- package/dist/src/tiles/tile-dispatcher.js.map +1 -1
- package/package.json +1 -1
- package/src/collection-browser.ts +2722 -2712
- package/src/collection-facets/smart-facets/smart-facet-bar.ts +52 -10
- package/src/collection-facets/smart-facets/smart-facet-dropdown.ts +25 -4
- package/src/tiles/grid/styles/tile-grid-shared-styles.ts +129 -129
- package/src/tiles/tile-dispatcher.ts +486 -486
|
@@ -38,6 +38,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
38
38
|
this.defaultSortField = SortField.relevance;
|
|
39
39
|
this.defaultSortDirection = null;
|
|
40
40
|
this.pageSize = 50;
|
|
41
|
+
/**
|
|
42
|
+
* Whether to show smart facets (bubbles) along the top of the component
|
|
43
|
+
*/
|
|
41
44
|
this.showSmartFacetBar = false;
|
|
42
45
|
/**
|
|
43
46
|
* Whether to show the date picker (above the facets)
|
|
@@ -347,30 +350,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
347
350
|
this.setPlaceholderType();
|
|
348
351
|
}
|
|
349
352
|
render() {
|
|
350
|
-
return html `
|
|
353
|
+
return html `
|
|
351
354
|
${this.showSmartFacetBar && this.placeholderType === null
|
|
352
|
-
? html `<smart-facet-bar
|
|
353
|
-
.query=${this.baseQuery}
|
|
354
|
-
.aggregations=${this.dataSource.aggregations}
|
|
355
|
-
.selectedFacets=${this.selectedFacets}
|
|
356
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
357
|
-
.filterToggleActive=${this.facetPaneVisible}
|
|
358
|
-
|
|
355
|
+
? html `<smart-facet-bar
|
|
356
|
+
.query=${this.baseQuery}
|
|
357
|
+
.aggregations=${this.dataSource.aggregations}
|
|
358
|
+
.selectedFacets=${this.selectedFacets}
|
|
359
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
360
|
+
.filterToggleActive=${this.facetPaneVisible}
|
|
361
|
+
.label=${this.smartFacetBarLabel}
|
|
362
|
+
@facetsChanged=${this.facetsChanged}
|
|
359
363
|
@filtersToggled=${() => {
|
|
360
364
|
this.facetPaneVisible = !this.facetPaneVisible;
|
|
361
365
|
this.emitFacetPaneVisibilityChanged();
|
|
362
|
-
}}
|
|
366
|
+
}}
|
|
363
367
|
></smart-facet-bar>`
|
|
364
|
-
: nothing}
|
|
365
|
-
|
|
366
|
-
<div
|
|
367
|
-
id="content-container"
|
|
368
|
-
class=${this.mobileView ? 'mobile' : 'desktop'}
|
|
369
|
-
>
|
|
368
|
+
: nothing}
|
|
369
|
+
|
|
370
|
+
<div
|
|
371
|
+
id="content-container"
|
|
372
|
+
class=${this.mobileView ? 'mobile' : 'desktop'}
|
|
373
|
+
>
|
|
370
374
|
${this.placeholderType
|
|
371
375
|
? this.emptyPlaceholderTemplate
|
|
372
|
-
: this.collectionBrowserTemplate}
|
|
373
|
-
</div>
|
|
376
|
+
: this.collectionBrowserTemplate}
|
|
377
|
+
</div>
|
|
374
378
|
`;
|
|
375
379
|
}
|
|
376
380
|
/**
|
|
@@ -410,23 +414,23 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
410
414
|
*/
|
|
411
415
|
get emptyPlaceholderTemplate() {
|
|
412
416
|
var _a;
|
|
413
|
-
return html `
|
|
414
|
-
<empty-placeholder
|
|
415
|
-
.placeholderType=${this.placeholderType}
|
|
416
|
-
?isMobileView=${this.mobileView}
|
|
417
|
-
?isCollection=${!!this.withinCollection}
|
|
418
|
-
.detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
|
|
419
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
420
|
-
></empty-placeholder>
|
|
417
|
+
return html `
|
|
418
|
+
<empty-placeholder
|
|
419
|
+
.placeholderType=${this.placeholderType}
|
|
420
|
+
?isMobileView=${this.mobileView}
|
|
421
|
+
?isCollection=${!!this.withinCollection}
|
|
422
|
+
.detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
|
|
423
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
424
|
+
></empty-placeholder>
|
|
421
425
|
`;
|
|
422
426
|
}
|
|
423
427
|
/**
|
|
424
428
|
* Top-level template for rendering the left (facets) and right (results) columns.
|
|
425
429
|
*/
|
|
426
430
|
get collectionBrowserTemplate() {
|
|
427
|
-
return html `
|
|
428
|
-
<div id="left-column-scroll-sentinel"></div>
|
|
429
|
-
${this.leftColumnTemplate} ${this.rightColumnTemplate}
|
|
431
|
+
return html `
|
|
432
|
+
<div id="left-column-scroll-sentinel"></div>
|
|
433
|
+
${this.leftColumnTemplate} ${this.rightColumnTemplate}
|
|
430
434
|
`;
|
|
431
435
|
}
|
|
432
436
|
/**
|
|
@@ -445,37 +449,37 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
445
449
|
* accordion-style facets.
|
|
446
450
|
*/
|
|
447
451
|
get mobileLeftColumnTemplate() {
|
|
448
|
-
return html `
|
|
449
|
-
<div
|
|
450
|
-
id="left-column"
|
|
451
|
-
class="column${this.isResizeToMobile ? ' preload' : ''}"
|
|
452
|
-
>
|
|
453
|
-
${this.facetTopViewSlot} ${this.resultsCountTemplate}
|
|
454
|
-
<div id="facets-header-container">${this.mobileFacetsTemplate}</div>
|
|
455
|
-
</div>
|
|
452
|
+
return html `
|
|
453
|
+
<div
|
|
454
|
+
id="left-column"
|
|
455
|
+
class="column${this.isResizeToMobile ? ' preload' : ''}"
|
|
456
|
+
>
|
|
457
|
+
${this.facetTopViewSlot} ${this.resultsCountTemplate}
|
|
458
|
+
<div id="facets-header-container">${this.mobileFacetsTemplate}</div>
|
|
459
|
+
</div>
|
|
456
460
|
`;
|
|
457
461
|
}
|
|
458
462
|
/**
|
|
459
463
|
* Template for the desktop version of the left column, displaying the facets sidebar.
|
|
460
464
|
*/
|
|
461
465
|
get desktopLeftColumnTemplate() {
|
|
462
|
-
return html `
|
|
463
|
-
<div
|
|
464
|
-
id="left-column"
|
|
465
|
-
class="column"
|
|
466
|
-
?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
|
|
467
|
-
>
|
|
468
|
-
${this.facetTopViewSlot}
|
|
469
|
-
<div id="facets-header-container">
|
|
470
|
-
<h2 id="facets-header" class="sr-only">Filters</h2>
|
|
471
|
-
${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
|
|
472
|
-
</div>
|
|
473
|
-
<div id="facets-container" aria-labelledby="facets-header">
|
|
474
|
-
${this.facetsTemplate}
|
|
475
|
-
<div id="facets-scroll-sentinel"></div>
|
|
476
|
-
</div>
|
|
477
|
-
<div id="facets-bottom-fade"></div>
|
|
478
|
-
</div>
|
|
466
|
+
return html `
|
|
467
|
+
<div
|
|
468
|
+
id="left-column"
|
|
469
|
+
class="column"
|
|
470
|
+
?hidden=${this.showSmartFacetBar && !this.facetPaneVisible}
|
|
471
|
+
>
|
|
472
|
+
${this.facetTopViewSlot}
|
|
473
|
+
<div id="facets-header-container">
|
|
474
|
+
<h2 id="facets-header" class="sr-only">Filters</h2>
|
|
475
|
+
${this.resultsCountTemplate} ${this.clearFiltersBtnTemplate(false)}
|
|
476
|
+
</div>
|
|
477
|
+
<div id="facets-container" aria-labelledby="facets-header">
|
|
478
|
+
${this.facetsTemplate}
|
|
479
|
+
<div id="facets-scroll-sentinel"></div>
|
|
480
|
+
</div>
|
|
481
|
+
<div id="facets-bottom-fade"></div>
|
|
482
|
+
</div>
|
|
479
483
|
`;
|
|
480
484
|
}
|
|
481
485
|
/**
|
|
@@ -483,8 +487,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
483
487
|
* - mainly used to render userlists
|
|
484
488
|
*/
|
|
485
489
|
get facetTopViewSlot() {
|
|
486
|
-
return html `<div id="facet-top-view">
|
|
487
|
-
<slot name="facet-top-slot"></slot>
|
|
490
|
+
return html `<div id="facet-top-view">
|
|
491
|
+
<slot name="facet-top-slot"></slot>
|
|
488
492
|
</div>`;
|
|
489
493
|
}
|
|
490
494
|
/**
|
|
@@ -499,15 +503,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
499
503
|
const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
|
|
500
504
|
const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
|
|
501
505
|
// Added data-testid for Playwright testing
|
|
502
|
-
return html `
|
|
503
|
-
<div id="results-total" data-testid="results-total">
|
|
504
|
-
<span id="big-results-count">
|
|
505
|
-
${shouldShowSearching ? html `Searching…` : resultsCount}
|
|
506
|
-
</span>
|
|
507
|
-
<span id="big-results-label">
|
|
508
|
-
${shouldShowSearching ? nothing : resultsLabel}
|
|
509
|
-
</span>
|
|
510
|
-
</div>
|
|
506
|
+
return html `
|
|
507
|
+
<div id="results-total" data-testid="results-total">
|
|
508
|
+
<span id="big-results-count">
|
|
509
|
+
${shouldShowSearching ? html `Searching…` : resultsCount}
|
|
510
|
+
</span>
|
|
511
|
+
<span id="big-results-label">
|
|
512
|
+
${shouldShowSearching ? nothing : resultsLabel}
|
|
513
|
+
</span>
|
|
514
|
+
</div>
|
|
511
515
|
`;
|
|
512
516
|
}
|
|
513
517
|
/**
|
|
@@ -521,47 +525,47 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
521
525
|
'full-width': this.showSmartFacetBar && !this.facetPaneVisible,
|
|
522
526
|
'smart-results-spacing': !!this.showSmartResults,
|
|
523
527
|
});
|
|
524
|
-
return html `
|
|
525
|
-
<div id="right-column" class=${rightColumnClasses}>
|
|
528
|
+
return html `
|
|
529
|
+
<div id="right-column" class=${rightColumnClasses}>
|
|
526
530
|
${this.showSmartResults
|
|
527
531
|
? html `<slot name="smart-results"></slot>`
|
|
528
|
-
: nothing}
|
|
529
|
-
<section id="results">
|
|
532
|
+
: nothing}
|
|
533
|
+
<section id="results">
|
|
530
534
|
${this.showSmartResults
|
|
531
|
-
? html `<h2 class="results-section-heading">
|
|
532
|
-
${(_a = this.resultsHeader) !== null && _a !== void 0 ? _a : msg('All results')}
|
|
535
|
+
? html `<h2 class="results-section-heading">
|
|
536
|
+
${(_a = this.resultsHeader) !== null && _a !== void 0 ? _a : msg('All results')}
|
|
533
537
|
</h2>`
|
|
534
|
-
: nothing}
|
|
535
|
-
<div id="cb-top-view">
|
|
536
|
-
<slot name="cb-top-slot"></slot>
|
|
537
|
-
</div>
|
|
538
|
+
: nothing}
|
|
539
|
+
<div id="cb-top-view">
|
|
540
|
+
<slot name="cb-top-slot"></slot>
|
|
541
|
+
</div>
|
|
538
542
|
${this.isManageView
|
|
539
543
|
? this.manageBarTemplate
|
|
540
|
-
: this.sortFilterBarTemplate}
|
|
541
|
-
<slot name="cb-results"></slot>
|
|
544
|
+
: this.sortFilterBarTemplate}
|
|
545
|
+
<slot name="cb-results"></slot>
|
|
542
546
|
${this.displayMode === `list-compact` && this.totalResults
|
|
543
547
|
? this.listHeaderTemplate
|
|
544
|
-
: nothing}
|
|
545
|
-
${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
|
|
546
|
-
</section>
|
|
547
|
-
</div>
|
|
548
|
+
: nothing}
|
|
549
|
+
${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
|
|
550
|
+
</section>
|
|
551
|
+
</div>
|
|
548
552
|
`;
|
|
549
553
|
}
|
|
550
554
|
/**
|
|
551
555
|
* Template for the infinite scroller widget that contains the result tiles.
|
|
552
556
|
*/
|
|
553
557
|
get infiniteScrollerTemplate() {
|
|
554
|
-
return html `<infinite-scroller
|
|
555
|
-
class=${this.infiniteScrollerClasses}
|
|
556
|
-
itemCount=${this.placeholderType ? 0 : nothing}
|
|
557
|
-
ariaLandmarkLabel="Search results"
|
|
558
|
-
.cellProvider=${this}
|
|
559
|
-
.placeholderCellTemplate=${this.placeholderCellTemplate}
|
|
560
|
-
@scrollThresholdReached=${this.scrollThresholdReached}
|
|
561
|
-
@visibleCellsChanged=${this.visibleCellsChanged}
|
|
558
|
+
return html `<infinite-scroller
|
|
559
|
+
class=${this.infiniteScrollerClasses}
|
|
560
|
+
itemCount=${this.placeholderType ? 0 : nothing}
|
|
561
|
+
ariaLandmarkLabel="Search results"
|
|
562
|
+
.cellProvider=${this}
|
|
563
|
+
.placeholderCellTemplate=${this.placeholderCellTemplate}
|
|
564
|
+
@scrollThresholdReached=${this.scrollThresholdReached}
|
|
565
|
+
@visibleCellsChanged=${this.visibleCellsChanged}
|
|
562
566
|
>${this.displayMode === 'grid'
|
|
563
567
|
? html `<slot name="result-last-tile" slot="result-last-tile"></slot>`
|
|
564
|
-
: nothing}
|
|
568
|
+
: nothing}
|
|
565
569
|
</infinite-scroller>`;
|
|
566
570
|
}
|
|
567
571
|
/**
|
|
@@ -582,31 +586,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
582
586
|
var _a;
|
|
583
587
|
if (this.suppressSortBar)
|
|
584
588
|
return nothing;
|
|
585
|
-
return html `
|
|
586
|
-
<sort-filter-bar
|
|
587
|
-
.defaultSortField=${this.defaultSortField}
|
|
588
|
-
.defaultSortDirection=${this.defaultSortDirection}
|
|
589
|
-
.selectedSort=${this.selectedSort}
|
|
590
|
-
.sortDirection=${this.sortDirection}
|
|
591
|
-
.showRelevance=${this.isRelevanceSortAvailable}
|
|
592
|
-
.showDateFavorited=${(_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')}
|
|
593
|
-
.displayMode=${this.displayMode}
|
|
594
|
-
.selectedTitleFilter=${this.selectedTitleFilter}
|
|
595
|
-
.selectedCreatorFilter=${this.selectedCreatorFilter}
|
|
596
|
-
.prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
|
|
597
|
-
.resizeObserver=${this.resizeObserver}
|
|
598
|
-
.enableSortOptionsSlot=${this.enableSortOptionsSlot}
|
|
599
|
-
.suppressDisplayModes=${this.suppressDisplayModes}
|
|
600
|
-
@sortChanged=${this.userChangedSort}
|
|
601
|
-
@displayModeChanged=${this.displayModeChanged}
|
|
602
|
-
@titleLetterChanged=${this.titleLetterSelected}
|
|
603
|
-
@creatorLetterChanged=${this.creatorLetterSelected}
|
|
604
|
-
>
|
|
605
|
-
${this.tileBlurCheckboxTemplate}
|
|
606
|
-
<slot name="sort-options-left" slot="sort-options-left"></slot>
|
|
607
|
-
<slot name="sort-options" slot="sort-options"></slot>
|
|
608
|
-
<slot name="sort-options-right" slot="sort-options-right"></slot>
|
|
609
|
-
</sort-filter-bar>
|
|
589
|
+
return html `
|
|
590
|
+
<sort-filter-bar
|
|
591
|
+
.defaultSortField=${this.defaultSortField}
|
|
592
|
+
.defaultSortDirection=${this.defaultSortDirection}
|
|
593
|
+
.selectedSort=${this.selectedSort}
|
|
594
|
+
.sortDirection=${this.sortDirection}
|
|
595
|
+
.showRelevance=${this.isRelevanceSortAvailable}
|
|
596
|
+
.showDateFavorited=${(_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')}
|
|
597
|
+
.displayMode=${this.displayMode}
|
|
598
|
+
.selectedTitleFilter=${this.selectedTitleFilter}
|
|
599
|
+
.selectedCreatorFilter=${this.selectedCreatorFilter}
|
|
600
|
+
.prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
|
|
601
|
+
.resizeObserver=${this.resizeObserver}
|
|
602
|
+
.enableSortOptionsSlot=${this.enableSortOptionsSlot}
|
|
603
|
+
.suppressDisplayModes=${this.suppressDisplayModes}
|
|
604
|
+
@sortChanged=${this.userChangedSort}
|
|
605
|
+
@displayModeChanged=${this.displayModeChanged}
|
|
606
|
+
@titleLetterChanged=${this.titleLetterSelected}
|
|
607
|
+
@creatorLetterChanged=${this.creatorLetterSelected}
|
|
608
|
+
>
|
|
609
|
+
${this.tileBlurCheckboxTemplate}
|
|
610
|
+
<slot name="sort-options-left" slot="sort-options-left"></slot>
|
|
611
|
+
<slot name="sort-options" slot="sort-options"></slot>
|
|
612
|
+
<slot name="sort-options-right" slot="sort-options-right"></slot>
|
|
613
|
+
</sort-filter-bar>
|
|
610
614
|
`;
|
|
611
615
|
}
|
|
612
616
|
/**
|
|
@@ -618,20 +622,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
618
622
|
// Only show the checkbox for @archive.org users
|
|
619
623
|
if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
|
|
620
624
|
return nothing;
|
|
621
|
-
return html `
|
|
622
|
-
<label
|
|
623
|
-
id="tile-blur-label"
|
|
624
|
-
for="tile-blur-check"
|
|
625
|
-
slot="sort-options-right"
|
|
626
|
-
>
|
|
627
|
-
${msg('Blurring')}
|
|
628
|
-
<input
|
|
629
|
-
id="tile-blur-check"
|
|
630
|
-
type="checkbox"
|
|
631
|
-
?checked=${!this.shouldSuppressTileBlurring}
|
|
632
|
-
@change=${this.tileBlurCheckboxChanged}
|
|
633
|
-
/>
|
|
634
|
-
</label>
|
|
625
|
+
return html `
|
|
626
|
+
<label
|
|
627
|
+
id="tile-blur-label"
|
|
628
|
+
for="tile-blur-check"
|
|
629
|
+
slot="sort-options-right"
|
|
630
|
+
>
|
|
631
|
+
${msg('Blurring')}
|
|
632
|
+
<input
|
|
633
|
+
id="tile-blur-check"
|
|
634
|
+
type="checkbox"
|
|
635
|
+
?checked=${!this.shouldSuppressTileBlurring}
|
|
636
|
+
@change=${this.tileBlurCheckboxChanged}
|
|
637
|
+
/>
|
|
638
|
+
</label>
|
|
635
639
|
`;
|
|
636
640
|
}
|
|
637
641
|
/**
|
|
@@ -642,27 +646,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
642
646
|
const manageViewModalMsg = this.profileElement === 'uploads'
|
|
643
647
|
? 'Note: it may take a few minutes for these items to stop appearing in your uploads list.'
|
|
644
648
|
: nothing;
|
|
645
|
-
return html `
|
|
646
|
-
<manage-bar
|
|
647
|
-
.label=${this.manageViewLabel}
|
|
648
|
-
.modalManager=${this.modalManager}
|
|
649
|
-
.selectedItems=${this.dataSource.checkedTileModels}
|
|
650
|
-
.manageViewModalMsg=${manageViewModalMsg}
|
|
651
|
-
showSelectAll
|
|
652
|
-
showUnselectAll
|
|
653
|
-
?showItemManageButton=${this.pageContext === 'search'}
|
|
654
|
-
?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
|
|
655
|
-
@removeItems=${this.handleRemoveItems}
|
|
656
|
-
@manageItems=${this.handleManageItems}
|
|
657
|
-
@selectAll=${() => this.dataSource.checkAllTiles()}
|
|
658
|
-
@unselectAll=${() => this.dataSource.uncheckAllTiles()}
|
|
649
|
+
return html `
|
|
650
|
+
<manage-bar
|
|
651
|
+
.label=${this.manageViewLabel}
|
|
652
|
+
.modalManager=${this.modalManager}
|
|
653
|
+
.selectedItems=${this.dataSource.checkedTileModels}
|
|
654
|
+
.manageViewModalMsg=${manageViewModalMsg}
|
|
655
|
+
showSelectAll
|
|
656
|
+
showUnselectAll
|
|
657
|
+
?showItemManageButton=${this.pageContext === 'search'}
|
|
658
|
+
?removeAllowed=${this.dataSource.checkedTileModels.length !== 0}
|
|
659
|
+
@removeItems=${this.handleRemoveItems}
|
|
660
|
+
@manageItems=${this.handleManageItems}
|
|
661
|
+
@selectAll=${() => this.dataSource.checkAllTiles()}
|
|
662
|
+
@unselectAll=${() => this.dataSource.uncheckAllTiles()}
|
|
659
663
|
@cancel=${() => {
|
|
660
664
|
this.isManageView = false;
|
|
661
665
|
this.dataSource.uncheckAllTiles();
|
|
662
666
|
if (this.searchResultsLoading)
|
|
663
667
|
this.dataSource.resetPages();
|
|
664
|
-
}}
|
|
665
|
-
></manage-bar>
|
|
668
|
+
}}
|
|
669
|
+
></manage-bar>
|
|
666
670
|
`;
|
|
667
671
|
}
|
|
668
672
|
/**
|
|
@@ -910,15 +914,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
910
914
|
label: target.open ? 'open' : 'closed',
|
|
911
915
|
});
|
|
912
916
|
};
|
|
913
|
-
return html `
|
|
914
|
-
<details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
|
|
915
|
-
<summary>
|
|
916
|
-
<span class="collapser-icon">${chevronIcon}</span>
|
|
917
|
-
<h2>${msg('Filters')}</h2>
|
|
918
|
-
${this.clearFiltersBtnTemplate(true)}
|
|
919
|
-
</summary>
|
|
920
|
-
${this.facetsTemplate}
|
|
921
|
-
</details>
|
|
917
|
+
return html `
|
|
918
|
+
<details id="mobile-filter-collapse" @toggle=${toggleFacetsVisible}>
|
|
919
|
+
<summary>
|
|
920
|
+
<span class="collapser-icon">${chevronIcon}</span>
|
|
921
|
+
<h2>${msg('Filters')}</h2>
|
|
922
|
+
${this.clearFiltersBtnTemplate(true)}
|
|
923
|
+
</summary>
|
|
924
|
+
${this.facetsTemplate}
|
|
925
|
+
</details>
|
|
922
926
|
`;
|
|
923
927
|
}
|
|
924
928
|
/**
|
|
@@ -928,10 +932,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
928
932
|
if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
|
|
929
933
|
return nothing;
|
|
930
934
|
if (this.facetLoadStrategy === 'off') {
|
|
931
|
-
return html `
|
|
932
|
-
<p class="facets-message">
|
|
933
|
-
${msg('Facets are temporarily unavailable.')}
|
|
934
|
-
</p>
|
|
935
|
+
return html `
|
|
936
|
+
<p class="facets-message">
|
|
937
|
+
${msg('Facets are temporarily unavailable.')}
|
|
938
|
+
</p>
|
|
935
939
|
`;
|
|
936
940
|
}
|
|
937
941
|
// We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
|
|
@@ -940,44 +944,44 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
940
944
|
const facetDisplayOrder = shouldUseTvInterface
|
|
941
945
|
? tvFacetDisplayOrder
|
|
942
946
|
: defaultFacetDisplayOrder;
|
|
943
|
-
const facets = html `
|
|
944
|
-
<collection-facets
|
|
945
|
-
.collectionPagePath=${this.collectionPagePath}
|
|
946
|
-
.parentCollections=${this.dataSource.parentCollections}
|
|
947
|
-
.pageSpecifierParams=${this.dataSource.pageSpecifierParams}
|
|
948
|
-
.searchService=${this.searchService}
|
|
949
|
-
.featureFeedbackService=${this.featureFeedbackService}
|
|
950
|
-
.recaptchaManager=${this.recaptchaManager}
|
|
951
|
-
.resizeObserver=${this.resizeObserver}
|
|
952
|
-
.searchType=${this.searchType}
|
|
953
|
-
.aggregations=${this.dataSource.aggregations}
|
|
954
|
-
.histogramAggregation=${this.dataSource.histogramAggregation}
|
|
955
|
-
.minSelectedDate=${this.minSelectedDate}
|
|
956
|
-
.maxSelectedDate=${this.maxSelectedDate}
|
|
957
|
-
.selectedFacets=${this.selectedFacets}
|
|
958
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
959
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
960
|
-
.tvChannelAliases=${this.dataSource.tvChannelAliases}
|
|
961
|
-
.showHistogramDatePicker=${this.showHistogramDatePicker}
|
|
962
|
-
.allowExpandingDatePicker=${!this.mobileView}
|
|
963
|
-
.allowDatePickerMonths=${shouldUseTvInterface}
|
|
964
|
-
.contentWidth=${this.contentWidth}
|
|
965
|
-
.query=${this.baseQuery}
|
|
966
|
-
.filterMap=${this.dataSource.filterMap}
|
|
967
|
-
.isManageView=${this.isManageView}
|
|
968
|
-
.modalManager=${this.modalManager}
|
|
969
|
-
.analyticsHandler=${this.analyticsHandler}
|
|
970
|
-
.facetDisplayOrder=${facetDisplayOrder}
|
|
971
|
-
.isTvSearch=${shouldUseTvInterface}
|
|
972
|
-
?collapsableFacets=${this.mobileView}
|
|
973
|
-
?facetsLoading=${this.facetsLoading}
|
|
974
|
-
?histogramAggregationLoading=${this.facetsLoading}
|
|
975
|
-
?suppressMediatypeFacets=${this.suppressMediatypeFacets}
|
|
976
|
-
@facetClick=${this.facetClickHandler}
|
|
977
|
-
@facetsChanged=${this.facetsChanged}
|
|
978
|
-
@histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
|
|
979
|
-
>
|
|
980
|
-
</collection-facets>
|
|
947
|
+
const facets = html `
|
|
948
|
+
<collection-facets
|
|
949
|
+
.collectionPagePath=${this.collectionPagePath}
|
|
950
|
+
.parentCollections=${this.dataSource.parentCollections}
|
|
951
|
+
.pageSpecifierParams=${this.dataSource.pageSpecifierParams}
|
|
952
|
+
.searchService=${this.searchService}
|
|
953
|
+
.featureFeedbackService=${this.featureFeedbackService}
|
|
954
|
+
.recaptchaManager=${this.recaptchaManager}
|
|
955
|
+
.resizeObserver=${this.resizeObserver}
|
|
956
|
+
.searchType=${this.searchType}
|
|
957
|
+
.aggregations=${this.dataSource.aggregations}
|
|
958
|
+
.histogramAggregation=${this.dataSource.histogramAggregation}
|
|
959
|
+
.minSelectedDate=${this.minSelectedDate}
|
|
960
|
+
.maxSelectedDate=${this.maxSelectedDate}
|
|
961
|
+
.selectedFacets=${this.selectedFacets}
|
|
962
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
963
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
964
|
+
.tvChannelAliases=${this.dataSource.tvChannelAliases}
|
|
965
|
+
.showHistogramDatePicker=${this.showHistogramDatePicker}
|
|
966
|
+
.allowExpandingDatePicker=${!this.mobileView}
|
|
967
|
+
.allowDatePickerMonths=${shouldUseTvInterface}
|
|
968
|
+
.contentWidth=${this.contentWidth}
|
|
969
|
+
.query=${this.baseQuery}
|
|
970
|
+
.filterMap=${this.dataSource.filterMap}
|
|
971
|
+
.isManageView=${this.isManageView}
|
|
972
|
+
.modalManager=${this.modalManager}
|
|
973
|
+
.analyticsHandler=${this.analyticsHandler}
|
|
974
|
+
.facetDisplayOrder=${facetDisplayOrder}
|
|
975
|
+
.isTvSearch=${shouldUseTvInterface}
|
|
976
|
+
?collapsableFacets=${this.mobileView}
|
|
977
|
+
?facetsLoading=${this.facetsLoading}
|
|
978
|
+
?histogramAggregationLoading=${this.facetsLoading}
|
|
979
|
+
?suppressMediatypeFacets=${this.suppressMediatypeFacets}
|
|
980
|
+
@facetClick=${this.facetClickHandler}
|
|
981
|
+
@facetsChanged=${this.facetsChanged}
|
|
982
|
+
@histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
|
|
983
|
+
>
|
|
984
|
+
</collection-facets>
|
|
981
985
|
`;
|
|
982
986
|
// If we are using one of the opt-in facet load strategies, we may need to wrap the
|
|
983
987
|
// desktop view facets in a <details> widget so that patrons can opt into loading them.
|
|
@@ -985,20 +989,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
985
989
|
const showDesktopOptInWidget = this.facetLoadStrategy === 'opt-in' ||
|
|
986
990
|
(this.facetLoadStrategy === 'opt-in-or-login' && !this.loggedIn);
|
|
987
991
|
if (showDesktopOptInWidget && !this.mobileView) {
|
|
988
|
-
return html `
|
|
989
|
-
<details
|
|
990
|
-
class="desktop-facets-dropdown"
|
|
992
|
+
return html `
|
|
993
|
+
<details
|
|
994
|
+
class="desktop-facets-dropdown"
|
|
991
995
|
@toggle=${(e) => {
|
|
992
996
|
const target = e.target;
|
|
993
997
|
this.collapsibleFacetsVisible = target.open;
|
|
994
|
-
}}
|
|
995
|
-
>
|
|
996
|
-
<summary>
|
|
997
|
-
<span class="collapser-icon">${chevronIcon}</span>
|
|
998
|
-
<h2>${msg('Filters')}</h2>
|
|
999
|
-
</summary>
|
|
1000
|
-
${facets}
|
|
1001
|
-
</details>
|
|
998
|
+
}}
|
|
999
|
+
>
|
|
1000
|
+
<summary>
|
|
1001
|
+
<span class="collapser-icon">${chevronIcon}</span>
|
|
1002
|
+
<h2>${msg('Filters')}</h2>
|
|
1003
|
+
</summary>
|
|
1004
|
+
${facets}
|
|
1005
|
+
</details>
|
|
1002
1006
|
`;
|
|
1003
1007
|
}
|
|
1004
1008
|
// Otherwise, just render the facets component bare
|
|
@@ -1018,34 +1022,34 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1018
1022
|
mobile,
|
|
1019
1023
|
});
|
|
1020
1024
|
const buttonText = mobile ? 'Clear all' : 'Clear all filters';
|
|
1021
|
-
return html `
|
|
1022
|
-
<div class="clear-filters-btn-row">
|
|
1025
|
+
return html `
|
|
1026
|
+
<div class="clear-filters-btn-row">
|
|
1023
1027
|
${mobile
|
|
1024
1028
|
? html `<span class="clear-filters-btn-separator"> </span>`
|
|
1025
|
-
: nothing}
|
|
1026
|
-
<button class=${buttonClasses} @click=${this.clearFilters}>
|
|
1027
|
-
${buttonText}
|
|
1028
|
-
</button>
|
|
1029
|
-
</div>
|
|
1029
|
+
: nothing}
|
|
1030
|
+
<button class=${buttonClasses} @click=${this.clearFilters}>
|
|
1031
|
+
${buttonText}
|
|
1032
|
+
</button>
|
|
1033
|
+
</div>
|
|
1030
1034
|
`;
|
|
1031
1035
|
}
|
|
1032
1036
|
/**
|
|
1033
1037
|
* Template for the table header content that appears atop the compact list view.
|
|
1034
1038
|
*/
|
|
1035
1039
|
get listHeaderTemplate() {
|
|
1036
|
-
return html `
|
|
1037
|
-
<div id="list-header">
|
|
1038
|
-
<tile-dispatcher
|
|
1039
|
-
.tileDisplayMode=${'list-header'}
|
|
1040
|
-
.resizeObserver=${this.resizeObserver}
|
|
1041
|
-
.sortParam=${this.sortParam}
|
|
1042
|
-
.defaultSortParam=${this.defaultSortParam}
|
|
1043
|
-
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1044
|
-
.loggedIn=${this.loggedIn}
|
|
1045
|
-
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1046
|
-
>
|
|
1047
|
-
</tile-dispatcher>
|
|
1048
|
-
</div>
|
|
1040
|
+
return html `
|
|
1041
|
+
<div id="list-header">
|
|
1042
|
+
<tile-dispatcher
|
|
1043
|
+
.tileDisplayMode=${'list-header'}
|
|
1044
|
+
.resizeObserver=${this.resizeObserver}
|
|
1045
|
+
.sortParam=${this.sortParam}
|
|
1046
|
+
.defaultSortParam=${this.defaultSortParam}
|
|
1047
|
+
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1048
|
+
.loggedIn=${this.loggedIn}
|
|
1049
|
+
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1050
|
+
>
|
|
1051
|
+
</tile-dispatcher>
|
|
1052
|
+
</div>
|
|
1049
1053
|
`;
|
|
1050
1054
|
}
|
|
1051
1055
|
/**
|
|
@@ -1774,27 +1778,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1774
1778
|
const model = this.tileModelAtCellIndex(index);
|
|
1775
1779
|
if (!model)
|
|
1776
1780
|
return undefined;
|
|
1777
|
-
return html `
|
|
1778
|
-
<tile-dispatcher
|
|
1779
|
-
.collectionPagePath=${this.collectionPagePath}
|
|
1780
|
-
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1781
|
-
.baseImageUrl=${this.baseImageUrl}
|
|
1782
|
-
.model=${model}
|
|
1783
|
-
.tileDisplayMode=${this.displayMode}
|
|
1784
|
-
.resizeObserver=${this.resizeObserver}
|
|
1785
|
-
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1786
|
-
.sortParam=${this.sortParam}
|
|
1787
|
-
.defaultSortParam=${this.defaultSortParam}
|
|
1788
|
-
.creatorFilter=${this.selectedCreatorFilter}
|
|
1789
|
-
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1790
|
-
.loggedIn=${this.loggedIn}
|
|
1791
|
-
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1792
|
-
.isManageView=${this.isManageView}
|
|
1793
|
-
?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
|
|
1794
|
-
?enableHoverPane=${true}
|
|
1795
|
-
@resultSelected=${(e) => this.resultSelected(e)}
|
|
1796
|
-
>
|
|
1797
|
-
</tile-dispatcher>
|
|
1781
|
+
return html `
|
|
1782
|
+
<tile-dispatcher
|
|
1783
|
+
.collectionPagePath=${this.collectionPagePath}
|
|
1784
|
+
.baseNavigationUrl=${this.baseNavigationUrl}
|
|
1785
|
+
.baseImageUrl=${this.baseImageUrl}
|
|
1786
|
+
.model=${model}
|
|
1787
|
+
.tileDisplayMode=${this.displayMode}
|
|
1788
|
+
.resizeObserver=${this.resizeObserver}
|
|
1789
|
+
.collectionTitles=${this.dataSource.collectionTitles}
|
|
1790
|
+
.sortParam=${this.sortParam}
|
|
1791
|
+
.defaultSortParam=${this.defaultSortParam}
|
|
1792
|
+
.creatorFilter=${this.selectedCreatorFilter}
|
|
1793
|
+
.mobileBreakpoint=${this.mobileBreakpoint}
|
|
1794
|
+
.loggedIn=${this.loggedIn}
|
|
1795
|
+
.suppressBlurring=${this.shouldSuppressTileBlurring}
|
|
1796
|
+
.isManageView=${this.isManageView}
|
|
1797
|
+
?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
|
|
1798
|
+
?enableHoverPane=${true}
|
|
1799
|
+
@resultSelected=${(e) => this.resultSelected(e)}
|
|
1800
|
+
>
|
|
1801
|
+
</tile-dispatcher>
|
|
1798
1802
|
`;
|
|
1799
1803
|
}
|
|
1800
1804
|
/**
|
|
@@ -1830,441 +1834,441 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
|
|
|
1830
1834
|
static get styles() {
|
|
1831
1835
|
return [
|
|
1832
1836
|
srOnlyStyle,
|
|
1833
|
-
css `
|
|
1834
|
-
:host {
|
|
1835
|
-
display: block;
|
|
1836
|
-
--leftColumnWidth: 18rem;
|
|
1837
|
-
--leftColumnPaddingTop: 2rem;
|
|
1838
|
-
--leftColumnPaddingRight: 2.5rem;
|
|
1839
|
-
}
|
|
1840
|
-
|
|
1841
|
-
#facet-top-view {
|
|
1842
|
-
display: flex;
|
|
1843
|
-
}
|
|
1844
|
-
|
|
1845
|
-
/**
|
|
1846
|
-
* When page width resizes from desktop to mobile, use this class to
|
|
1847
|
-
* disable expand/collapse transition when loading.
|
|
1848
|
-
*/
|
|
1849
|
-
.preload * {
|
|
1850
|
-
transition: none !important;
|
|
1851
|
-
-webkit-transition: none !important;
|
|
1852
|
-
-moz-transition: none !important;
|
|
1853
|
-
-ms-transition: none !important;
|
|
1854
|
-
-o-transition: none !important;
|
|
1855
|
-
}
|
|
1856
|
-
|
|
1857
|
-
#content-container {
|
|
1858
|
-
display: flex;
|
|
1859
|
-
}
|
|
1860
|
-
|
|
1861
|
-
empty-placeholder {
|
|
1862
|
-
margin-top: var(--placeholderMarginTop, 0);
|
|
1863
|
-
}
|
|
1864
|
-
|
|
1865
|
-
.collapser-icon {
|
|
1866
|
-
display: inline-block;
|
|
1867
|
-
}
|
|
1868
|
-
|
|
1869
|
-
.collapser-icon svg {
|
|
1870
|
-
display: inline-block;
|
|
1871
|
-
width: 12px;
|
|
1872
|
-
height: 12px;
|
|
1873
|
-
transition: transform 0.2s ease-out;
|
|
1874
|
-
}
|
|
1875
|
-
|
|
1876
|
-
#mobile-filter-collapse {
|
|
1877
|
-
width: 100%;
|
|
1878
|
-
}
|
|
1879
|
-
|
|
1880
|
-
#mobile-filter-collapse > summary {
|
|
1881
|
-
cursor: pointer;
|
|
1882
|
-
list-style: none;
|
|
1883
|
-
}
|
|
1884
|
-
|
|
1885
|
-
#mobile-filter-collapse[open] > summary {
|
|
1886
|
-
margin-bottom: 10px;
|
|
1887
|
-
}
|
|
1888
|
-
|
|
1889
|
-
#mobile-filter-collapse h2 {
|
|
1890
|
-
display: inline-block;
|
|
1891
|
-
margin: 0;
|
|
1892
|
-
font-size: 2rem;
|
|
1893
|
-
}
|
|
1894
|
-
|
|
1895
|
-
#mobile-filter-collapse[open] svg {
|
|
1896
|
-
transform: rotate(90deg);
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
#content-container.mobile {
|
|
1900
|
-
display: block;
|
|
1901
|
-
}
|
|
1902
|
-
|
|
1903
|
-
#right-column {
|
|
1904
|
-
flex: 1;
|
|
1905
|
-
position: relative;
|
|
1906
|
-
min-height: 90vh;
|
|
1907
|
-
border-right: 1px solid rgb(232, 232, 232);
|
|
1908
|
-
margin-top: var(--rightColumnMarginTop, 0);
|
|
1909
|
-
padding-top: 2rem;
|
|
1910
|
-
background: #fff;
|
|
1911
|
-
}
|
|
1912
|
-
|
|
1913
|
-
#left-column:not([hidden]) + #right-column {
|
|
1914
|
-
border-left: 1px solid rgb(232, 232, 232);
|
|
1915
|
-
}
|
|
1916
|
-
|
|
1917
|
-
#right-column.smart-results-spacing {
|
|
1918
|
-
padding-top: 0.5rem;
|
|
1919
|
-
border-right: none;
|
|
1920
|
-
background: transparent;
|
|
1921
|
-
min-width: 0;
|
|
1922
|
-
}
|
|
1923
|
-
|
|
1924
|
-
#results {
|
|
1925
|
-
background: #fff;
|
|
1926
|
-
padding-left: 1rem;
|
|
1927
|
-
padding-right: 1rem;
|
|
1928
|
-
}
|
|
1929
|
-
|
|
1930
|
-
#right-column.smart-results-spacing #results {
|
|
1931
|
-
border-radius: 10px 10px 0px 0px;
|
|
1932
|
-
padding-top: 0.5rem;
|
|
1933
|
-
margin-top: 1rem;
|
|
1934
|
-
}
|
|
1935
|
-
|
|
1936
|
-
.mobile #right-column {
|
|
1937
|
-
border-left: none;
|
|
1938
|
-
}
|
|
1939
|
-
|
|
1940
|
-
.mobile #results {
|
|
1941
|
-
padding: 5px 5px 0;
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
#left-column {
|
|
1945
|
-
width: var(--leftColumnWidth, 18rem);
|
|
1946
|
-
/* Prevents Safari from shrinking col at first draw */
|
|
1947
|
-
min-width: var(--leftColumnWidth, 18rem);
|
|
1948
|
-
padding-top: var(--leftColumnPaddingTop, 2rem);
|
|
1949
|
-
/* Reduced padding by 0.2rem to add the invisible border in the rule below */
|
|
1950
|
-
padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
|
|
1951
|
-
border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
|
|
1952
|
-
z-index: 1;
|
|
1953
|
-
}
|
|
1954
|
-
|
|
1955
|
-
.desktop #left-column {
|
|
1956
|
-
top: 0;
|
|
1957
|
-
position: sticky;
|
|
1958
|
-
height: calc(100vh - 2rem);
|
|
1959
|
-
max-height: calc(100vh - 2rem);
|
|
1960
|
-
overflow-x: hidden;
|
|
1961
|
-
overflow-y: scroll;
|
|
1962
|
-
|
|
1963
|
-
/*
|
|
1964
|
-
* Firefox doesn't support any of the -webkit-scrollbar stuff below, but
|
|
1965
|
-
* does at least give us a tiny bit of control over width & color.
|
|
1966
|
-
*/
|
|
1967
|
-
scrollbar-width: thin;
|
|
1968
|
-
scrollbar-color: transparent transparent;
|
|
1969
|
-
}
|
|
1970
|
-
.desktop #left-column:hover {
|
|
1971
|
-
scrollbar-color: auto;
|
|
1972
|
-
}
|
|
1973
|
-
.desktop #left-column::-webkit-scrollbar {
|
|
1974
|
-
appearance: none;
|
|
1975
|
-
width: 6px;
|
|
1976
|
-
}
|
|
1977
|
-
.desktop #left-column::-webkit-scrollbar-button {
|
|
1978
|
-
height: 3px;
|
|
1979
|
-
background: transparent;
|
|
1980
|
-
}
|
|
1981
|
-
.desktop #left-column::-webkit-scrollbar-corner {
|
|
1982
|
-
background: transparent;
|
|
1983
|
-
}
|
|
1984
|
-
.desktop #left-column::-webkit-scrollbar-thumb {
|
|
1985
|
-
border-radius: 4px;
|
|
1986
|
-
}
|
|
1987
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb {
|
|
1988
|
-
background: rgba(0, 0, 0, 0.15);
|
|
1989
|
-
}
|
|
1990
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
|
|
1991
|
-
background: rgba(0, 0, 0, 0.2);
|
|
1992
|
-
}
|
|
1993
|
-
.desktop #left-column:hover::-webkit-scrollbar-thumb:active {
|
|
1994
|
-
background: rgba(0, 0, 0, 0.3);
|
|
1995
|
-
}
|
|
1996
|
-
|
|
1997
|
-
#facets-bottom-fade {
|
|
1998
|
-
background: linear-gradient(
|
|
1999
|
-
to bottom,
|
|
2000
|
-
#f5f5f700 0%,
|
|
2001
|
-
#f5f5f7c0 50%,
|
|
2002
|
-
#f5f5f7 80%,
|
|
2003
|
-
#f5f5f7 100%
|
|
2004
|
-
);
|
|
2005
|
-
position: fixed;
|
|
2006
|
-
bottom: 0;
|
|
2007
|
-
height: 50px;
|
|
2008
|
-
/* Wide enough to cover the content, but leave the scrollbar uncovered */
|
|
2009
|
-
width: calc(
|
|
2010
|
-
var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
|
|
2011
|
-
);
|
|
2012
|
-
z-index: 2;
|
|
2013
|
-
pointer-events: none;
|
|
2014
|
-
transition: height 0.1s ease;
|
|
2015
|
-
}
|
|
2016
|
-
#facets-bottom-fade.hidden {
|
|
2017
|
-
height: 0;
|
|
2018
|
-
}
|
|
2019
|
-
|
|
2020
|
-
.facets-message {
|
|
2021
|
-
font-size: 1.4rem;
|
|
2022
|
-
}
|
|
2023
|
-
|
|
2024
|
-
.desktop-facets-dropdown > summary {
|
|
2025
|
-
cursor: pointer;
|
|
2026
|
-
list-style: none;
|
|
2027
|
-
}
|
|
2028
|
-
|
|
2029
|
-
.desktop-facets-dropdown h2 {
|
|
2030
|
-
display: inline-block;
|
|
2031
|
-
margin: 0;
|
|
2032
|
-
font-size: 1.6rem;
|
|
2033
|
-
}
|
|
2034
|
-
|
|
2035
|
-
.desktop-facets-dropdown[open] > summary {
|
|
2036
|
-
margin-bottom: 10px;
|
|
2037
|
-
}
|
|
2038
|
-
|
|
2039
|
-
.desktop-facets-dropdown[open] svg {
|
|
2040
|
-
transform: rotate(90deg);
|
|
2041
|
-
}
|
|
2042
|
-
|
|
2043
|
-
.desktop #left-column-scroll-sentinel {
|
|
2044
|
-
width: 1px;
|
|
2045
|
-
height: 100vh;
|
|
2046
|
-
background: transparent;
|
|
2047
|
-
}
|
|
2048
|
-
|
|
2049
|
-
.desktop #facets-scroll-sentinel {
|
|
2050
|
-
width: 1px;
|
|
2051
|
-
height: 1px;
|
|
2052
|
-
background: transparent;
|
|
2053
|
-
}
|
|
2054
|
-
|
|
2055
|
-
#facets-header-container {
|
|
2056
|
-
display: flex;
|
|
2057
|
-
justify-content: space-between;
|
|
2058
|
-
align-items: flex-start;
|
|
2059
|
-
clear: both;
|
|
2060
|
-
}
|
|
2061
|
-
|
|
2062
|
-
.desktop #facets-header-container {
|
|
2063
|
-
flex-wrap: wrap;
|
|
2064
|
-
}
|
|
2065
|
-
|
|
2066
|
-
.mobile #left-column {
|
|
2067
|
-
width: 100%;
|
|
2068
|
-
min-width: 0;
|
|
2069
|
-
padding: 0;
|
|
2070
|
-
border: 0;
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.clear-filters-btn-row {
|
|
2074
|
-
display: inline-block;
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
|
-
.desktop .clear-filters-btn-row {
|
|
2078
|
-
width: 100%;
|
|
2079
|
-
}
|
|
2080
|
-
|
|
2081
|
-
.clear-filters-btn {
|
|
2082
|
-
display: inline-block;
|
|
2083
|
-
appearance: none;
|
|
2084
|
-
margin: 0;
|
|
2085
|
-
padding: 0;
|
|
2086
|
-
border: 0;
|
|
2087
|
-
background: none;
|
|
2088
|
-
color: var(--ia-theme-link-color);
|
|
2089
|
-
font-size: 1.4rem;
|
|
2090
|
-
font-family: inherit;
|
|
2091
|
-
cursor: pointer;
|
|
2092
|
-
}
|
|
2093
|
-
|
|
2094
|
-
.clear-filters-btn:hover {
|
|
2095
|
-
text-decoration: underline;
|
|
2096
|
-
}
|
|
2097
|
-
|
|
2098
|
-
.clear-filters-btn-separator {
|
|
2099
|
-
display: inline-block;
|
|
2100
|
-
margin-left: 5px;
|
|
2101
|
-
border-left: 1px solid #2c2c2c;
|
|
2102
|
-
font-size: 1.4rem;
|
|
2103
|
-
line-height: 1.3rem;
|
|
2104
|
-
}
|
|
2105
|
-
|
|
2106
|
-
#facets-container {
|
|
2107
|
-
position: relative;
|
|
2108
|
-
max-height: 0;
|
|
2109
|
-
transition: max-height 0.2s ease-in-out;
|
|
2110
|
-
z-index: 1;
|
|
2111
|
-
margin-top: 5rem;
|
|
2112
|
-
padding-bottom: 2rem;
|
|
2113
|
-
}
|
|
2114
|
-
|
|
2115
|
-
.desktop #facets-container {
|
|
2116
|
-
width: 18rem;
|
|
2117
|
-
}
|
|
2118
|
-
|
|
2119
|
-
.mobile #facets-container {
|
|
2120
|
-
overflow: hidden;
|
|
2121
|
-
padding-bottom: 0;
|
|
2122
|
-
padding-left: 10px;
|
|
2123
|
-
padding-right: 10px;
|
|
2124
|
-
}
|
|
2125
|
-
|
|
2126
|
-
#facets-container.expanded {
|
|
2127
|
-
max-height: 2000px;
|
|
2128
|
-
}
|
|
2129
|
-
|
|
2130
|
-
.results-section-heading {
|
|
2131
|
-
margin: 0.5rem 0.3rem;
|
|
2132
|
-
font-size: 2rem;
|
|
2133
|
-
line-height: 25px;
|
|
2134
|
-
}
|
|
2135
|
-
|
|
2136
|
-
#results-total {
|
|
2137
|
-
display: flex;
|
|
2138
|
-
align-items: baseline;
|
|
2139
|
-
}
|
|
2140
|
-
|
|
2141
|
-
.mobile #results-total {
|
|
2142
|
-
float: right;
|
|
2143
|
-
margin-bottom: 0;
|
|
2144
|
-
margin-right: 5px;
|
|
2145
|
-
}
|
|
2146
|
-
|
|
2147
|
-
#big-results-count {
|
|
2148
|
-
font-size: 2.4rem;
|
|
2149
|
-
font-weight: 500;
|
|
2150
|
-
margin-right: 5px;
|
|
2151
|
-
}
|
|
2152
|
-
|
|
2153
|
-
.mobile #big-results-count {
|
|
2154
|
-
font-size: 2rem;
|
|
2155
|
-
}
|
|
2156
|
-
|
|
2157
|
-
#big-results-label {
|
|
2158
|
-
font-size: 1.4rem;
|
|
2159
|
-
font-weight: 200;
|
|
2160
|
-
}
|
|
2161
|
-
|
|
2162
|
-
#list-header {
|
|
2163
|
-
max-height: 4.2rem;
|
|
2164
|
-
}
|
|
2165
|
-
|
|
2166
|
-
.loading-cover {
|
|
2167
|
-
position: absolute;
|
|
2168
|
-
top: 0;
|
|
2169
|
-
left: 0;
|
|
2170
|
-
width: 100%;
|
|
2171
|
-
height: 100%;
|
|
2172
|
-
display: flex;
|
|
2173
|
-
justify-content: center;
|
|
2174
|
-
z-index: 1;
|
|
2175
|
-
padding-top: 50px;
|
|
2176
|
-
}
|
|
2177
|
-
|
|
2178
|
-
#tile-blur-label {
|
|
2179
|
-
display: flex;
|
|
2180
|
-
align-items: center;
|
|
2181
|
-
column-gap: 5px;
|
|
2182
|
-
}
|
|
2183
|
-
|
|
2184
|
-
#tile-blur-check {
|
|
2185
|
-
margin: 0 5px 0 0;
|
|
2186
|
-
}
|
|
2187
|
-
|
|
2188
|
-
circular-activity-indicator {
|
|
2189
|
-
width: 30px;
|
|
2190
|
-
height: 30px;
|
|
2191
|
-
}
|
|
2192
|
-
|
|
2193
|
-
sort-filter-bar {
|
|
2194
|
-
display: block;
|
|
2195
|
-
margin-bottom: 4rem;
|
|
2196
|
-
}
|
|
2197
|
-
|
|
2198
|
-
infinite-scroller {
|
|
2199
|
-
display: block;
|
|
2200
|
-
--infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
|
|
2201
|
-
--infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
|
|
2202
|
-
}
|
|
2203
|
-
|
|
2204
|
-
infinite-scroller.list-compact {
|
|
2205
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2206
|
-
--collectionBrowserCellMinWidth,
|
|
2207
|
-
100%
|
|
2208
|
-
);
|
|
2209
|
-
--infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
|
|
2210
|
-
--infiniteScrollerCellMaxHeight: 56px;
|
|
2211
|
-
--infiniteScrollerRowGap: 10px;
|
|
2212
|
-
}
|
|
2213
|
-
|
|
2214
|
-
infinite-scroller.list-detail {
|
|
2215
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2216
|
-
--collectionBrowserCellMinWidth,
|
|
2217
|
-
100%
|
|
2218
|
-
);
|
|
2219
|
-
--infiniteScrollerCellMinHeight: var(
|
|
2220
|
-
--collectionBrowserCellMinHeight,
|
|
2221
|
-
5rem
|
|
2222
|
-
);
|
|
2223
|
-
/*
|
|
2224
|
-
30px in spec, compensating for a -4px margin
|
|
2225
|
-
to align title with top of item image
|
|
2226
|
-
src/tiles/list/tile-list.ts
|
|
2227
|
-
*/
|
|
2228
|
-
--infiniteScrollerRowGap: 34px;
|
|
2229
|
-
}
|
|
2230
|
-
|
|
2231
|
-
.mobile infinite-scroller.list-detail {
|
|
2232
|
-
--infiniteScrollerRowGap: 24px;
|
|
2233
|
-
}
|
|
2234
|
-
|
|
2235
|
-
infinite-scroller.grid {
|
|
2236
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2237
|
-
--collectionBrowserCellMinWidth,
|
|
2238
|
-
17rem
|
|
2239
|
-
);
|
|
2240
|
-
--infiniteScrollerCellMaxWidth: var(
|
|
2241
|
-
--collectionBrowserCellMaxWidth,
|
|
2242
|
-
1fr
|
|
2243
|
-
);
|
|
2244
|
-
}
|
|
2245
|
-
|
|
2246
|
-
/* Allow tiles to shrink a bit further at smaller viewport widths */
|
|
2247
|
-
@media screen and (max-width: 880px) {
|
|
2248
|
-
infinite-scroller.grid {
|
|
2249
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2250
|
-
--collectionBrowserCellMinWidth,
|
|
2251
|
-
15rem
|
|
2252
|
-
);
|
|
2253
|
-
}
|
|
2254
|
-
}
|
|
2255
|
-
/* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
|
|
2256
|
-
@media screen and (max-width: 360px) {
|
|
2257
|
-
infinite-scroller.grid {
|
|
2258
|
-
--infiniteScrollerCellMinWidth: var(
|
|
2259
|
-
--collectionBrowserCellMinWidth,
|
|
2260
|
-
12rem
|
|
2261
|
-
);
|
|
2262
|
-
}
|
|
2263
|
-
}
|
|
2264
|
-
|
|
2265
|
-
infinite-scroller.hidden {
|
|
2266
|
-
display: none;
|
|
2267
|
-
}
|
|
1837
|
+
css `
|
|
1838
|
+
:host {
|
|
1839
|
+
display: block;
|
|
1840
|
+
--leftColumnWidth: 18rem;
|
|
1841
|
+
--leftColumnPaddingTop: 2rem;
|
|
1842
|
+
--leftColumnPaddingRight: 2.5rem;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
#facet-top-view {
|
|
1846
|
+
display: flex;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
/**
|
|
1850
|
+
* When page width resizes from desktop to mobile, use this class to
|
|
1851
|
+
* disable expand/collapse transition when loading.
|
|
1852
|
+
*/
|
|
1853
|
+
.preload * {
|
|
1854
|
+
transition: none !important;
|
|
1855
|
+
-webkit-transition: none !important;
|
|
1856
|
+
-moz-transition: none !important;
|
|
1857
|
+
-ms-transition: none !important;
|
|
1858
|
+
-o-transition: none !important;
|
|
1859
|
+
}
|
|
1860
|
+
|
|
1861
|
+
#content-container {
|
|
1862
|
+
display: flex;
|
|
1863
|
+
}
|
|
1864
|
+
|
|
1865
|
+
empty-placeholder {
|
|
1866
|
+
margin-top: var(--placeholderMarginTop, 0);
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
.collapser-icon {
|
|
1870
|
+
display: inline-block;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
.collapser-icon svg {
|
|
1874
|
+
display: inline-block;
|
|
1875
|
+
width: 12px;
|
|
1876
|
+
height: 12px;
|
|
1877
|
+
transition: transform 0.2s ease-out;
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
#mobile-filter-collapse {
|
|
1881
|
+
width: 100%;
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1884
|
+
#mobile-filter-collapse > summary {
|
|
1885
|
+
cursor: pointer;
|
|
1886
|
+
list-style: none;
|
|
1887
|
+
}
|
|
1888
|
+
|
|
1889
|
+
#mobile-filter-collapse[open] > summary {
|
|
1890
|
+
margin-bottom: 10px;
|
|
1891
|
+
}
|
|
1892
|
+
|
|
1893
|
+
#mobile-filter-collapse h2 {
|
|
1894
|
+
display: inline-block;
|
|
1895
|
+
margin: 0;
|
|
1896
|
+
font-size: 2rem;
|
|
1897
|
+
}
|
|
1898
|
+
|
|
1899
|
+
#mobile-filter-collapse[open] svg {
|
|
1900
|
+
transform: rotate(90deg);
|
|
1901
|
+
}
|
|
1902
|
+
|
|
1903
|
+
#content-container.mobile {
|
|
1904
|
+
display: block;
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
#right-column {
|
|
1908
|
+
flex: 1;
|
|
1909
|
+
position: relative;
|
|
1910
|
+
min-height: 90vh;
|
|
1911
|
+
border-right: 1px solid rgb(232, 232, 232);
|
|
1912
|
+
margin-top: var(--rightColumnMarginTop, 0);
|
|
1913
|
+
padding-top: 2rem;
|
|
1914
|
+
background: #fff;
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
#left-column:not([hidden]) + #right-column {
|
|
1918
|
+
border-left: 1px solid rgb(232, 232, 232);
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
#right-column.smart-results-spacing {
|
|
1922
|
+
padding-top: 0.5rem;
|
|
1923
|
+
border-right: none;
|
|
1924
|
+
background: transparent;
|
|
1925
|
+
min-width: 0;
|
|
1926
|
+
}
|
|
1927
|
+
|
|
1928
|
+
#results {
|
|
1929
|
+
background: #fff;
|
|
1930
|
+
padding-left: 1rem;
|
|
1931
|
+
padding-right: 1rem;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
#right-column.smart-results-spacing #results {
|
|
1935
|
+
border-radius: 10px 10px 0px 0px;
|
|
1936
|
+
padding-top: 0.5rem;
|
|
1937
|
+
margin-top: 1rem;
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
.mobile #right-column {
|
|
1941
|
+
border-left: none;
|
|
1942
|
+
}
|
|
1943
|
+
|
|
1944
|
+
.mobile #results {
|
|
1945
|
+
padding: 5px 5px 0;
|
|
1946
|
+
}
|
|
1947
|
+
|
|
1948
|
+
#left-column {
|
|
1949
|
+
width: var(--leftColumnWidth, 18rem);
|
|
1950
|
+
/* Prevents Safari from shrinking col at first draw */
|
|
1951
|
+
min-width: var(--leftColumnWidth, 18rem);
|
|
1952
|
+
padding-top: var(--leftColumnPaddingTop, 2rem);
|
|
1953
|
+
/* Reduced padding by 0.2rem to add the invisible border in the rule below */
|
|
1954
|
+
padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
|
|
1955
|
+
border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
|
|
1956
|
+
z-index: 1;
|
|
1957
|
+
}
|
|
1958
|
+
|
|
1959
|
+
.desktop #left-column {
|
|
1960
|
+
top: 0;
|
|
1961
|
+
position: sticky;
|
|
1962
|
+
height: calc(100vh - 2rem);
|
|
1963
|
+
max-height: calc(100vh - 2rem);
|
|
1964
|
+
overflow-x: hidden;
|
|
1965
|
+
overflow-y: scroll;
|
|
1966
|
+
|
|
1967
|
+
/*
|
|
1968
|
+
* Firefox doesn't support any of the -webkit-scrollbar stuff below, but
|
|
1969
|
+
* does at least give us a tiny bit of control over width & color.
|
|
1970
|
+
*/
|
|
1971
|
+
scrollbar-width: thin;
|
|
1972
|
+
scrollbar-color: transparent transparent;
|
|
1973
|
+
}
|
|
1974
|
+
.desktop #left-column:hover {
|
|
1975
|
+
scrollbar-color: auto;
|
|
1976
|
+
}
|
|
1977
|
+
.desktop #left-column::-webkit-scrollbar {
|
|
1978
|
+
appearance: none;
|
|
1979
|
+
width: 6px;
|
|
1980
|
+
}
|
|
1981
|
+
.desktop #left-column::-webkit-scrollbar-button {
|
|
1982
|
+
height: 3px;
|
|
1983
|
+
background: transparent;
|
|
1984
|
+
}
|
|
1985
|
+
.desktop #left-column::-webkit-scrollbar-corner {
|
|
1986
|
+
background: transparent;
|
|
1987
|
+
}
|
|
1988
|
+
.desktop #left-column::-webkit-scrollbar-thumb {
|
|
1989
|
+
border-radius: 4px;
|
|
1990
|
+
}
|
|
1991
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb {
|
|
1992
|
+
background: rgba(0, 0, 0, 0.15);
|
|
1993
|
+
}
|
|
1994
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
|
|
1995
|
+
background: rgba(0, 0, 0, 0.2);
|
|
1996
|
+
}
|
|
1997
|
+
.desktop #left-column:hover::-webkit-scrollbar-thumb:active {
|
|
1998
|
+
background: rgba(0, 0, 0, 0.3);
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
#facets-bottom-fade {
|
|
2002
|
+
background: linear-gradient(
|
|
2003
|
+
to bottom,
|
|
2004
|
+
#f5f5f700 0%,
|
|
2005
|
+
#f5f5f7c0 50%,
|
|
2006
|
+
#f5f5f7 80%,
|
|
2007
|
+
#f5f5f7 100%
|
|
2008
|
+
);
|
|
2009
|
+
position: fixed;
|
|
2010
|
+
bottom: 0;
|
|
2011
|
+
height: 50px;
|
|
2012
|
+
/* Wide enough to cover the content, but leave the scrollbar uncovered */
|
|
2013
|
+
width: calc(
|
|
2014
|
+
var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
|
|
2015
|
+
);
|
|
2016
|
+
z-index: 2;
|
|
2017
|
+
pointer-events: none;
|
|
2018
|
+
transition: height 0.1s ease;
|
|
2019
|
+
}
|
|
2020
|
+
#facets-bottom-fade.hidden {
|
|
2021
|
+
height: 0;
|
|
2022
|
+
}
|
|
2023
|
+
|
|
2024
|
+
.facets-message {
|
|
2025
|
+
font-size: 1.4rem;
|
|
2026
|
+
}
|
|
2027
|
+
|
|
2028
|
+
.desktop-facets-dropdown > summary {
|
|
2029
|
+
cursor: pointer;
|
|
2030
|
+
list-style: none;
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
.desktop-facets-dropdown h2 {
|
|
2034
|
+
display: inline-block;
|
|
2035
|
+
margin: 0;
|
|
2036
|
+
font-size: 1.6rem;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
.desktop-facets-dropdown[open] > summary {
|
|
2040
|
+
margin-bottom: 10px;
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
.desktop-facets-dropdown[open] svg {
|
|
2044
|
+
transform: rotate(90deg);
|
|
2045
|
+
}
|
|
2046
|
+
|
|
2047
|
+
.desktop #left-column-scroll-sentinel {
|
|
2048
|
+
width: 1px;
|
|
2049
|
+
height: 100vh;
|
|
2050
|
+
background: transparent;
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2053
|
+
.desktop #facets-scroll-sentinel {
|
|
2054
|
+
width: 1px;
|
|
2055
|
+
height: 1px;
|
|
2056
|
+
background: transparent;
|
|
2057
|
+
}
|
|
2058
|
+
|
|
2059
|
+
#facets-header-container {
|
|
2060
|
+
display: flex;
|
|
2061
|
+
justify-content: space-between;
|
|
2062
|
+
align-items: flex-start;
|
|
2063
|
+
clear: both;
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.desktop #facets-header-container {
|
|
2067
|
+
flex-wrap: wrap;
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
.mobile #left-column {
|
|
2071
|
+
width: 100%;
|
|
2072
|
+
min-width: 0;
|
|
2073
|
+
padding: 0;
|
|
2074
|
+
border: 0;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
.clear-filters-btn-row {
|
|
2078
|
+
display: inline-block;
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
.desktop .clear-filters-btn-row {
|
|
2082
|
+
width: 100%;
|
|
2083
|
+
}
|
|
2084
|
+
|
|
2085
|
+
.clear-filters-btn {
|
|
2086
|
+
display: inline-block;
|
|
2087
|
+
appearance: none;
|
|
2088
|
+
margin: 0;
|
|
2089
|
+
padding: 0;
|
|
2090
|
+
border: 0;
|
|
2091
|
+
background: none;
|
|
2092
|
+
color: var(--ia-theme-link-color);
|
|
2093
|
+
font-size: 1.4rem;
|
|
2094
|
+
font-family: inherit;
|
|
2095
|
+
cursor: pointer;
|
|
2096
|
+
}
|
|
2097
|
+
|
|
2098
|
+
.clear-filters-btn:hover {
|
|
2099
|
+
text-decoration: underline;
|
|
2100
|
+
}
|
|
2101
|
+
|
|
2102
|
+
.clear-filters-btn-separator {
|
|
2103
|
+
display: inline-block;
|
|
2104
|
+
margin-left: 5px;
|
|
2105
|
+
border-left: 1px solid #2c2c2c;
|
|
2106
|
+
font-size: 1.4rem;
|
|
2107
|
+
line-height: 1.3rem;
|
|
2108
|
+
}
|
|
2109
|
+
|
|
2110
|
+
#facets-container {
|
|
2111
|
+
position: relative;
|
|
2112
|
+
max-height: 0;
|
|
2113
|
+
transition: max-height 0.2s ease-in-out;
|
|
2114
|
+
z-index: 1;
|
|
2115
|
+
margin-top: 5rem;
|
|
2116
|
+
padding-bottom: 2rem;
|
|
2117
|
+
}
|
|
2118
|
+
|
|
2119
|
+
.desktop #facets-container {
|
|
2120
|
+
width: 18rem;
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2123
|
+
.mobile #facets-container {
|
|
2124
|
+
overflow: hidden;
|
|
2125
|
+
padding-bottom: 0;
|
|
2126
|
+
padding-left: 10px;
|
|
2127
|
+
padding-right: 10px;
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
#facets-container.expanded {
|
|
2131
|
+
max-height: 2000px;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
.results-section-heading {
|
|
2135
|
+
margin: 0.5rem 0.3rem;
|
|
2136
|
+
font-size: 2rem;
|
|
2137
|
+
line-height: 25px;
|
|
2138
|
+
}
|
|
2139
|
+
|
|
2140
|
+
#results-total {
|
|
2141
|
+
display: flex;
|
|
2142
|
+
align-items: baseline;
|
|
2143
|
+
}
|
|
2144
|
+
|
|
2145
|
+
.mobile #results-total {
|
|
2146
|
+
float: right;
|
|
2147
|
+
margin-bottom: 0;
|
|
2148
|
+
margin-right: 5px;
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
#big-results-count {
|
|
2152
|
+
font-size: 2.4rem;
|
|
2153
|
+
font-weight: 500;
|
|
2154
|
+
margin-right: 5px;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
.mobile #big-results-count {
|
|
2158
|
+
font-size: 2rem;
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
#big-results-label {
|
|
2162
|
+
font-size: 1.4rem;
|
|
2163
|
+
font-weight: 200;
|
|
2164
|
+
}
|
|
2165
|
+
|
|
2166
|
+
#list-header {
|
|
2167
|
+
max-height: 4.2rem;
|
|
2168
|
+
}
|
|
2169
|
+
|
|
2170
|
+
.loading-cover {
|
|
2171
|
+
position: absolute;
|
|
2172
|
+
top: 0;
|
|
2173
|
+
left: 0;
|
|
2174
|
+
width: 100%;
|
|
2175
|
+
height: 100%;
|
|
2176
|
+
display: flex;
|
|
2177
|
+
justify-content: center;
|
|
2178
|
+
z-index: 1;
|
|
2179
|
+
padding-top: 50px;
|
|
2180
|
+
}
|
|
2181
|
+
|
|
2182
|
+
#tile-blur-label {
|
|
2183
|
+
display: flex;
|
|
2184
|
+
align-items: center;
|
|
2185
|
+
column-gap: 5px;
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
#tile-blur-check {
|
|
2189
|
+
margin: 0 5px 0 0;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
circular-activity-indicator {
|
|
2193
|
+
width: 30px;
|
|
2194
|
+
height: 30px;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
sort-filter-bar {
|
|
2198
|
+
display: block;
|
|
2199
|
+
margin-bottom: 4rem;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
infinite-scroller {
|
|
2203
|
+
display: block;
|
|
2204
|
+
--infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
|
|
2205
|
+
--infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
|
|
2206
|
+
}
|
|
2207
|
+
|
|
2208
|
+
infinite-scroller.list-compact {
|
|
2209
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2210
|
+
--collectionBrowserCellMinWidth,
|
|
2211
|
+
100%
|
|
2212
|
+
);
|
|
2213
|
+
--infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
|
|
2214
|
+
--infiniteScrollerCellMaxHeight: 56px;
|
|
2215
|
+
--infiniteScrollerRowGap: 10px;
|
|
2216
|
+
}
|
|
2217
|
+
|
|
2218
|
+
infinite-scroller.list-detail {
|
|
2219
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2220
|
+
--collectionBrowserCellMinWidth,
|
|
2221
|
+
100%
|
|
2222
|
+
);
|
|
2223
|
+
--infiniteScrollerCellMinHeight: var(
|
|
2224
|
+
--collectionBrowserCellMinHeight,
|
|
2225
|
+
5rem
|
|
2226
|
+
);
|
|
2227
|
+
/*
|
|
2228
|
+
30px in spec, compensating for a -4px margin
|
|
2229
|
+
to align title with top of item image
|
|
2230
|
+
src/tiles/list/tile-list.ts
|
|
2231
|
+
*/
|
|
2232
|
+
--infiniteScrollerRowGap: 34px;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
.mobile infinite-scroller.list-detail {
|
|
2236
|
+
--infiniteScrollerRowGap: 24px;
|
|
2237
|
+
}
|
|
2238
|
+
|
|
2239
|
+
infinite-scroller.grid {
|
|
2240
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2241
|
+
--collectionBrowserCellMinWidth,
|
|
2242
|
+
17rem
|
|
2243
|
+
);
|
|
2244
|
+
--infiniteScrollerCellMaxWidth: var(
|
|
2245
|
+
--collectionBrowserCellMaxWidth,
|
|
2246
|
+
1fr
|
|
2247
|
+
);
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
/* Allow tiles to shrink a bit further at smaller viewport widths */
|
|
2251
|
+
@media screen and (max-width: 880px) {
|
|
2252
|
+
infinite-scroller.grid {
|
|
2253
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2254
|
+
--collectionBrowserCellMinWidth,
|
|
2255
|
+
15rem
|
|
2256
|
+
);
|
|
2257
|
+
}
|
|
2258
|
+
}
|
|
2259
|
+
/* At very small widths, maintain a 2-tile layout as far as it can reasonably go */
|
|
2260
|
+
@media screen and (max-width: 360px) {
|
|
2261
|
+
infinite-scroller.grid {
|
|
2262
|
+
--infiniteScrollerCellMinWidth: var(
|
|
2263
|
+
--collectionBrowserCellMinWidth,
|
|
2264
|
+
12rem
|
|
2265
|
+
);
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
|
|
2269
|
+
infinite-scroller.hidden {
|
|
2270
|
+
display: none;
|
|
2271
|
+
}
|
|
2268
2272
|
`,
|
|
2269
2273
|
];
|
|
2270
2274
|
}
|
|
@@ -2338,6 +2342,9 @@ __decorate([
|
|
|
2338
2342
|
__decorate([
|
|
2339
2343
|
property({ type: Boolean })
|
|
2340
2344
|
], CollectionBrowser.prototype, "showSmartFacetBar", void 0);
|
|
2345
|
+
__decorate([
|
|
2346
|
+
property({ type: String })
|
|
2347
|
+
], CollectionBrowser.prototype, "smartFacetBarLabel", void 0);
|
|
2341
2348
|
__decorate([
|
|
2342
2349
|
property({ type: Boolean })
|
|
2343
2350
|
], CollectionBrowser.prototype, "showHistogramDatePicker", void 0);
|