journal-issue-search-result-grid-element.component.html

<ds-truncatable [id]="dso.id">
    <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
        <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
            <div>
                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail() | async">
                </ds-grid-thumbnail>
            </div>
        </a>
        <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
            <div>
                <ds-grid-thumbnail [thumbnail]="dso.getThumbnail() | async">
                </ds-grid-thumbnail>
            </div>
        </span>
        <div class="card-body">
            <ds-item-type-badge [object]="dso"></ds-item-type-badge>
            <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
                <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
            </ds-truncatable-part>
            <p *ngIf="dso.hasMetadata('creativework.datePublished')" class="item-date card-text text-muted">
                <ds-truncatable-part [id]="dso.id" [minLines]="1">
                    <span [innerHTML]="firstMetadataValue('creativework.datePublished')"></span>
                </ds-truncatable-part>
            </p>
            <p *ngIf="dso.hasMetadata('journal.title')" class="item-journal-title card-text">
                <ds-truncatable-part [id]="dso.id" [minLines]="3">
                    <span [innerHTML]="firstMetadataValue('journal.title')"></span>
                </ds-truncatable-part>
            </p>
            <div *ngIf="linkType != linkTypes.None" class="text-center">
                <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/items/' + dso.id]"
                   class="lead btn btn-primary viewButton">View</a>
            </div>
        </div>
    </div>
</ds-truncatable>