document: display cover thumbnail

* 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>
rero · Jan 27, 2021 · d9c3bf6 · d9c3bf6
1 parent 38de94b
commit d9c3bf6
Show file tree

Hide file tree

Showing 13 changed files with 381 additions and 294 deletions.
diff --git a/.../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html b/.../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
@@ -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>
diff --git a/...admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html b/...admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
@@ -31,75 +31,73 @@
 </div>
 <ng-container *ngIf="record">
   <!-- HEADER -->
-  <header class="col-10 mt-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>
-  <div class="col-12 mt-3 mb-3">
-    <!-- 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>
+  <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>
+
+        <!-- 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 | callbackArrayFilter: filterPublicationProvisionActivity">
       <ul class="list-unstyled mb-0">
         <li *ngFor="let value of provision.value; let i = index"
-            [attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}"
-        >
+            [attr.id]="i | idAttribute:{prefix: 'doc-publication-statement'}">
           {{ value }}
         </li>
       </ul>
     </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>
+        <!-- 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>
 
     <!-- IS PART OF -->
     <ng-container *ngFor="let document of record.metadata.partOf; let i = index">
@@ -144,17 +142,19 @@ <h3 id="{{'doc-altgr-title-' + i}}">{{ altgr_title }}</h3>
       </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>
-  </div>
+  </header>
 
   <!-- END OF HEADER ---------------------------------------------------------->
   <!-- TABS ------------------------------------------------------------------->

diff --git a/projects/public-search/src/app/document-brief/document-brief.component.html b/projects/public-search/src/app/document-brief/document-brief.component.html
@@ -16,62 +16,55 @@
 -->
 
 <article *ngIf="record" class="card flex-row border-0">
-    <div class="align-self-start d-flex justify-content-center">
-      <figure class="mb-0 thumb-brief">
-        <ng-container *ngIf="record.metadata.cover_art; else noLink">
-          <a href="coverUrl"><img class="img-responsive border border-light " [src]="coverUrl"></a>
-        </ng-container>
-        <ng-template #noLink>
-          <img class="img-responsive border border-light" [src]="coverUrl">
-        </ng-template>
-        <figcaption class="text-center">{{ record.metadata.type | translate }}</figcaption>
-      </figure>
-    </div>
-    <div class="card-body w-100 py-0">
-      <h4 class="card-title mb-1">
-        <a name="document-title" target="_self" [href]="detailUrl.link">{{ record.metadata.ui_title_text }}</a>
-      </h4>
-      <article 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; else contribLink">
-              {{ contribution | contributionFormat }}
-            </span>
-            <ng-template #contribLink>
-            <a
-              *ngIf="contribution.agent.pid"
-              href="/{{ viewcode }}/{{ contribution.agent.type | contributionType }}/{{ contribution.agent.pid }}"
-            >
-              {{ contribution | contributionFormat }}
-            </a>
-            </ng-template>
-            {{ last ? '' : '; ' }}
-            {{ last && record.metadata.contribution.length > 3 ? '; …' : '' }}
-          </li>
-        </ul>
+  <shared-thumbnail
+    [record]="record"
+    (isSmall)="true">
+  </shared-thumbnail>
+  <div class="card-body w-100 py-0">
+    <h4 class="card-title mb-1">
+      <a name="document-title" target="_self" [href]="detailUrl.link">{{ record.metadata.ui_title_text }}</a>
+    </h4>
+    <article 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; else contribLink">
+            {{ contribution | contributionFormat }}
+          </span>
+          <ng-template #contribLink>
+          <a
+            *ngIf="contribution.agent.pid"
+            href="/{{ viewcode }}/{{ contribution.agent.type | contributionType }}/{{ contribution.agent.pid }}"
+          >
+            {{ contribution | contributionFormat }}
+          </a>
+          </ng-template>
+          {{ 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>
+      <!-- provision activity publications -->
+      <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
+        <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
+      </ul>
 
-        <div *ngIf="record.metadata.type !== 'ebook'">
-          <i class="fa fa-circle text-{{ record.metadata.available ? 'success' : 'danger' }}" aria-hidden="true"></i>&nbsp;
-          <span translate *ngIf="record.metadata.available">available</span>
-          <span translate *ngIf="!record.metadata.available">not available</span>
-        </div>
-        <div *ngIf="record.explanation">
-          <a class="badge badge-info collapsed"
-              data-toggle="collapse" href="#{{'score'+record.metadata.pid }}"
-              aria-expanded="false">
-              score: {{ record.explanation.value }}
-          </a>
-          <pre class="collapse border border-secondary mt-1" id="{{'score'+record.metadata.pid }}">{{record.explanation|json}}</pre>
-        </div>
-      </article>
-    </div>
+      <div *ngIf="record.metadata.type !== 'ebook'">
+        <i class="fa fa-circle text-{{ record.metadata.available ? 'success' : 'danger' }}" aria-hidden="true"></i>&nbsp;
+        <span translate *ngIf="record.metadata.available">available</span>
+        <span translate *ngIf="!record.metadata.available">not available</span>
+      </div>
+      <div *ngIf="record.explanation">
+        <a class="badge badge-info collapsed"
+            data-toggle="collapse" href="#{{'score'+record.metadata.pid }}"
+            aria-expanded="false">
+            score: {{ record.explanation.value }}
+        </a>
+        <pre class="collapse border border-secondary mt-1" id="{{'score'+record.metadata.pid }}">{{record.explanation|json}}</pre>
+      </div>
+    </article>
+  </div>
 </article>
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.scss b/projects/public-search/src/app/document-brief/document-brief.component.scss
@@ -17,19 +17,6 @@
 
  */
 
- .thumb-brief
-  img {
-    max-height: 122px;
-    width: 80px;
-  }
-
-@media (max-width: 960px) {
-  .thumb-brief
-    img {
-      max-width: 48px;
-    }
-  }
-
 pre {
   white-space: pre-wrap;
   max-height: 300px;