Skip to content

Commit

Permalink
document: display cover thumbnail
Browse files Browse the repository at this point in the history 
* Moves thumbnail logic in 'shared' library as it's used in both admin
and public-search projects.
* Adds thumbnails in professional brief and detailed view.
* Moves 'type' field below the thumbnail in admin detailed view.
* Closes rero/rero-ils#1188.

Co-Authored-by: Alicia Zangger <alicia.zangger@rero.ch>
  • Loading branch information
@AoNoOokami
Alicia Zangger authored and AoNoOokami committed Dec 4, 2020
1 parent 1955d44 commit 1a58755
Show file tree
Hide file tree
Showing 13 changed files with 423 additions and 334 deletions.
79 changes: 41 additions & 38 deletions .../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,44 @@
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<ng-container *ngIf="record">
<h5 class="mb-0 card-title">
<a
name="document-title"
[routerLink]="['/records', type === 'import_bnf' ? 'import_bnf': 'documents', 'detail', record.metadata.pid]"
>
<ng-container *ngIf="record.metadata.ui_title_text else mainTitle">
{{ record.metadata.ui_title_text }}
</ng-container>
<ng-template #mainTitle>
{{ record.metadata.title | mainTitle }}
</ng-template>
</a>
<small> &ndash; {{ record.metadata.type | translate }}</small></h5>
<ng-container class="card-text">
<!-- contribution -->
<ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
<li
class="list-inline-item"
*ngFor="let contribution of record.metadata.contribution.slice(0,3); let last = last; let i = index"
>
<span *ngIf="!contribution.agent.pid">
{{ contribution | contributionFormat }}
</span>
<a *ngIf="contribution.agent.pid" [routerLink]="['/records', contributionTypeParam(contribution.agent), 'detail', contribution.agent.pid]">
{{ contribution | contributionFormat }}
</a>
{{ last ? '' : '; ' }}
{{ last && record.metadata.contribution.length > 3 ? '; …' : '' }}
</li>
</ul>

<!-- provision activity publications -->
<ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
<li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
</ul>
</ng-container>
</ng-container>
<article *ngIf="record" class="card flex-row border-0">
<shared-thumbnail
[record]="record"
isSmall=true>
</shared-thumbnail>
<div class="card-body w-100 py-0">
<h5 class="mb-0 card-title">
<a
name="document-title"
[routerLink]="['/records', type === 'import_bnf' ? 'import_bnf': 'documents', 'detail', record.metadata.pid]">
<ng-container *ngIf="record.metadata.ui_title_text else mainTitle">
{{ record.metadata.ui_title_text }}
</ng-container>
<ng-template #mainTitle>
{{ record.metadata.title | mainTitle }}
</ng-template>
</a>
<small> &ndash; {{ record.metadata.type | translate }}</small></h5>
<ng-container class="card-text">
<!-- contribution -->
<ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
<li
class="list-inline-item"
*ngFor="let contribution of record.metadata.contribution.slice(0,3); let last = last; let i = index">
<span *ngIf="!contribution.agent.pid">
{{ contribution | contributionFormat }}
</span>
<a *ngIf="contribution.agent.pid" [routerLink]="['/records', contributionTypeParam(contribution.agent), 'detail', contribution.agent.pid]">
{{ contribution | contributionFormat }}
</a>
{{ last ? '' : '; ' }}
{{ last && record.metadata.contribution.length > 3 ? '; …' : '' }}
</li>
</ul>
<!-- provision activity publications -->
<ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
<li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
</ul>
</ng-container>
</div>
</article>
218 changes: 110 additions & 108 deletions ...admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,122 +26,124 @@
</div>
<ng-container *ngIf="record">
<!-- HEADER -->
<header class="col-10 mt-3 mb-3">
<!-- TYPE -->
<ng-container *ngIf="record.metadata.type">
<span id="doc-type">{{ record.metadata.type | translate | titlecase }}</span>
</ng-container>

<!-- TITLE -->
<h2 id="doc-title" *ngIf="record.metadata.title && record.metadata.title | mainTitle as title" class="pl-0">
<ng-core-text-read-more
[text]="title"
[unit]="'character'"
[limit]="150"
[showMoreLabel]="'Show more' | translate"
[showLessLabel]="'Show less' | translate"
></ng-core-text-read-more>
</h2>
<header class="col-10">
<div class="row mt-3 mb-3">
<div class="col-2">
<shared-thumbnail [record]="record"></shared-thumbnail>
</div>
<div class="col">
<!-- TITLE -->
<h2 id="doc-title" *ngIf="record.metadata.title && record.metadata.title | mainTitle as title" class="pl-0">
<ng-core-text-read-more
[text]="title"
[unit]="'character'"
[limit]="150"
[showMoreLabel]="'Show more' | translate"
[showLessLabel]="'Show less' | translate"
></ng-core-text-read-more>
</h2>

<!-- TITLE ALTERNATIVE GRAPHICS -->
<ng-container *ngIf="record.metadata.ui_title_altgr">
<ng-container *ngFor="let altgr_title of record.metadata.ui_title_altgr; let i = index">
<h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
</ng-container>
</ng-container>
<!-- TITLE ALTERNATIVE GRAPHICS -->
<ng-container *ngIf="record.metadata.ui_title_altgr">
<ng-container *ngFor="let altgr_title of record.metadata.ui_title_altgr; let i = index">
<h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
</ng-container>
</ng-container>

<!-- CONTRIBUTION -->
<ng-container *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
<ul class="list-inline mb-0">
<li
class="list-inline-item"
*ngFor="let contribution of record.metadata.contribution; let last = last; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-contribution'}"
>
<span *ngIf="!contribution.agent.pid" [innerHTML]="contribution | contributionFormat: true"></span>
<a
*ngIf="contribution.agent.pid"
[innerHTML]="contribution | contributionFormat: true"
[routerLink]="['/records', contributionTypeParam(contribution.agent), 'detail', contribution.agent.pid]">
</a>
{{ last ? '' : '; ' }}
</li>
</ul>
</ng-container>
<!-- CONTRIBUTION -->
<ng-container *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
<ul class="list-inline mb-0">
<li
class="list-inline-item"
*ngFor="let contribution of record.metadata.contribution; let last = last; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-contribution'}"
>
<span *ngIf="!contribution.agent.pid" [innerHTML]="contribution | contributionFormat: true"></span>
<a
*ngIf="contribution.agent.pid"
[innerHTML]="contribution | contributionFormat: true"
[routerLink]="['/records', contributionTypeParam(contribution.agent), 'detail', contribution.agent.pid]">
</a>
{{ last ? '' : '; ' }}
</li>
</ul>
</ng-container>

<!-- PUBLICATION STATEMENT -->
<ng-container *ngFor="let provision of provisionActivity | keyvalue">
<ng-container *ngIf="provision.key === 'bf:Publication'">
<ul class="list-unstyled mb-0">
<li *ngFor="let value of provision.value; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}">
{{ value }}
</li>
</ul>
</ng-container>
</ng-container>
<!-- PUBLICATION STATEMENT -->
<ng-container *ngFor="let provision of provisionActivity | keyvalue">
<ng-container *ngIf="provision.key === 'bf:Publication'">
<ul class="list-unstyled mb-0">
<li *ngFor="let value of provision.value; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}">
{{ value }}
</li>
</ul>
</ng-container>
</ng-container>

<!-- EXTENT-->
<ng-container *ngIf="record.metadata.extent">
<div id="doc-extent">{{ record.metadata.extent }}</div>
</ng-container>
<!-- EXTENT-->
<ng-container *ngIf="record.metadata.extent">
<div id="doc-extent">{{ record.metadata.extent }}</div>
</ng-container>

<!-- EDITION STATEMENT -->
<ng-container *ngIf="record.metadata.editionStatement && record.metadata.editionStatement.length > 0">
<ul class="list-unstyled mb-0">
<li *ngFor="let edition of getStatement(record.metadata.editionStatement); let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-edition-statement'}">
{{ edition.value }}
</li>
</ul>
</ng-container>
<!-- EDITION STATEMENT -->
<ng-container *ngIf="record.metadata.editionStatement && record.metadata.editionStatement.length > 0">
<ul class="list-unstyled mb-0">
<li *ngFor="let edition of getStatement(record.metadata.editionStatement); let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-edition-statement'}">
{{ edition.value }}
</li>
</ul>
</ng-container>

