86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
import {Component} from '@angular/core';
|
|
import {Breadcrumb} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.component';
|
|
import {member, team} from './team';
|
|
|
|
@Component({
|
|
selector: 'team',
|
|
template: `
|
|
<div>
|
|
<div class="uk-section">
|
|
<div class="uk-margin-large-left uk-margin-medium-bottom">
|
|
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
|
</div>
|
|
<div class="uk-container">
|
|
<h2 class="uk-text-center">Meet The Team</h2>
|
|
<div class="uk-padding-small">
|
|
<div class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1 uk-margin-large-top" uk-grid>
|
|
<div *ngFor="let member of team;" class="uk-card uk-card-flip" [class.uk-active]="member.active === true">
|
|
<div class="uk-card-flip-inner">
|
|
<div class="front">
|
|
<div class="uk-padding">
|
|
<div class="uk-text-center">
|
|
<img [src]="'assets/graph-assets/about/team/' + member.photo">
|
|
<div class="uk-margin-medium-top role">
|
|
<h6 class="portal-color">{{member.name}}</h6>
|
|
<div class="uk-text-muted">
|
|
{{member.role}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-position-bottom-center uk-margin-bottom">
|
|
<a class="portal-link" (click)="member.active = true">Learn more</a>
|
|
</div>
|
|
</div>
|
|
<div class="back">
|
|
<div class="uk-padding">
|
|
<div class="uk-text-center">
|
|
<img [src]="'assets/graph-assets/about/team/' + member.photo">
|
|
<div class="uk-margin-medium-top">
|
|
<h6 class="uk-text-center portal-color">{{member.name}}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="uk-margin-small-bottom">
|
|
<span class="uk-text-bold">Role: </span> {{member.role}}
|
|
</div>
|
|
<div class="uk-margin-small-bottom">
|
|
<span class="uk-text-bold">Affiliation: </span> {{member.affiliation}}
|
|
</div>
|
|
<div>
|
|
<span class="uk-text-bold">Country: </span> {{member.country}}
|
|
</div>
|
|
<!-- <div>
|
|
<span class="uk-text-bold">Responsibilities: </span> {{member.responsibilities}}
|
|
</div>-->
|
|
</div>
|
|
<div class="uk-position-bottom-center uk-margin-bottom">
|
|
<a class="portal-link" (click)="member.active = false">Back</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styleUrls: ['team.component.css']
|
|
})
|
|
export class TeamComponent {
|
|
public team: member[] = team;
|
|
public breadcrumbs: Breadcrumb[] = [
|
|
{
|
|
name: 'home',
|
|
route: '/'
|
|
},
|
|
{
|
|
name: 'about',
|
|
route: '/about'
|
|
},
|
|
{
|
|
name: 'Team'
|
|
}
|
|
];
|
|
}
|