search: fix document brief view

Fixes the document brief view for small screen. On small screen the thumbnail is displayed above the metadata and is not yet maximized to prevent thumbnail pixelisation. Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
rero · Jul 12, 2021 · 5104edc · 5104edc
1 parent edbc98f
commit 5104edc
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 55 deletions.
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
@@ -15,63 +15,52 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<article *ngIf="record" class="card flex-row border-0">
-  <shared-thumbnail
-    class="col-sm-2"
-    [record]="record"
-    isSmall="true">
-  </shared-thumbnail>
-  <div class="card-body w-100 py-0">
-    <h4 class="card-title mb-1">
+<article *ngIf="record" class="row">
+  <shared-thumbnail [record]="record" [isSmall]="true" class="col-sm-12 col-md-4 col-lg-2"></shared-thumbnail>
+  <div class="col-sm-12 col-md-8 col-lg-10">
+    <!-- document title -->
+    <h4 class="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 }}"
-          >
+    <!-- contributions -->
+    <ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">
+      <li *ngFor="let contribution of record.metadata.contribution.slice(0,3); let last = last; let i = index"
+          class="list-inline-item">
+        <ng-container *ngIf="!contribution.agent.pid; else contribLink">
+          {{ contribution | contributionFormat }}
+        </ng-container>
+        <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>
-
-      <!-- explanation -->
-      <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>
-
-      <!-- part of -->
-      <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
-
-      <!-- availability -->
-      <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>
-    </article>
+        </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>
+    <!-- explanation -->
+    <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>
+    <!-- part of -->
+    <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
+    <!-- availability -->
+    <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>
 </article>
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-figure, .thumb-brief img, .thumb-detail img {
+figure, .thumb-detail img {
   width: 100%;
   height: auto;
   max-height: 100%;