MaDgIK
/
graph
13
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

[Trunk | Graph]: app/contact/ & assets/graph-assets/contact/: Add support (contact) page and assets. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-graph-portal/trunk@59521 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantina Galouni 2020-10-08 14:20:26 +00:00
parent ad8c0230f2
commit 7e364aff82
6 changed files with 131 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/contact/contact.component.css
View File

@ -1,14 +1,24 @@
.contact {
background-image: url("/assets/usage-statistics-assets/contact/1.svg");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
.link-card {
border: 1px solid #E0E0E0 !important;
border-radius: 5px !important;
box-shadow: 0px 6px 15px #0000001A !important;
}
.contact-card {
background: rgba(255, 255, 255, 0.5) 0 0 no-repeat padding-box;
box-shadow: 1px 3px 6px #00000029;
border: 1px solid #E0E0E0;
border-radius: 5px;
padding: 20px 80px;
.faq-card {
border: 1px solid #D1D1D1 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.uk-accordion .color {
color: #1A1A1A !important;
opacity: 0.8 !important;
}
.uk-accordion-title::before {
background-image: url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20data-svg%3D%27chevron-down%27%3E%20%3Cpolyline%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.00%27%20points%3D%2716%207%2010%2013%204%207%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}
.uk-open > .uk-accordion-title::before {
background-image: url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-svg%3D%22chevron-up%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.00%22%20points%3D%224%2013%2010%207%2016%2013%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

111
src/app/contact/contact.component.html
View File

@ -1,37 +1,96 @@
<div class="uk-section uk-section-small uk-container uk-container-large contact">
<div class="uk-container uk-align-center">
<h2 class="uk-text-bold uk-text-center">Support</h2>
<div class="uk-grid uk-flex uk-flex-bottom" uk-grid>
<div class="uk-width-expand">
<div class="uk-margin-large-left uk-visible@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[formTitle]="'Do you have a question? Contact us.'"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
</div>
<h2 class="uk-text-center">Support</h2>
<div class="uk-grid uk-flex uk-flex-center" uk-grid>
<div class="uk-width-2-3">
<h3 class="uk-margin-top">Do you have a question? <span class="portal-color">Contact us</span>.</h3>
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
</div>
<div class="uk-hidden@s">
<div *ngIf="showLoading" class="uk-margin-large">
<div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
class="loading-gif uk-align-center"></span></div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
</div>
</div>
<div class="uk-width-1-1 uk-margin-xlarge-top">
<div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid" uk-grid="" uk-height-match=".target">
<div class="uk-first-column">
<div class="uk-card uk-card-default uk-card-body link-card">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target" style="min-height: 110px;"><img src="assets/graph-assets/contact/documentation.svg" style="height:80px; width:94px"></div>
</div>
<div class="uk-margin-top">
<div class="target uk-text-center">
<a class="uk-button-text uk-button uk-text-capitalize uk-text-small"
href="https://develop.openaire.eu" target="_blank">
Documentation
</a>
<!-- <h5 class="uk-text-bold">Documentation</h5>-->
</div>
</div>
</div>
</div>
<div *ngIf="!showLoading">
<contact-us [properties]="properties" [errorMessage]="errorMessage"
[right]="false" buttonClass="uk-button-primary"
[formTitle]="'Do you have a question? Contact us.'"
[contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
<div>
<div class="uk-card uk-card-default uk-card-body link-card">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target"><img src="assets/graph-assets/contact/webinars.svg" style="height:110px; width:101px"></div>
</div>
<div class="uk-margin-top">
<div class="target uk-text-center" style="">
<a class="uk-button-text uk-button uk-text-capitalize uk-text-small"
href="https://www.openaire.eu/item/webinar-on-the-openaire-research-graph?highlight=WyJncmFwaCIsIndlYmluYXIiLCJ3ZWJpbmFyJyJd"
target="_blank">
Webinars
</a>
<!-- <h5 class="uk-text-bold">Webinars</h5>-->
</div>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body link-card">
<div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
<div class="target" style="min-height: 110px;"><img src="assets/graph-assets/contact/howto.svg" style="height:100px; width:107px"></div>
</div>
<div class="uk-margin-top">
<div class="target uk-text-center" style="">
<a class="uk-button-text uk-button uk-text-capitalize uk-text-small"
href="https://subugoe.github.io/scholcomm_analytics/posts/oaire_graph_2020/"
target="_blank">
How to
</a>
<!-- <h5 class="uk-text-bold">How to</h5>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-align-center">
<div class="uk-width-5-6 uk-margin-xlarge-top uk-margin-xlarge-bottom">
<h3 class="uk-text-center uk-margin-top portal-color">FAQs</h3>
<div class="uk-container">
<ul class="uk-accordion" uk-accordion="">
<li *ngFor="let faq of faqs" class="uk-card uk-card-default uk-card-body faq-card uk-margin-small uk-padding-small">
<a class="uk-accordion-title color" href="#">
<h5 class="uk-margin-remove-bottom">{{faq.question}}</h5>
</a>
<div class="uk-accordion-content color" aria-hidden="true" hidden="">
<p>{{faq.answer}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToHome()">

23
src/app/contact/contact.component.ts
View File

@ -8,6 +8,7 @@ import {Title} from '@angular/platform-browser';
import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {properties} from '../../environments/environment';
import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
@Component({
selector: 'contact',
@ -19,6 +20,7 @@ export class ContactComponent implements OnInit {
public showLoading = true;
public errorMessage = '';
public email: Email;
public faqs: FAQ[] = [];
public properties: EnvProperties = properties;
public contactForm: FormGroup;
@ -29,10 +31,11 @@ export class ContactComponent implements OnInit {
private emailService: EmailService,
private title: Title,
private fb: FormBuilder) {
this.setFaqs();
}
ngOnInit() {
this.title.setTitle('OpenAIRE - UsageCounts | Contact Us');
this.title.setTitle('OpenAIRE - Research Graph | Contact Us');
this.email = {body: '', subject: '', recipients: []};
this.reset();
this.showLoading = false;
@ -101,4 +104,22 @@ export class ContactComponent implements OnInit {
public goToHome() {
this.router.navigate(['/']);
}
private setFaqs() {
this.faqs.push({
"question": "What are \"trusted\" sources?",
"answer": "OpenAIRE data sources are considered \"trusted\" when researchers rely on them to share, discover, monitor, and assess their scientific products. " +
"Known sources collected by OpenAIRE are institutional repositories (e.g. university archives, libraries), catch-all repositories (e.g. Zenodo, Figshare, Dryad, B2Share, etc.), " +
"data repositories (e.g. Pangaea, GESIS, bio sources), thematic repositories (e.g. ArXiv, EuropePMC, RePec, etc.), " +
"Open Access publishers (e.g. F1000, OpenEdition, etc.), knowledge graphs (e.g. Microsoft Academic Graph, OpenCitations), " +
"registries (e.g. CrossRef, DataCite, ORCID, GRID.ac, OpenDOAR, re3data.org, etc), aggregators " +
"(e.g. Unpaywall, BASE, Scielo, DOAJ, CORE-UK, etc.), funders (e.g. European Commission, NSF, Wellcome Trust, etc.)."
});
this.faqs.push({
"question": "What do you mean with “transparent graph”?",
"answer": "The OpenAIRE Research Graph is transparent because it keeps tracks of the provenance of each and every information it contains. " +
"For each field you can know if they have been collected from one of our sources, if it has been inferred (and with which algorithm and with which confidence level)"
});
}
}

1
src/assets/graph-assets/contact/documentation.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

1
src/assets/graph-assets/contact/howto.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

1
src/assets/graph-assets/contact/webinars.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB