hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added platform detection for placeholder classes.

Browse Source
This commit is contained in:
Michael Spalti
2022-09-22 16:57:28 -07:00
parent fbcaaf5a10
commit a269817fe3
5 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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();
}

2
src/app/shared/object-collection/object-collection.component.html
View File

@@ -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"

35
src/app/shared/object-collection/object-collection.component.ts
View File

@@ -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';
}
}
/**

2
src/app/shared/utils/object-list-utils.ts
View File

@@ -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) {

26
src/styles/_global-styles.scss
View File

@@ -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;
}
}