Thumbnails fixed for relationships and added styling.

src/app/core/data/relationship.service.spec.ts

@@ -121,6 +121,8 @@ describe('RelationshipService', () => {
     findByHref: createSuccessfulRemoteDataObject$(relatedItems[0])
   });
 
+  const appConfig = Object.assign({browseBy: {showThumbnails: true}})
+
   function initTestService() {
     return new RelationshipService(
       itemService,
@@ -133,6 +135,7 @@ describe('RelationshipService', () => {
       null,
       null,
       null,
+      appConfig,
       jasmine.createSpy('paginatedRelationsToItems').and.returnValue((v) => v),
     );
   }
@@ -210,8 +213,8 @@ describe('RelationshipService', () => {
           mockOptions,
           true,
           true,
-          followLink('leftItem'),
+          followLink('leftItem',{}, followLink('thumbnail')),
-          followLink('rightItem'),
+          followLink('rightItem',{}, followLink('thumbnail')),
           followLink('relationshipType')
         );
         done();

src/app/core/data/relationship.service.ts

@@ -46,6 +46,7 @@ import { sendRequest } from '../shared/request.operators';
 import { RestRequest } from './rest-request.model';
 import { CoreState } from '../core-state.model';
 import { FindListOptions } from './find-list-options.model';
+import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface';
 
 const relationshipListsStateSelector = (state: AppState) => state.relationshipLists;
 
@@ -89,6 +90,7 @@ export class RelationshipService extends DataService<Relationship> {
               protected http: HttpClient,
               protected comparator: DefaultChangeAnalyzer<Relationship>,
               protected appStore: Store<AppState>,
+              @Inject(APP_CONFIG) private appConfig: AppConfig,
               @Inject(PAGINATED_RELATIONS_TO_ITEMS_OPERATOR) private paginatedRelationsToItems: (thisId: string) => (source: Observable<RemoteData<PaginatedList<Relationship>>>) => Observable<RemoteData<PaginatedList<Item>>>) {
     super();
   }
@@ -183,7 +185,7 @@ export class RelationshipService extends DataService<Relationship> {
     ]).pipe(
       filter(([existsInOC, existsInRC]) => !existsInOC && !existsInRC),
       take(1),
-    ).subscribe(() => this.itemService.findByHref(item._links.self.href, false));
+    ).subscribe(() => this.itemService.findByHref(item._links.self.href, false, true, followLink('thumbnail')));
   }
 
   /**
@@ -256,7 +258,16 @@ export class RelationshipService extends DataService<Relationship> {
    * @param options
    */
   getRelatedItemsByLabel(item: Item, label: string, options?: FindListOptions): Observable<RemoteData<PaginatedList<Item>>> {
-    return this.getItemRelationshipsByLabel(item, label, options, true, true, followLink('leftItem'), followLink('rightItem'), followLink('relationshipType')).pipe(this.paginatedRelationsToItems(item.uuid));
+    let linksToFollow: FollowLinkConfig<Relationship>[];
+    if (this.appConfig.browseBy.showThumbnails) {
+      linksToFollow = [
+        followLink('leftItem',{}, followLink('thumbnail')),
+        followLink('rightItem',{}, followLink('thumbnail')),
+        followLink('relationshipType') ];
+    } else {
+      linksToFollow = [followLink('leftItem'), followLink('rightItem'), followLink('relationshipType')];
+    }
+    return this.getItemRelationshipsByLabel(item, label, options, true, true, ...linksToFollow).pipe(this.paginatedRelationsToItems(item.uuid));
   }
 
   /**

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -36,7 +36,7 @@
       [label]="'orgunit.page.id'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPublicationOfOrgUnit'"

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -29,7 +29,7 @@
       [label]="'person.page.birthdate'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isProjectOfPerson'"

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -42,7 +42,7 @@
       <!--[label]="'project.page.expectedcompletion'">-->
     <!--</ds-generic-item-page-field>-->
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isPersonOfProject'"

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -53,7 +53,7 @@
       [label]="'publication.page.publisher'">
     </ds-generic-item-page-field>
   </div>
-  <div class="col-xs-12 col-md-6">
+  <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"
       [relationType]="'isProjectOfPublication'"

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

@@ -3,7 +3,9 @@
  * placeholder font size in lists.
  */
 export function  setPlaceHolderFontSize(width: number): string {
-  if (width < 750) {
+  if (width < 400) {
+    return 'thumb-font-0'
+  } else if (width < 750) {
     return 'thumb-font-1';
   } else if (width < 1000) {
     return 'thumb-font-2';

src/styles/_global-styles.scss

@@ -139,14 +139,32 @@ ds-dynamic-form-control-container.d-none {
   background-color: var(--ds-admin-sidebar-bg);
 }
 /* The font sizes used in "no thumbnail" placeholder */
+.thumb-font-0 {
+  .thumbnail-placeholder {
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+      font-size: 0.7rem !important;
+      padding: 0.2rem;
+    }
+    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+      font-size: 0.6rem !important;
+      padding: 0.1rem;
+    }
+    font-size: 0.4rem !important;
+    padding: 0.1rem;
+  }
+}
 .thumb-font-1 {
   .thumbnail-placeholder {
-    font-size: 0.7rem !important;
-    padding: 0.125rem;
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
+      font-size: 0.9rem !important;
+      padding: 0.1rem;
+    }
+    @media screen and (max-width: 950px) {
       font-size: 0.5rem !important;
       padding: 0.1rem;
     }
+    font-size: 0.7rem !important;
+    padding: 0.125rem;
     visibility: inherit;
   }
 }