<div class="col-lg-12 card tight-card mb-2 bg-light">
<div class="card-body">
<div class="row">
- <div class="col-lg-1">
- <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
+ <div class="col-lg-2 d-flex">
+ <div class="checkbox">
+ <span class="font-weight-bold font-italic">
+ {{index + 1 + searchContext.pager.offset}}.
+ </span>
+ <input type='checkbox'/>
+ </div>
+ <div class="pl-2">
+ <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
<img style="height:80px"
src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
- </a>
+ </a>
+ </div>
</div>
- <div class="col-lg-5">
+ <div class="col-lg-4">
<div class="row">
<div class="col-lg-12 font-weight-bold">
<!-- nbsp allows the column to take shape when no value exists -->
- <span class="font-weight-light font-italic">
- #{{index + 1 + searchContext.pager.offset}}
- </span>
<a href="javascript:void(0)"
(click)="navigatToRecord(summary.id)">
{{summary.display.title || ' '}}
<span i18n>Place Hold</span>
</button>
</span>
+ <!--
<span class="pl-1">
<button
(click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
<span i18n>Add to List</span>
</button>
</span>
+ -->
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-9">
<div class="float-right">
- <eg-catalog-result-pagination></eg-catalog-result-pagination>
+ <eg-catalog-result-pagination></eg-catalog-result-pagination>
</div>
</div>
</div>
- <div class="row mt-2">
- <div class="col-lg-2">
- <eg-catalog-result-facets></eg-catalog-result-facets>
- </div>
- <div class="col-lg-10">
- <div *ngIf="searchContext.result">
- <div *ngFor="let summary of searchContext.result.records; let idx = index">
- <div *ngIf="summary">
- <eg-catalog-result-record [summary]="summary" [index]="idx">
- </eg-catalog-result-record>
+ <div>
+ <div class="row mt-2">
+ <div class="col-lg-2">
+ <eg-catalog-result-facets></eg-catalog-result-facets>
+ </div>
+ <div class="col-lg-10">
+ <div *ngIf="shouldStartRendering()">
+ <div *ngFor="let summary of searchContext.result.records; let idx = index">
+ <div *ngIf="summary">
+ <eg-catalog-result-record [summary]="summary" [index]="idx">
+ </eg-catalog-result-record>
+ </div>
</div>
- </div>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
}
}
+ // Avoid starting to display records until the first few are ready
+ // to reduce page shuffling.
+ shouldStartRendering(): boolean {
+ return (
+ this.searchContext.result &&
+ this.searchContext.result.records && (
+ this.searchContext.result.records.length === 0 ||
+ this.searchContext.result.records[0]
+ )
+ );
+ }
+
fleshSearchResults(): void {
const records = this.searchContext.result.records;
if (!records || records.length === 0) { return; }