<!-- IS PART OF -->
<ng-container *ngFor="let document of record.metadata.partOf; let i = index">
<ng-container *ngIf="document.document.pid | getRecord: 'documents' : 'object' : '': { 'Content-Type': 'application/rero+json' } | async as hostDocument">
<dl class="row mb-0">
<dt id="{{'doc-part-of-label-' + i}}" class="col-auto">
{{ getPartOfLabel(hostDocument) }}
</dt>
<dd class="col mb-0">
<div class="row">
<a id="{{'doc-part-of-' + i}}"[routerLink]="['/records', 'documents', 'detail', document.document.pid]">
{{ getShortMainTitle(hostDocument.metadata.title) }}
</a>
<ng-container *ngIf="document.numbering">
<span>;</span>
<ul class="list-unstyled mb-0 ml-1">
<li *ngFor="let numbering of document.numbering">
<span id="{{'doc-part-of-numbering-' + i}}" *ngIf="formatNumbering(numbering) as num">{{ num }}</span>
</li>
</ul>
</ng-container>
</div>
</dd>
</dl>
</ng-container>
</ng-container>
<!-- IS PART OF -->
<ng-container *ngFor="let document of record.metadata.partOf; let i = index">
<ng-container *ngIf="document.document.pid | getRecord: 'documents' : 'object' : '': { 'Content-Type': 'application/rero+json' } | async as hostDocument">
<dl class="row mb-0">
<dt id="{{'doc-part-of-label-' + i}}" class="col-auto">
{{ getPartOfLabel(hostDocument) }}
</dt>
<dd class="col mb-0">
<div class="row">
<a id="{{'doc-part-of-' + i}}"[routerLink]="['/records', 'documents', 'detail', document.document.pid]">
{{ getShortMainTitle(hostDocument.metadata.title) }}
</a>
<ng-container *ngIf="document.numbering">
<span>;</span>
<ul class="list-unstyled mb-0 ml-1">
<li *ngFor="let numbering of document.numbering">
<span id="{{'doc-part-of-numbering-' + i}}" *ngIf="formatNumbering(numbering) as num">{{ num }}</span>
</li>
</ul>
</ng-container>
</div>
</dd>
</dl>
</ng-container>
</ng-container>

<!-- ABSTRACT -->
<ng-container *ngIf=" record.metadata.abstracts && record.metadata.abstracts.length > 0">
<ul class="list-unstyled mb-0">
<li *ngFor="let abstract of record.metadata.abstracts; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-abstract'}">
<ng-core-text-read-more [text]="abstract" [unit]="'word'" [limit]="100"
[showMoreLabel]="'Show more' | translate" [showLessLabel]="'Show less' | translate">
</ng-core-text-read-more>
</li>
</ul>
</ng-container>
<!-- ABSTRACT -->
<ng-container *ngIf=" record.metadata.abstracts && record.metadata.abstracts.length > 0">
<ul class="list-unstyled mb-0">
<li *ngFor="let abstract of record.metadata.abstracts; let i = index"
[attr.id]="i | idAttribute:{prefix: 'doc-abstract'}">
<ng-core-text-read-more [text]="abstract" [unit]="'word'" [limit]="100"
[showMoreLabel]="'Show more' | translate" [showLessLabel]="'Show less' | translate">
</ng-core-text-read-more>
</li>
</ul>
</ng-container>

<!-- SUBJECTS -->
<div class="row" *ngIf="record.metadata.subjects">
<div class="col">
<span *ngFor="let subject of record.metadata.subjects; let i = index"
class="badge badge-secondary mr-1"
[attr.id]="i | idAttribute:{prefix: 'doc-subject'}">
<i class="fa fa-tag"></i> {{ subject }}
</span>
<!-- SUBJECTS -->
<div class="row" *ngIf="record.metadata.subjects">
<div class="col">
<span *ngFor="let subject of record.metadata.subjects; let i = index"
class="badge badge-secondary mr-1"
[attr.id]="i | idAttribute:{prefix: 'doc-subject'}">
<i class="fa fa-tag"></i> {{ subject }}
</span>
</div>
</div>
</div>
</div>
</header>
Expand Down
Loading

0 comments on commit 1a58755

Please sign in to comment.