MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix for terminology component's graph element on mobile view

This commit is contained in:
Alex Martzios 2022-12-08 11:51:28 +02:00
parent de42da8b6c
commit b50deff46b
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
monitor/methodology/terminology.component.ts
View File

@ -3,8 +3,10 @@ import {
AfterViewInit,
ChangeDetectorRef,
Component,
Inject,
OnDestroy,
OnInit,
PLATFORM_ID,
ViewChild
} from "@angular/core";
import {Subscription} from "rxjs";
@ -15,6 +17,8 @@ import {SEOService} from "../../sharedComponents/SEO/SEO.service";
import {properties} from "../../../../environments/environment";
import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
import {HelperService} from "../../utils/helper/helper.service";
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
import {isPlatformServer} from "@angular/common";
declare var ResizeObserver;
@ -22,7 +26,7 @@ declare var ResizeObserver;
@Component({
selector: 'terminology',
template: `
<div class="uk-visible@m">
<div *ngIf="!isMobile" class="uk-visible@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large uk-section uk-section-small">
<div class="uk-padding-small uk-padding-remove-horizontal">
@ -70,7 +74,7 @@ declare var ResizeObserver;
</div>
</div>
</div>
<div class="uk-hidden@m">
<div *ngIf="isMobile || isServer" class="uk-hidden@m">
<div class="uk-background-muted">
<div class="uk-container uk-container-large">
<div class="uk-text-center" uk-scrollspy-class>
@ -80,9 +84,9 @@ declare var ResizeObserver;
</div>
</div>
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
<div id="graph_element" #graph_element_mobile class="uk-blur-background" uk-sticky="bottom: true"
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
[attr.offset]="graph_offset">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall uk-text-right">
<icon name="graph" customClass="text-graph"></icon>
<span class="uk-margin-small-left uk-text-meta">More information for </span>
<a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
@ -122,11 +126,12 @@ export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, A
public graph_offset: number = 0;
public graph_height: number = 0;
@ViewChild("graph_element") graph_element;
@ViewChild("graph_element_mobile") graph_element_mobile;
public contentSections: string[] = ['entities', 'inherited-and-inferred-attributes', 'constructed-attributes'];
public activeSection: string;
public properties = properties;
public divContents: any;
isMobile: boolean = false;
isServer: boolean;
constructor(private seoService: SEOService,
private meta: Meta,
@ -134,7 +139,10 @@ export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, A
private route: ActivatedRoute,
private title: Title,
private cdr: ChangeDetectorRef,
private helper: HelperService) {
private helper: HelperService,
private layoutService: LayoutService,
@Inject(PLATFORM_ID) private platform: any) {
this.isServer = isPlatformServer(this.platform);
}
ngOnInit() {
@ -152,6 +160,10 @@ export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, A
this.activeSection = 'entities';
}
}));
this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
});
this.getDivContents();
}