[Connect|Trunk]: Add ngtemplates on contact and about page to avoid changes in multi sections of each page.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56488 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-07-11 09:59:38 +00:00
parent 0fcca5a955
commit 8b742cd51b
2 changed files with 50 additions and 37 deletions

View File

@ -1,3 +1,12 @@
<ng-template #info>
<h1 class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h1>
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
<li><h5><span class="uk-text-bold">Create and Manage</span> your
Community Gateway</h5></li>
<li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
<li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
</ul>
</ng-template>
<div class="contact-background image-front-topbar uk-section-large uk-background-top-center uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: 350px;" class="uk-section uk-flex uk-flex-middle">
<div class="uk-align-center">
@ -6,26 +15,29 @@
</div>
<div *ngIf="!showLoading" class="uk-container uk-container-large">
<div class="uk-grid-divider" uk-grid>
<div class="uk-width-1-1 uk-hidden@m">
<ng-container *ngTemplateOutlet="info"></ng-container>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h1 class="uk-margin-auto uk-text-bold">Contact us to create your Community Gateway</h1>
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
<div class="uk-margin-top" uk-grid>
<div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
<div class="uk-width-1-2 uk-margin-small-top">
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
<input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Surname <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
<input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Email <span class="uk-text-danger uk-text-bold">*</span>
</label>
@ -33,7 +45,7 @@
<div *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')" class=" uk-text-danger uk-text-small style=display:none">Please add a valid email. </div>
<input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required #sender="ngModel">
</div>
<div class="uk-width-1-2 uk-margin-small-top">
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-h5 uk-text-bold">
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
</label>
@ -43,7 +55,7 @@
<label class="uk-width-1-1 uk-h5 uk-text-bold">
Community Name <span class="uk-text-danger uk-text-bold">*</span>
</label>
<div class="uk-width-1-2 uk-margin-remove-top">
<div class="uk-width-1-2@s uk-margin-remove-top">
<div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
<input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
</div>
@ -64,14 +76,8 @@
</div>
</div>
</div>
<div class="uk-width-1-2@m uk-width-1-1@s">
<h1 class="uk-margin-auto-top uk-margin-remove-bottom uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h1>
<ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
<li><h5><span class="uk-text-bold">Create and Manage</span> your
Community Gateway</h5></li>
<li><h5><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
<li><h5><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
</ul>
<div class="uk-width-1-2 uk-visible@m">
<ng-container *ngTemplateOutlet="info"></ng-container>
</div>
</div>
</div>

View File

@ -8,6 +8,30 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
@Component({
selector: 'learn-how',
template: `
<ng-template #one>
<h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
<div>
First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together well talk about how OpenAIRE RCD fits as a solution.
</div>
</ng-template>
<ng-template #two>
<h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway.
</div>
</ng-template>
<ng-template #three>
<h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
<div>
You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
</div>
</ng-template>
<ng-template #four>
<h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
</div>
</ng-template>
<div class="image-front-topbar" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
<div style=" min-height: calc(7.89999px + 60vh);"
class="about-background uk-section uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
@ -19,21 +43,13 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
<div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center" uk-grid>
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
<div>
<h5 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h5>
<div>
First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together well talk about how OpenAIRE RCD fits as a solution.
</div>
<ng-container *ngTemplateOutlet="one"></ng-container>
</div>
<div class="uk-visible@m">
<h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
</div>
<ng-container *ngTemplateOutlet="four"></ng-container>
</div>
<div class="uk-hidden@m">
<h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway. </div>
<ng-container *ngTemplateOutlet="two"></ng-container>
</div>
</div>
<div>
@ -41,25 +57,16 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
</div>
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s" uk-grid>
<div class="uk-visible@m">
<h5 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway. </div>
<ng-container *ngTemplateOutlet="two"></ng-container>
</div>
<div class="uk-hidden@m uk-visible@s">
<h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service. </div>
<ng-container *ngTemplateOutlet="four"></ng-container>
</div>
<div>
<h5 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h5>
<div>
You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
</div>
<ng-container *ngTemplateOutlet="three"></ng-container>
</div>
<div class="uk-hidden@s uk-visible@xs">
<h5 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h5>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service. </div>
<ng-container *ngTemplateOutlet="four"></ng-container>
</div>
</div>
</div>