diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.html b/src/app/record/components/affiliation-stack/affiliation-stack.component.html index df49ca0564..3ebc305515 100644 --- a/src/app/record/components/affiliation-stack/affiliation-stack.component.html +++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.html @@ -47,7 +47,12 @@ >
-

+

{{ affiliation.affiliationName.value }}: diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss index 462bd40feb..b411238802 100644 --- a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss +++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss @@ -21,10 +21,19 @@ .affiliation-title { display: flex; align-items: center; - margin: 0; + + h4 { + margin: 0; + } + + h4.mobile { + max-width: calc(100% - 50px); + } + mat-icon { margin-inline-end: 4px; } + .vl { height: 28px; margin-inline-start: 8px; diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.ts b/src/app/record/components/affiliation-stack/affiliation-stack.component.ts index ecae63c149..b5b1b822db 100644 --- a/src/app/record/components/affiliation-stack/affiliation-stack.component.ts +++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.ts @@ -1,6 +1,6 @@ -import { Component, HostBinding, Input, OnInit } from '@angular/core' -import { combineLatest, Observable, of } from 'rxjs' -import { first } from 'rxjs/operators' +import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core' +import { combineLatest, Observable, of, Subject } from 'rxjs' +import { first, takeUntil } from 'rxjs/operators' import { OrganizationsService } from 'src/app/core' import { RecordAffiliationService } from 'src/app/core/record-affiliations/record-affiliations.service' import { OrgDisambiguated, UserInfo } from 'src/app/types' @@ -13,6 +13,7 @@ import { import { UserRecord } from 'src/app/types/record.local' import { ModalAffiliationsComponent } from '../affiliation-stacks-groups/modals/modal-affiliations/modal-affiliations.component' import { TogglzService } from '../../../core/togglz/togglz.service' +import { PlatformInfoService } from '../../../cdk/platform-info' @Component({ selector: 'app-affiliation-stack', @@ -22,7 +23,9 @@ import { TogglzService } from '../../../core/togglz/togglz.service' './affiliation-stack.component.scss-theme.scss', ], }) -export class AffiliationStackComponent implements OnInit { +export class AffiliationStackComponent implements OnInit, OnDestroy { + $destroy: Subject = new Subject() + @HostBinding('class.display-the-stack') displayTheStackClass = false _affiliationStack: AffiliationGroup @Input() userRecord: UserRecord @@ -83,11 +86,13 @@ export class AffiliationStackComponent implements OnInit { } } = {} modalAffiliationsComponent = ModalAffiliationsComponent + isMobile: boolean constructor( private _affiliationService: RecordAffiliationService, private _organizationsService: OrganizationsService, - private _togglz: TogglzService + private _togglz: TogglzService, + private _platform: PlatformInfoService, ) {} /** @@ -216,5 +221,17 @@ export class AffiliationStackComponent implements OnInit { return false } - ngOnInit(): void {} + ngOnInit(): void { + this._platform + .get() + .pipe(takeUntil(this.$destroy)) + .subscribe( + (platform) => (this.isMobile = platform.columns4 || platform.columns8) + ) + } + + ngOnDestroy() { + this.$destroy.next(true) + this.$destroy.unsubscribe() + } }