[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

src/app/contact/contact.component.css

@@ -1,14 +1,24 @@
-.contact {
+.link-card {
-  background-image: url("/assets/usage-statistics-assets/contact/1.svg");
+    border: 1px solid #E0E0E0 !important;
-  background-size: auto;
+    border-radius: 5px !important;
-  background-repeat: no-repeat;
+    box-shadow: 0px 6px 15px #0000001A !important;
-  background-position: 0 0;
 }
 
-.contact-card {
+.faq-card {
-  background: rgba(255, 255, 255, 0.5) 0 0 no-repeat padding-box;
+    border: 1px solid #D1D1D1 !important;
-  box-shadow: 1px 3px 6px #00000029;
+    border-radius: 4px !important;
-  border: 1px solid #E0E0E0;
+    box-shadow: none !important;
-  border-radius: 5px;
-  padding: 20px 80px;
 }
+
+.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");
+}

src/app/contact/contact.component.html

@@ -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>
+    <h2 class="uk-text-center">Support</h2>
-    <div class="uk-grid uk-flex uk-flex-bottom" uk-grid>
+    <div class="uk-grid uk-flex uk-flex-center" uk-grid>
-      <div class="uk-width-expand">
+      <div class="uk-width-2-3">
-        <div class="uk-margin-large-left uk-visible@s">
+        <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
+        <div *ngIf="showLoading" class="uk-margin-large">
-                class="loading-gif  uk-align-center"></span></div>
+          <div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
-          </div>
+              class="loading-gif  uk-align-center"></span></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>
-        <div class="uk-hidden@s">
+        <div *ngIf="!showLoading">
-          <div *ngIf="showLoading" class="uk-margin-large">
+          <contact-us [properties]="properties" [errorMessage]="errorMessage"
-            <div class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span
+                      [right]="false"
-                class="loading-gif  uk-align-center"></span></div>
+                      [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"
+          <div>
-                        [right]="false" buttonClass="uk-button-primary"
+            <div class="uk-card uk-card-default uk-card-body link-card">
-                        [formTitle]="'Do you have a question? Contact us.'"
+              <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center uk-margin-small-top">
-                        [contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
+                <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()">

src/app/contact/contact.component.ts

@@ -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)"
+    });
+  }
 }