Added platform detection for placeholder classes.

Author: mspalti

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Inject, Input } from '@angular/core';
+import { Component, ElementRef, Inject, Input, PLATFORM_ID } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { Observable } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
@@ -7,8 +7,9 @@ import { ViewMode } from '../../../core/shared/view-mode.model';
 import { RelationshipDataService } from '../../../core/data/relationship-data.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';
+import { setPlaceHolderAttributes } from '../../../shared/utils/object-list-utils';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'ds-related-items',
@@ -63,15 +64,20 @@ export class RelatedItemsComponent extends AbstractIncrementalListComponent<Obse
 
   constructor(public relationshipService: RelationshipDataService,
               protected elementRef: ElementRef,
-              @Inject(APP_CONFIG) protected appConfig: AppConfig
+              @Inject(APP_CONFIG) protected appConfig: AppConfig,
+              @Inject(PLATFORM_ID) private platformId: Object
               ) {
     super();
     this.fetchThumbnail = this.appConfig.browseBy.showThumbnails;
   }
 
   ngOnInit(): void {
-    const width = this.elementRef.nativeElement.offsetWidth;
-    this.placeholderFontClass = setPlaceHolderFontSize(width);
+    if (isPlatformBrowser(this.platformId)) {
+      const width = this.elementRef.nativeElement.offsetWidth;
+      this.placeholderFontClass = setPlaceHolderAttributes(width);
+    } else {
+      this.placeholderFontClass = 'hide-placeholder-text';
+    }
     super.ngOnInit();
   }
 

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

@@ -1,4 +1,4 @@
-<ds-object-list [ngClass]="placeholderFontClass" #objectList [config]="config"
+<ds-object-list [ngClass]="placeholderFontClass" [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hasBorder]="hasBorder"

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

@@ -1,10 +1,10 @@
 import {
   ChangeDetectorRef,
   Component, ElementRef,
-  EventEmitter,
+  EventEmitter, Inject,
   Input,
   OnInit,
-  Output,
+  Output, PLATFORM_ID,
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -21,7 +21,8 @@ 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';
+import { setPlaceHolderAttributes } from '../utils/object-list-utils';
+import { isPlatformBrowser } from '@angular/common';
 
 /**
  * Component that can render a list of listable objects in different view modes
@@ -161,17 +162,7 @@ export class ObjectCollectionComponent implements OnInit {
   placeholderFontClass: string;
 
 
-  ngOnInit(): void {
-    this.currentMode$ = this.route
-      .queryParams
-      .pipe(
-        map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view),
-        distinctUntilChanged()
-      );
-    const width = this.elementRef.nativeElement.offsetWidth;
-    this.placeholderFontClass = setPlaceHolderFontSize(width);
 
-  }
 
   /**
    * @param cdRef
@@ -187,7 +178,23 @@ export class ObjectCollectionComponent implements OnInit {
     private cdRef: ChangeDetectorRef,
     private route: ActivatedRoute,
     private router: Router,
-    private elementRef: ElementRef) {
+    private elementRef: ElementRef,
+    @Inject(PLATFORM_ID) private platformId: Object) {
+  }
+
+  ngOnInit(): void {
+    this.currentMode$ = this.route
+      .queryParams
+      .pipe(
+        map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view),
+        distinctUntilChanged()
+      );
+    if (isPlatformBrowser(this.platformId)) {
+      const width = this.elementRef.nativeElement.offsetWidth;
+      this.placeholderFontClass = setPlaceHolderAttributes(width);
+    } else {
+      this.placeholderFontClass = 'hide-placeholder-text';
+    }
   }
 
   /**

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

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

src/styles/_global-styles.scss

@@ -142,43 +142,47 @@ ds-dynamic-form-control-container.d-none {
 .thumb-font-0 {
   .thumbnail-placeholder {
     @media screen and (max-width: map-get($grid-breakpoints, lg)) {
-      font-size: 0.7rem !important;
+      font-size: 0.7rem;
       padding: 0.2rem;
     }
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.6rem !important;
+      font-size: 0.6rem;
       padding: 0.1rem;
     }
-    font-size: 0.4rem !important;
+    font-size: 0.4rem;
     padding: 0.1rem;
   }
 }
+
+.hide-placeholder-text {
+  .thumbnail-placeholder {
+    color: transparent !important;
+  }
+}
+
 .thumb-font-1 {
   .thumbnail-placeholder {
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-      font-size: 0.9rem !important;
+      font-size: 0.9rem;
       padding: 0.1rem;
     }
     @media screen and (max-width: 950px) {
-      font-size: 0.4rem !important;
+      font-size: 0.4rem;
       padding: 0.1rem;
     }
-    font-size: 0.6rem !important;
+    font-size: 0.6rem;
     padding: 0.125rem;
-    visibility: inherit;
   }
 }
 .thumb-font-2 {
   .thumbnail-placeholder {
-    font-size: 0.9rem !important;
+    font-size: 0.9rem;
     padding: 0.125rem;
-    visibility: inherit;
   }
 }
 .thumb-font-3 {
   .thumbnail-placeholder {
-    font-size: 1.25rem !important;
+    font-size: 1.25rem;
     padding: 0.5rem;
-    visibility: inherit;
   }
 }