Related entity thumbnails.

src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.spec.ts

@@ -48,7 +48,7 @@ describe('BrowseByMetadataPageComponent', () => {
     browseBy: {
       showThumbnails: true
     }
-  }
+  };
 
   const mockEntries = [
     {

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.spec.ts

@@ -62,13 +62,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('JournalIssueSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.spec.ts

@@ -61,13 +61,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('JournalVolumeSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.spec.ts

@@ -57,13 +57,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('JournalSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.spec.ts

@@ -55,13 +55,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('OrgUnitSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.spec.ts

@@ -55,13 +55,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('PersonSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.spec.ts

@@ -56,13 +56,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('ProjectSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.spec.ts

@@ -42,13 +42,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 function init() {
   mockItemWithMetadata = Object.assign(

src/app/item-page/simple/abstract-incremental-list/abstract-incremental-list.component.ts

@@ -10,6 +10,7 @@ import { hasValue, isNotEmpty } from '../../../shared/empty.util';
  * An abstract component for displaying an incremental list of objects
  */
 export class AbstractIncrementalListComponent<T> implements OnInit, OnDestroy {
+
   /**
    * The amount to increment the list by
    * Define this amount in the child component overriding this component
@@ -21,6 +22,11 @@ export class AbstractIncrementalListComponent<T> implements OnInit, OnDestroy {
    */
   objects: T[];
 
+  /**
+   * Placeholder css class (defined in global-styles)
+   */
+  placeholderFontClass: string;
+
   /**
    * A list of open subscriptions
    */

src/app/item-page/simple/related-items/related-items-component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
@@ -7,6 +7,7 @@ import { ViewMode } from '../../../core/shared/view-mode.model';
 import { RelationshipService } from '../../../core/data/relationship.service';
 import { AbstractIncrementalListComponent } from '../abstract-incremental-list/abstract-incremental-list.component';
 import { FindListOptions } from '../../../core/data/find-list-options.model';
+import { setPlaceHolderFontSize } from '../../../shared/utils/object-list-utils';
 
 @Component({
   selector: 'ds-related-items',
@@ -18,6 +19,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
  * It expects a parent item and relationship type, as well as a label to display on top
  */
 export class RelatedItemsComponent extends AbstractIncrementalListComponent<Observable<RemoteData<PaginatedList<Item>>>> {
+
   /**
    * The parent of the list of related items to display
    */
@@ -53,9 +55,14 @@ export class RelatedItemsComponent extends AbstractIncrementalListComponent<Obse
    */
   viewMode = ViewMode.ListElement;
 
-  constructor(public relationshipService: RelationshipService) {
+  constructor(public relationshipService: RelationshipService, protected elementRef: ElementRef) {
     super();
   }
+  ngOnInit(): void {
+    const width = this.elementRef.nativeElement.offsetWidth;
+    this.placeholderFontClass = setPlaceHolderFontSize(width);
+    super.ngOnInit();
+  }
 
   /**
    * Get a specific page

src/app/item-page/simple/related-items/related-items.component.html

@@ -1,4 +1,5 @@
-<ds-metadata-field-wrapper [label]="label">
+<ds-metadata-field-wrapper [label]="label" [ngClass]="placeholderFontClass">
+  <div #relatedItems>
   <ng-container *ngFor="let objectPage of objects; let i = index">
     <ng-container *ngVar="(objectPage | async) as itemsRD">
       <ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
@@ -17,4 +18,5 @@
       </div>
     </ng-container>
   </ng-container>
+  </div>
 </ds-metadata-field-wrapper>

src/app/item-page/simple/related-items/related-items.component.scss

@@ -0,0 +1,6 @@
+
+ds-listable-object-component-loader {
+  margin-bottom: 10px;
+  display: block;
+}
+

src/app/shared/object-collection/object-collection.component.ts

@@ -21,6 +21,7 @@ import { ViewMode } from '../../core/shared/view-mode.model';
 import { CollectionElementLinkType } from './collection-element-link.type';
 import { PaginatedList } from '../../core/data/paginated-list.model';
 import { Context } from '../../core/shared/context.model';
+import { setPlaceHolderFontSize } from '../utils/object-list-utils';
 
 /**
  * Component that can render a list of listable objects in different view modes
@@ -167,7 +168,9 @@ export class ObjectCollectionComponent implements OnInit {
         map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view),
         distinctUntilChanged()
       );
-    this.setPlaceHolderFontSize();
+    const width = this.elementRef.nativeElement.offsetWidth;
+    this.placeholderFontClass = setPlaceHolderFontSize(width);
+
   }
 
   /**
@@ -177,6 +180,8 @@ export class ObjectCollectionComponent implements OnInit {
    *    Route is a singleton service provided by Angular.
    * @param router
    *    Router is a singleton service provided by Angular.
+   * @param elementRef
+   *    Used only to read DOM for the element width
    */
   constructor(
     private cdRef: ChangeDetectorRef,
@@ -236,19 +241,4 @@ export class ObjectCollectionComponent implements OnInit {
       this.next.emit(true);
   }
 
-  /**
-   * Sets the class to be used for the "no thumbnail"
-   * placeholder font size.
-   */
-  setPlaceHolderFontSize() {
-    const width = this.elementRef.nativeElement.offsetWidth;
-    if (width < 750) {
-      this.placeholderFontClass = 'thumb-font-1';
-    } else if (width < 1000) {
-      this.placeholderFontClass = 'thumb-font-2';
-    } else {
-      this.placeholderFontClass = 'thumb-font-3';
-    }
-  }
-
 }

src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.spec.ts

@@ -71,13 +71,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('ItemListPreviewComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -226,6 +226,6 @@ describe('ItemListPreviewComponent', () => {
     it('should add the ds-thumbnail element', () => {
       const thumbnail = fixture.debugElement.query(By.css('ds-thumbnail'));
       expect(thumbnail).toBeFalsy();
-    })
+    });
-  })
+  });
 });

src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.spec.ts

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const rdItem = createSuccessfulRemoteDataObject(item);
 const workflowitem = Object.assign(new WorkflowItem(), { item: observableOf(rdItem) });

src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.spec.ts

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const rd = createSuccessfulRemoteDataObject(item);
 mockResultObject.indexableObject = Object.assign(new WorkflowItem(), { item: observableOf(rd) });
@@ -120,7 +120,6 @@ describe('WorkflowItemSearchResultListElementComponent', () => {
 
   }));
 
-
   it('should add an offset to the actions element', () => {
     const thumbnail = fixture.debugElement.query(By.css('.offset-3'));
     expect(thumbnail).toBeTruthy();

src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.spec.ts

@@ -60,7 +60,7 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const rd = createSuccessfulRemoteDataObject(item);
 mockResultObject.indexableObject = Object.assign(new WorkspaceItem(), { item: observableOf(rd) });

src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.spec.ts

@@ -48,7 +48,7 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 describe('CollectionSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -98,7 +98,7 @@ describe('CollectionSearchResultListElementComponent', () => {
 
   describe('when environment is set to show thumbnail images', () => {
     it('should offset content', () => {
-      const offset = fixture.debugElement.query(By.css('offset-md-2'))
+      const offset = fixture.debugElement.query(By.css('offset-md-2'));
     });
   });
 

src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.spec.ts

@@ -48,7 +48,7 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 describe('CommunitySearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -99,7 +99,7 @@ describe('CommunitySearchResultListElementComponent', () => {
 
   describe('when environment is set to show thumbnail images', () => {
     it('should offset content', () => {
-      const offset = fixture.debugElement.query(By.css('offset-md-2'))
+      const offset = fixture.debugElement.query(By.css('offset-md-2'));
     });
   });
 });

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.spec.ts

@@ -64,13 +64,13 @@ const environmentUseThumbs = {
   browseBy: {
     showThumbnails: true
   }
-}
+};
 
 const enviromentNoThumbs = {
   browseBy: {
     showThumbnails: false
   }
-}
+};
 
 describe('ItemSearchResultListElementComponent', () => {
   beforeEach(waitForAsync(() => {

src/app/shared/utils/object-list-utils.ts

@@ -0,0 +1,13 @@
+/**
+ * Sets the class to be used for the "no thumbnail"
+ * placeholder font size in lists.
+ */
+export function  setPlaceHolderFontSize(width: number): string {
+  if (width < 750) {
+    return 'thumb-font-1';
+  } else if (width < 1000) {
+    return 'thumb-font-2';
+  } else {
+    return 'thumb-font-3';
+  }
+}