MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Trunk|Library]: Create gif slider component. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56184 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-06-24 14:09:40 +00:00
parent 52a674222d
commit 91a66a3c05
2 changed files with 75 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
utils/gif-slider/gif-slider.component.ts Normal file
View File

@ -0,0 +1,56 @@
import {Component, Input} from '@angular/core';
@Component({
selector: 'gif-slider',
template: `
<div class="uk-position-relative" tabindex="-1" uk-slidershow="animation: fade; autoplay: true; autoplay-interval: 6000">
<ul class="uk-slideshow-items">
<li>
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
<div class="uk-width-1-2">
<img src="../../../../assets/Connect%20animations.gif">
</div>
<div class="uk-width-1-2">
<h1 style="font-size: 28px">Research Community Dashboard 1</h1>
<div class="uk-text-large">This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">
<a class="uk-button portal-button" routerLink="/learn-how" routerLinkActive="router-link-active"> LEARN MORE</a>
</div>
</div>
</div>
</li>
<li>
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
<div class="uk-width-1-2">
<img src="../../../../assets/Connect%20animations.gif">
</div>
<div class="uk-width-1-2">
<h1 style="font-size: 28px">Research Community Dashboard 2</h1>
<div class="uk-text-large">This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">
<a class="uk-button portal-button" routerLink="/learn-how" routerLinkActive="router-link-active"> LEARN MORE</a>
</div>
</div>
</div>
</li>
<li>
<div class="uk-flex uk-flex-middle uk-padding" uk-grid>
<div class="uk-width-1-2">
<img src="../../../../assets/Connect%20animations.gif">
</div>
<div class="uk-width-1-2">
<h1 style="font-size: 28px">Research Community Dashboard 3</h1>
<div class="uk-text-large">This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box.</div>
<div class="uk-inline uk-margin-large-top uk-margin-bottom">
<a class="uk-button portal-button" routerLink="/learn-how" routerLinkActive="router-link-active"> LEARN MORE</a>
</div>
</div>
</div>
</li>
</ul>
</div>`
})
export class GifSliderComponent {
@Input() gifs: {"gif": string, "header": string, "text"}[];
}

19
utils/gif-slider/gif-slider.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {GifSliderComponent} from "./gif-slider.component";
@NgModule({
imports: [
CommonModule, RouterModule
],
declarations: [
GifSliderComponent
],
providers:[
],
exports: [
GifSliderComponent
]
})
export class GifSliderModule { }