MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

[Trunk|Connect]: Home Page, About almost ready. It is needed to specify gif images and their texts on create Gifs function. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56216 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-06-27 10:25:02 +00:00
parent 3d7d20f746
commit 6ee80a8d0d
4 changed files with 151 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/communities/communities.component.html
View File

@ -56,8 +56,10 @@
</div> </div>
</div> </div>
<div class="uk-position-relative uk-align-center banner-img-box"> <div class="uk-position-relative">
<img src="../../assets/banner/login.png" class="uk-padding uk-position-center"> <div class="uk-align-center uk-position-center">
<img width="296" height="285" src="../../assets/banner/login.png">
</div>
</div> </div>
</div> </div>
<div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid> <div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
@ -181,7 +183,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-margin-large-top background uk-background-norepeat uk-background-cover"> <div class="uk-margin-large-top home-background uk-background-norepeat uk-background-cover">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about'"> <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about'">
</gif-slider> </gif-slider>
@ -222,8 +224,10 @@
<div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"> <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section"> <div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid> <div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
<div class="uk-position-relative uk-align-center banner-img-box"> <div class="uk-position-relative">
<img src="../../assets/contact/2.png" class="uk-padding uk-position-center"> <div class="uk-align-center uk-position-center">
<img width="237" height="250" src="../../assets/contact/2.png">
</div>
</div> </div>
<div> <div>
<h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1> <h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>

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

@ -1,10 +1,9 @@
<div *ngIf="showLoading" class="uk-margin-large"> <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 class="uk-animation-fade uk-margin-top uk-width-1-1" role="alert"><span class="loading-gif uk-align-center" ></span></div>
</div> </div>
<div *ngIf="!showLoading" class="image-front-topbar background uk-section-default uk-position-relative" 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"> <div *ngIf="!showLoading" class="image-front-topbar home-background uk-section-large 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">
<div style=" min-height: 350px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle"> <div style=" min-height: 350px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
<div class="uk-margin-top uk-align-center"> <div class="uk-align-center">
<div class="uk-section uk-section-large">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-grid-divider" uk-grid> <div class="uk-grid-divider" uk-grid>
<div class="uk-width-1-2@m uk-width-1-1@s"> <div class="uk-width-1-2@m uk-width-1-1@s">
@ -77,7 +76,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<modal-alert #AlertModal (alertOutput)="goToHome($event)"> <modal-alert #AlertModal (alertOutput)="goToHome($event)">
<div class="uk-text-center"> <div class="uk-text-center">

90
src/app/learn-how/learn-how.component.ts
View File

@ -8,16 +8,61 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
@Component({ @Component({
selector: 'learn-how', selector: 'learn-how',
template: ` template: `
<div class="image-front-topbar 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 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);" <div style=" min-height: calc(7.89999px + 60vh);"
class="uk-section uk-padding-remove-bottom" > class="uk-padding-remove-bottom cloud-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
<div class="uk-container uk-container-large uk-section"> <div class="uk-section uk-margin-large-top">
<div class="uk-container uk-container-large">
<div class="uk-margin-large-top" uk-grid> <div class="uk-margin-large-top" uk-grid>
<h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1> <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
<h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5> <div class="uk-width-1-2@l uk-width-1-1@s uk-text-large">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</div>
</div>
<div class="uk-margin-large-top uk-flex-middle uk-flex uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
<div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
<div>
<h5 class="uk-text-bold">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 we’ll talk about how OpenAIRE RCD fits as a solution.
</div> </div>
</div> </div>
<div class="uk-section-muted"> <!--background--> <div class="uk-visible@m">
<h5 class=" uk-text-bold">4. Roll out the service</h5>
<div>
We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
</div>
</div>
<div class="uk-hidden@m">
<h5 class=" uk-text-bold">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway. </div>
</div>
</div>
<div>
<img src="../../assets/about/cicle.png">
</div>
<div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
<div class="uk-visible@m">
<h5 class=" uk-text-bold">2. Develop a pilot</h5>
<div>
How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway. </div>
</div>
<div class="uk-hidden@m">
<h5 class=" uk-text-bold">4. Roll out the service</h5>
<div>
We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service. </div>
</div>
<div>
<h5 class="uk-text-bold">3. Test and Validate</h5>
<div>
You validate and test your new Science 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>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<gif-slider [gifs]="first" [gifRight]="true"></gif-slider> <gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
</div> </div>
@ -25,7 +70,7 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<gif-slider [gifs]="second"></gif-slider> <gif-slider [gifs]="second"></gif-slider>
</div> </div>
<div class="uk-section-muted"> <!--background--> <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
<div class="uk-container uk-container-large uk-section"> <div class="uk-container uk-container-large uk-section">
<div class="uk-flex uk-flex-middle uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid> <div class="uk-flex uk-flex-middle uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
<div> <div>
@ -35,13 +80,15 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
<a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a> <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
</div> </div>
</div> </div>
<div> <div class="uk-position-relative">
eikona <div class="uk-align-center uk-position-center">
<img width="263" height="250" src="../../assets/contact/4.png">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="questions.length > 0" class="uk-container"> </div>
<div *ngIf="questions.length > 0 else comingSoon" class="uk-container">
<h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1> <h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
<div class="uk-width-1-1 uk-section"> <div class="uk-width-1-1 uk-section">
<ul uk-accordion> <ul uk-accordion>
@ -55,32 +102,27 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
</ul> </ul>
</div> </div>
</div> </div>
<ng-template #comingSoon>
<div class="uk-container">
<h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
<div class="uk-width-1-1 uk-section uk-text-center uk-text-large uk-text-bold uk-text-uppercase">
Coming Soon
</div> </div>
</div> </div>
</ng-template>
</div>
` `
}) })
export class LearnHowComponent { export class LearnHowComponent {
public piwiksub: any; public piwiksub: any;
questions: FAQ[] = [ questions: FAQ[] = [
{ /*{
question: 'Coming soon?', question: 'Coming soon?',
answer: 'Yes' answer: 'Yes'
}, },
/*{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{ {
question: 'Why should my company do a design sprint?', question: 'Could you be more specific?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' answer: 'No'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
},
{
question: 'Why should my company do a design sprint?',
answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
}*/ }*/
]; ];
public first: {"gif": string, "header": string, "text"}[] = []; public first: {"gif": string, "header": string, "text"}[] = [];

7
src/assets/connect-custom.css
View File

@ -50,11 +50,6 @@
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
.banner-img-box {
width: 300px;
height: 290px;
}
.contact-background { .contact-background {
background-image: url("./contact/background.png") !important; background-image: url("./contact/background.png") !important;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
@ -70,7 +65,7 @@
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
.background { .home-background {
background-image: url("home/background.jpg") !important; background-image: url("home/background.jpg") !important;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }