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

Termonilogy: Change position of graph element in order to fix a bug with its sticky position and fix route in div contents

This commit is contained in:
Konstantinos Triantafyllou 2022-11-03 09:37:13 +02:00
parent 4216be29cd
commit cdde9bb94c
2 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -18,8 +18,8 @@ declare var ResizeObserver;
selector: '[page-content]', selector: '[page-content]',
template: ` template: `
<div id="page_content"> <div id="page_content">
<div id="page_content_sticky_footer" #sticky_footer class="uk-blur-background" <div id="page_content_sticky_footer" #sticky_footer class="uk-tile-default uk-blur-background"
[attr.uk-sticky]="'bottom: true;'" [attr.offset]="footer_offset"> [attr.uk-sticky]="'bottom: true'" [attr.offset]="footer_offset">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical"> <div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[sticky_footer]"></ng-content> <ng-content select="[sticky_footer]"></ng-content>

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

@ -22,57 +22,60 @@ declare var ResizeObserver;
@Component({ @Component({
selector: 'terminology', selector: 'terminology',
template: ` template: `
<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true;" [attr.offset]="graph_offset"> <div class="uk-background-muted">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom"> <div class="uk-container uk-container-large uk-section uk-section-small">
<icon name="graph" customClass="text-graph"></icon> <div class="uk-padding-small uk-padding-remove-horizontal">
<span class="uk-margin-small-left uk-text-meta">More information for </span> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
<a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a> </div>
<span class="uk-text-meta">.</span> <div class="uk-text-center" uk-scrollspy-class>
</div> <h1 class="uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span
</div> class="uk-text-primary">.</span></h1>
<div class="uk-background-muted"> </div>
<div class="uk-container uk-container-large uk-section uk-section-small"> </div>
<div class="uk-padding-small uk-padding-remove-horizontal"> </div>
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
</div> <div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
<div class="uk-text-center" uk-scrollspy-class> [attr.offset]="graph_offset">
<h1 class="uk-margin-medium-top uk-margin-medium-bottom">Terminology and <br> construction<span class="uk-text-primary">.</span></h1> <div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
</div> <icon name="graph" customClass="text-graph"></icon>
</div> <span class="uk-margin-small-left uk-text-meta">More information for </span>
</div> <a href="https://graph.openaire.eu" target="_blank" class="text-graph">OpenAIRE Research Graph</a>
<div *ngIf="divContents" class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250"> <span class="uk-text-meta">.</span>
</div>
</div>
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class> <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid> <div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-4@m uk-margin-top uk-visible@m"> <div class="uk-width-1-4@m uk-margin-top uk-visible@m">
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;"> <div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
<slider-tabs type="scrollable" position="left"> <slider-tabs type="scrollable" position="left">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab> <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab> <slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
<slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab> <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
</slider-tabs> </slider-tabs>
</div> </div>
</div> </div>
<div class="uk-width-1-1 uk-margin-top uk-hidden@m"> <div class="uk-width-1-1 uk-margin-top uk-hidden@m">
<div class="uk-sticky uk-background-default" uk-sticky> <div class="uk-sticky uk-background-default" uk-sticky>
<slider-tabs type="scrollable" position="horizontal"> <slider-tabs type="scrollable" position="horizontal">
<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab> <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab> <slider-tab tabId="inherited-and-inferred-attributes"
tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
<slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab> <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
</slider-tabs> </slider-tabs>
</div> </div>
</div> </div>
<div class="uk-width-expand@m uk-margin-top"> <div class="uk-width-expand@m uk-margin-top">
<div id="entities" class="uk-margin-large-bottom"> <div id="entities" class="uk-margin-large-bottom">
<helper [texts]="divContents['entities']"></helper> <helper [texts]="divContents['entities']"></helper>
</div> </div>
<div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom"> <div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
<helper [texts]="divContents['inherited-and-inferred-attributes']"></helper> <helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
</div> </div>
<div id="constructed-attributes" class="uk-margin-large-bottom"> <div id="constructed-attributes" class="uk-margin-large-bottom">
<helper [texts]="divContents['constructed-attributes']"></helper> <helper [texts]="divContents['constructed-attributes']"></helper>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
` `
@ -140,7 +143,7 @@ export class TerminologyComponent implements OnInit, OnDestroy, AfterViewInit, A
} }
private getDivContents() { private getDivContents() {
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this.router.url).subscribe(contents => { this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', '/methodology/terminology').subscribe(contents => {
this.divContents = contents; this.divContents = contents;
})); }));
} }