[master | ADDED | DONE] add support (faq), terminology & construction pages, along with the corresponding helptexts
This commit is contained in:
parent
e509088ff7
commit
0803270c58
|
|
@ -3,6 +3,8 @@ import {CommonModule} from "@angular/common";
|
|||
import {RouterModule} from "@angular/router";
|
||||
import {MethodologicalApproachComponent} from "./methodological-approach.component";
|
||||
import {TerminologyComponent} from "./terminology.component";
|
||||
import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
|
||||
import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
|
||||
|
||||
@NgModule({
|
||||
declarations: [MethodologicalApproachComponent, TerminologyComponent],
|
||||
|
|
@ -23,7 +25,7 @@ import {TerminologyComponent} from "./terminology.component";
|
|||
component: TerminologyComponent,
|
||||
canDeactivate: []
|
||||
},
|
||||
])],
|
||||
]), SliderTabsModule, HelperModule],
|
||||
exports: []
|
||||
})
|
||||
export class MethodologyModule {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<div *ngIf="!isMobile" class="uk-visible@m">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-text-center" uk-scrollspy-class>
|
||||
<h1 class="uk-h2 uk-margin-medium-top uk-margin-medium-bottom">Terminology & Construction.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
|
||||
<div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
|
||||
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
|
||||
<div class="uk-width-medium uk-margin-top">
|
||||
<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 100;">
|
||||
<slider-tabs type="scrollable" position="left">
|
||||
<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="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-width-expand uk-margin-top">
|
||||
<div id="entities" class="uk-margin-large-bottom">
|
||||
<helper [texts]="divContents['entities']"></helper>
|
||||
</div>
|
||||
<div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
|
||||
<helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
|
||||
</div>
|
||||
<div id="constructed-attributes" class="uk-margin-large-bottom">
|
||||
<helper [texts]="divContents['constructed-attributes']"></helper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isMobile || isServer" class="uk-hidden@m">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-text-center" uk-scrollspy-class>
|
||||
<h1 class="uk-heading-small uk-margin-medium-top uk-margin-medium-bottom">Terminology & Construction.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
|
||||
<div>
|
||||
<div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
|
||||
<slider-tabs type="scrollable" position="horizontal">
|
||||
<slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
|
||||
<slider-tab tabId="inherited-and-inferred-attributes_m"
|
||||
tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
|
||||
<slider-tab tabId="constructed-attributes_m" tabTitle="3. Constructed Attributes"></slider-tab>
|
||||
</slider-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-container uk-container-large uk-section uk-section-small uk-text-break">
|
||||
<div id="entities_m" class="uk-margin-xlarge-bottom">
|
||||
<helper [texts]="divContents['entities']"></helper>
|
||||
</div>
|
||||
<div id="inherited-and-inferred-attributes_m" class="uk-margin-xlarge-bottom">
|
||||
<helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
|
||||
</div>
|
||||
<div id="constructed-attributes_m" class="uk-margin-xlarge-bottom">
|
||||
<helper [texts]="divContents['constructed-attributes']"></helper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.uk-width-medium {
|
||||
width: 350px;
|
||||
}
|
||||
|
|
@ -1,13 +1,60 @@
|
|||
import {Component} from "@angular/core";
|
||||
import {ChangeDetectorRef, Component} from "@angular/core";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
|
||||
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
|
||||
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
||||
|
||||
@Component({
|
||||
selector: 'terminology',
|
||||
template: `
|
||||
<div>terminology page</div>
|
||||
`
|
||||
templateUrl: 'terminology.component.html',
|
||||
styleUrls: ['terminology.component.less']
|
||||
})
|
||||
export class TerminologyComponent {
|
||||
constructor() {
|
||||
|
||||
export class TerminologyComponent extends BaseComponent{
|
||||
title = 'Terminology & Construction';
|
||||
description = 'Terminology & Construction';
|
||||
tab: 'entities' | 'attributes' = 'entities';
|
||||
contentSections: string[] = ['entities', 'inherited-and-inferred-attributes', 'constructed-attributes'];
|
||||
activeSection: string;
|
||||
divContents: any;
|
||||
|
||||
isMobile: boolean = false;
|
||||
isServer: boolean;
|
||||
|
||||
constructor(protected _route: ActivatedRoute,
|
||||
protected _piwikService: PiwikService,
|
||||
protected _meta: Meta,
|
||||
protected seoService: SEOService,
|
||||
protected _title: Title,
|
||||
protected _router: Router,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private layoutService: LayoutService,
|
||||
private helper: HelperService) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setMetadata();
|
||||
this.subscriptions.push(this._route.fragment.subscribe(fragment => {
|
||||
if(fragment) {
|
||||
this.activeSection = fragment;
|
||||
} else {
|
||||
this.activeSection = 'entities';
|
||||
}
|
||||
}));
|
||||
this.layoutService.isMobile.subscribe(isMobile => {
|
||||
this.isMobile = isMobile;
|
||||
this.cdr.detectChanges();
|
||||
});
|
||||
this.getDivContents();
|
||||
}
|
||||
|
||||
private getDivContents() {
|
||||
this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/methodology/terminology').subscribe(contents => {
|
||||
this.divContents = contents;
|
||||
console.log(this.divContents);
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div class="uk-visible@m">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-flex uk-flex-middle" uk-scrollspy-class>
|
||||
<div class="uk-width-1-2 uk-margin-medium-bottom">
|
||||
<h1 class="uk-h2 uk-margin-medium-top">How can we help you?</h1>
|
||||
<div class="uk-text-lead uk-margin-medium-bottom">Monitor expert support team is ready and excited to help.</div>
|
||||
<a routerLink="/contact-us" class="uk-button uk-button-secondary">Contact Us</a>
|
||||
</div>
|
||||
<div class="uk-position-relative uk-width-1-2 uk-visible@l contact-us">
|
||||
<img class="uk-box-shadow-large two" src="assets/irish-assets/curators/1.jpg">
|
||||
<img class="uk-box-shadow-large three" src="assets/irish-assets/curators/3.jpg">
|
||||
<img class="uk-box-shadow-large four" src="assets/irish-assets/curators/4.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-large-top">
|
||||
<h3 class="uk-text-center">Frequently Asked Questions</h3>
|
||||
</div>
|
||||
<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
|
||||
</div>
|
||||
<div class="uk-hidden@m">
|
||||
<div class="uk-banner">
|
||||
<div class="uk-section-small uk-container uk-container-large">
|
||||
<div class="uk-text-center" uk-scrollspy-class>
|
||||
<h1 class="uk-margin-top">How can we help you?</h1>
|
||||
<div class="uk-margin-medium-bottom">Monitor expert support team is ready and excited to help.</div>
|
||||
<a routerLink="/contact-us" class="uk-button uk-button-small uk-button-secondary">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<h3 class="uk-text-center">Frequently Asked Questions</h3>
|
||||
</div>
|
||||
<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@import (reference) "~../../../assets/openaire-theme/less/_import-variables";
|
||||
|
||||
@faqs-curator-image-size: 120px;
|
||||
@faqs-contact-us-height: 400px;
|
||||
|
||||
.contact-us {
|
||||
height: @faqs-contact-us-height;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: @faqs-curator-image-size;
|
||||
height: @faqs-curator-image-size;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
|
||||
|
||||
&.one {
|
||||
top: @global-medium-gutter;
|
||||
right: @global-medium-gutter + (@faqs-curator-image-size/2);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
|
||||
&.two {
|
||||
bottom: @global-medium-gutter;
|
||||
right: @global-medium-gutter + (@faqs-curator-image-size/0.7);
|
||||
transform: rotate(15deg);
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
&.three {
|
||||
top: 0;
|
||||
left: @global-medium-gutter + (@faqs-curator-image-size*1.5);
|
||||
// transform: rotate(-10deg);
|
||||
object-position: -60px;
|
||||
}
|
||||
|
||||
&.four {
|
||||
bottom: 2*@global-medium-gutter;
|
||||
left: 2*@global-medium-gutter;
|
||||
transform: rotate(-10deg);
|
||||
object-position: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,40 @@
|
|||
import {Component} from "@angular/core";
|
||||
import {Meta, Title} from "@angular/platform-browser";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
|
||||
import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
|
||||
import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
|
||||
import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
|
||||
|
||||
@Component({
|
||||
selector: 'support',
|
||||
template: `
|
||||
<div>support page</div>
|
||||
`
|
||||
templateUrl: 'support.component.html',
|
||||
styleUrls: ['support.component.less']
|
||||
})
|
||||
export class SupportComponent {
|
||||
constructor() {
|
||||
|
||||
export class SupportComponent extends BaseComponent {
|
||||
title = 'Support';
|
||||
description = 'Support';
|
||||
pageContents = null;
|
||||
|
||||
constructor(protected _route: ActivatedRoute,
|
||||
protected _piwikService: PiwikService,
|
||||
protected _meta: Meta,
|
||||
protected seoService: SEOService,
|
||||
protected _title: Title,
|
||||
protected _router: Router,
|
||||
private helper: HelperService) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setMetadata();
|
||||
this.getPageContents();
|
||||
}
|
||||
|
||||
private getPageContents() {
|
||||
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'irish', this._router.url, 'country').subscribe(contents => {
|
||||
this.pageContents = contents;
|
||||
console.log(this.pageContents);
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import {NgModule} from "@angular/core";
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {SupportComponent} from "./support.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
|
||||
|
||||
@NgModule({
|
||||
declarations: [SupportComponent],
|
||||
|
|
@ -9,7 +10,7 @@ import {RouterModule} from "@angular/router";
|
|||
{
|
||||
path: '', component: SupportComponent
|
||||
}
|
||||
])],
|
||||
]), HelperModule],
|
||||
exports: [SupportComponent]
|
||||
})
|
||||
export class SupportModule {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Loading…
Reference in New Issue