Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

document: display cover thumbnail #438

Merged
merged 1 commit into from
Dec 4, 2020
Merged

document: display cover thumbnail #438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 41 additions & 38 deletions .../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
View file
Open in desktop
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
Open in desktop
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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the class parameter to be more flexible. The CSS definition stays in the main application.

</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