style, remove unnecessary components, nearly finished
This commit is contained in:
parent
64ba0e5090
commit
60b8264f44
GPG Key ID:
1688DA83D222D0B5
|
|
@ -1621,6 +1621,35 @@
|
|||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/angular-fontawesome": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.7.0.tgz",
|
||||
"integrity": "sha512-U+eHYbKuVYrrm9SnIfl+z+6KTiI4Pu+S2OKh34JIi7C1jHhDcrVeDZISP/cpswHY7LWWDOPYeKE+yuWFlL4aVw==",
|
||||
"requires": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.32",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
|
||||
"integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.32",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
|
||||
"integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.32"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
|
||||
"integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.32"
|
||||
}
|
||||
},
|
||||
"@istanbuljs/schema": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@
|
|||
"@angular/platform-browser": "~10.2.0",
|
||||
"@angular/platform-browser-dynamic": "~10.2.0",
|
||||
"@angular/router": "~10.2.0",
|
||||
"@fortawesome/angular-fontawesome": "^0.7.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.28",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.13.0",
|
||||
"rxjs": "~6.6.0",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ListPageComponent } from './list-page/list-page.component'
|
||||
import { ArticlePageComponent } from './article-page/article-page.component'
|
||||
import { ListComponent } from './list/list.component'
|
||||
import { ArticleComponent } from './article/article.component'
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ListPageComponent
|
||||
redirectTo: '/list',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: ListPageComponent
|
||||
component: ListComponent
|
||||
},
|
||||
{
|
||||
path: 'article',
|
||||
component: ArticlePageComponent
|
||||
component: ArticleComponent
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<div class="container flex-row">
|
||||
<div class="sidebar flex-col">
|
||||
<menu>
|
||||
<div class="logo">
|
||||
<img src="" alt="Trinidad Wiseman">
|
||||
<i>proovitöö</i>
|
||||
<div class="page-wrapper flex-col">
|
||||
<div class="page-container flex-row">
|
||||
<div class="sidebar flex-col">
|
||||
<div class="menu">
|
||||
<a class="logo" routerLink="/">
|
||||
<img src="/assets/images/logo.svg" alt="Trinidad Wiseman">
|
||||
<i>proovitöö</i>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="#" routerLink="/list" routerLinkActive="active">Nimekiri</a></li>
|
||||
<li><a href="#" routerLink="/article" routerLinkActive="active">Artikkel</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#" routerLink="/list" routerLinkActive="active">Nimekiri</a></li>
|
||||
<li><a href="#" routerLink="/article" routerLinkActive="active">Artikkel</a></li>
|
||||
</ul>
|
||||
</menu>
|
||||
</div>
|
||||
<div class="content flex-col">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<div class="page-content flex-col">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
.sidebar
|
||||
width: 300px
|
||||
flex-shrink: 0
|
||||
flex-grow: 0
|
||||
font-family: Booster
|
||||
|
||||
.menu
|
||||
width: 300px
|
||||
flex-shrink: 0
|
||||
flex-grow: 0
|
||||
font-family: Booster
|
||||
|
||||
.logo
|
||||
display: block
|
||||
text-align: center
|
||||
color: #333
|
||||
text-decoration: none
|
||||
font-style: italic
|
||||
margin: 0 auto 20px
|
||||
padding: 0 35px
|
||||
|
||||
.logo img
|
||||
display: block
|
||||
width: 100%
|
||||
transition: -webkit-transform .25s
|
||||
transition: transform .25s
|
||||
transition: transform .25s,-webkit-transform .25s
|
||||
margin: 0 0 5px
|
||||
|
||||
.logo:hover img
|
||||
-webkit-transform: scale3d(1.1,1.1,1)
|
||||
transform: scale3d(1.1,1.1,1)
|
||||
|
|
@ -4,21 +4,18 @@ import { HttpClientModule } from '@angular/common/http';
|
|||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { ArticlePageComponent } from './article-page/article-page.component';
|
||||
import { ArticleComponent } from './article/article.component';
|
||||
import { ListPageComponent } from './list-page/list-page.component';
|
||||
import { ListComponent } from './list/list.component';
|
||||
import { ListPaginateComponent } from './list-paginate/list-paginate.component';
|
||||
import { ListService } from './list.service';
|
||||
import { GenderPipe } from './gender.pipe';
|
||||
import { CustomSortPipe } from './custom-sort.pipe';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ArticlePageComponent,
|
||||
ArticleComponent,
|
||||
ListPageComponent,
|
||||
ListComponent,
|
||||
ListPaginateComponent,
|
||||
GenderPipe,
|
||||
|
|
@ -28,6 +25,7 @@ import { CustomSortPipe } from './custom-sort.pipe';
|
|||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
FontAwesomeModule,
|
||||
],
|
||||
providers: [
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<app-article></app-article>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ArticlePageComponent } from './article-page.component';
|
||||
|
||||
describe('ArticlePageComponent', () => {
|
||||
let component: ArticlePageComponent;
|
||||
let fixture: ComponentFixture<ArticlePageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ArticlePageComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ArticlePageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
// This is a router component for the article.
|
||||
|
||||
@Component({
|
||||
selector: 'app-article-page',
|
||||
templateUrl: './article-page.component.html',
|
||||
styleUrls: ['./article-page.component.styl']
|
||||
})
|
||||
export class ArticlePageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
<h1>{{ article.title }}</h1>
|
||||
<h2>{{ article.title }}</h2>
|
||||
<div class="intro" [innerHTML]="article.intro"></div>
|
||||
<ng-container *ngIf="article.images.length">
|
||||
<ng-container *ngFor="let image of article.images">
|
||||
<div class="image-wrapper">
|
||||
<img src="{{ image.medium }}" alt="{{ image.alt }}" title="{{ image.title }}">
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="image-wrapper">
|
||||
<img src="{{ article.images[0].medium }}">
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="content-wrapper" [innerHTML]="article.body"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
.intro
|
||||
font-weight: 900
|
||||
|
||||
.image-wrapper
|
||||
padding-bottom: 60%
|
||||
position: relative
|
||||
height: auto
|
||||
width: 100%
|
||||
|
||||
.image-wrapper img
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -1 +0,0 @@
|
|||
<app-list [page]="page"></app-list>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ListPageComponent } from './list-page.component';
|
||||
|
||||
describe('ListPageComponent', () => {
|
||||
let component: ListPageComponent;
|
||||
let fixture: ComponentFixture<ListPageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ListPageComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ListPageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
// This is a router component for the list of people.
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-page',
|
||||
templateUrl: './list-page.component.html',
|
||||
styleUrls: ['./list-page.component.styl']
|
||||
})
|
||||
export class ListPageComponent implements OnInit {
|
||||
public page = 1;
|
||||
|
||||
constructor(private route: ActivatedRoute) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.queryParams
|
||||
.subscribe((params) => {
|
||||
this.page = +(params.page || 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<a (click)="navigate(page - 1)"><</a>
|
||||
<fa-icon (click)="navigate(page - 1)" [icon]="faChevronLeft"></fa-icon>
|
||||
<a *ngFor="let npage of pageNums" (click)="navigate(npage)" [ngClass]="{ 'active': page == npage }">
|
||||
{{npage}}
|
||||
</a>
|
||||
<a (click)="navigate(page + 1)">></a>
|
||||
<fa-icon (click)="navigate(page + 1)" [icon]="faChevronRight"></fa-icon>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
:host
|
||||
text-align: center
|
||||
margin: 20px 0
|
||||
font-family: Booster
|
||||
font-weight: 900
|
||||
font-size: 16x
|
||||
display: block
|
||||
|
||||
fa-icon, a
|
||||
color: #666
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 30px
|
||||
height: 30px
|
||||
text-align: center
|
||||
line-height: 35px
|
||||
border-radius: 30px
|
||||
margin: 0 5px
|
||||
cursor: pointer
|
||||
|
||||
a.active
|
||||
color: #ff57a2
|
||||
|
||||
a:hover
|
||||
box-shadow: inset 0 0 0 2px #666
|
||||
|
||||
fa-icon:first-child, fa-icon:last-child
|
||||
background: #ff57a2
|
||||
color: #fff
|
||||
font-size: 16px
|
||||
box-shadow: none
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-list-paginate',
|
||||
templateUrl: './list-paginate.component.html',
|
||||
|
|
@ -13,6 +16,9 @@ export class ListPaginateComponent {
|
|||
@Input()
|
||||
pages: number;
|
||||
|
||||
public faChevronRight = faChevronRight;
|
||||
public faChevronLeft = faChevronLeft;
|
||||
|
||||
constructor(private router: Router) { }
|
||||
|
||||
public get pageNums(): number[] {
|
||||
|
|
|
|||
|
|
@ -1,72 +1,78 @@
|
|||
<h1>Nimekiri</h1>
|
||||
<h2>Nimekiri</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<th (click)="setSort('firstname')" class="clickable">Eesnimi
|
||||
<ng-container *ngIf="sortBy === 'firstname';else default_sort">
|
||||
<ng-container [ngSwitch]="sortDir">
|
||||
<i *ngSwitchCase=-1>^</i>
|
||||
<i *ngSwitchCase=1>v</i>
|
||||
<i *ngSwitchDefault>|</i>
|
||||
<fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
|
||||
<fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
|
||||
<fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #default_sort><i>|</i></ng-template>
|
||||
<ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
|
||||
</th>
|
||||
<th (click)="setSort('surname')" class="clickable">Perekonnanimi
|
||||
<ng-container *ngIf="sortBy === 'surname';else default_sort">
|
||||
<ng-container [ngSwitch]="sortDir">
|
||||
<i *ngSwitchCase=-1>^</i>
|
||||
<i *ngSwitchCase=1>v</i>
|
||||
<i *ngSwitchDefault>|</i>
|
||||
<fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
|
||||
<fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
|
||||
<fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #default_sort><i>|</i></ng-template>
|
||||
<ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
|
||||
</th>
|
||||
<th (click)="setSort('sex')" class="clickable">Sugu
|
||||
<ng-container *ngIf="sortBy === 'sex';else default_sort">
|
||||
<ng-container [ngSwitch]="sortDir">
|
||||
<i *ngSwitchCase=-1>^</i>
|
||||
<i *ngSwitchCase=1>v</i>
|
||||
<i *ngSwitchDefault>|</i>
|
||||
<fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
|
||||
<fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
|
||||
<fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #default_sort><i>|</i></ng-template>
|
||||
<ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
|
||||
</th>
|
||||
<th (click)="setSort('date')" class="clickable">Sünnikuupäev
|
||||
<ng-container *ngIf="sortBy === 'date';else default_sort">
|
||||
<ng-container [ngSwitch]="sortDir">
|
||||
<i *ngSwitchCase=-1>^</i>
|
||||
<i *ngSwitchCase=1>v</i>
|
||||
<i *ngSwitchDefault>|</i>
|
||||
<fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
|
||||
<fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
|
||||
<fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #default_sort><i>|</i></ng-template>
|
||||
<ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
|
||||
</th>
|
||||
<th (click)="setSort('phone')" class="clickable">Telefon
|
||||
<ng-container *ngIf="sortBy === 'phone';else default_sort">
|
||||
<ng-container [ngSwitch]="sortDir">
|
||||
<i *ngSwitchCase=-1>^</i>
|
||||
<i *ngSwitchCase=1>v</i>
|
||||
<i *ngSwitchDefault>|</i>
|
||||
<fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
|
||||
<fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
|
||||
<fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #default_sort><i>|</i></ng-template>
|
||||
<ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
|
||||
</th>
|
||||
</thead>
|
||||
<ng-container *ngFor="let person of people | customSort:sortBy:sortDir | slice:startIndex:endIndex;">
|
||||
<tr (click)="selectPerson(person)">
|
||||
<tr (click)="selectPerson(person)" [ngClass]="{ 'active': selected == person }" class="clickable">
|
||||
<td>{{ person.firstname }}</td>
|
||||
<td>{{ person.surname }}</td>
|
||||
<td>{{ person.sex | gender }}</td>
|
||||
<td>{{ person.date * 1000 | date:'yyyy.MM.dd'}}</td>
|
||||
<td>{{ person.phone }}</td>
|
||||
</tr>
|
||||
<tr *ngIf="selected == person" colspan=10>
|
||||
<div class="person-info">
|
||||
<div class="person-image">
|
||||
<img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
|
||||
<tr *ngIf="selected == person">
|
||||
<td colspan=10>
|
||||
<div class="person-info">
|
||||
<div class="image">
|
||||
<div class="image-wrapper">
|
||||
<img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<p>{{ getPersonDetail(person) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person-detail" [innerHTML]=person.intro></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
table td, table th
|
||||
padding: 10px
|
||||
border-bottom: 1px solid #ccc
|
||||
|
||||
table tr:last-child td
|
||||
border-bottom: none
|
||||
|
||||
table th
|
||||
font-family: Booster
|
||||
color: #ff57a2
|
||||
text-transform: uppercase
|
||||
font-weight: 900
|
||||
text-align: left
|
||||
cursor: pointer
|
||||
|
||||
table tr.active td
|
||||
background: #ff57a2
|
||||
color: #fff
|
||||
|
||||
table tr.clickable:hover
|
||||
color: #ff57a2
|
||||
|
||||
table .person-info
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
|
||||
table .person-info .image
|
||||
height: auto
|
||||
width: 25%
|
||||
flex-shrink: 0
|
||||
|
||||
table .person-info .image-wrapper
|
||||
position: relative
|
||||
padding-bottom: 60%
|
||||
|
||||
table .person-info .image-wrapper img
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
table .person-info .detail
|
||||
padding: 0 0 0 20px
|
||||
|
||||
table p
|
||||
font-size: 16px
|
||||
margin: 0
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
import { Component, OnInit, SimpleChanges, Input } from '@angular/core';
|
||||
import { ListService } from '../list.service'
|
||||
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { IPerson } from '../person'
|
||||
|
||||
import { faSort } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faSortUp } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faSortDown } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
// This component is for listing the people
|
||||
|
||||
@Component({
|
||||
|
|
@ -17,14 +23,22 @@ export class ListComponent implements OnInit {
|
|||
public sortBy: string;
|
||||
public sortDir = 0;
|
||||
|
||||
@Input()
|
||||
public faSort = faSort;
|
||||
public faSortUp = faSortUp;
|
||||
public faSortDown = faSortDown;
|
||||
|
||||
public page = 1;
|
||||
public pages = 10;
|
||||
private perPage = 10;
|
||||
|
||||
constructor(private listService: ListService) { }
|
||||
constructor(private route: ActivatedRoute, private listService: ListService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.queryParams
|
||||
.subscribe((params) => {
|
||||
this.page = +(params.page || 1);
|
||||
});
|
||||
|
||||
this.getList();
|
||||
}
|
||||
|
||||
|
|
@ -53,6 +67,11 @@ export class ListComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
public getPersonDetail(person: IPerson): string {
|
||||
const str = person.intro.replace(/<.*?>/g, '');
|
||||
return (person.intro.length > 284) ? (str.substring(0, 284)) + '....' : (person.intro);
|
||||
}
|
||||
|
||||
private getList(): void {
|
||||
this.listService.getList().subscribe(
|
||||
(data) => this.people = data.list);
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="230.4 0 151.2 502" enable-background="new 230.4 0 151.2 502" xml:space="preserve">
|
||||
<g opacity="0.4">
|
||||
<circle fill="#31B672" cx="292.4" cy="383" r="8"/>
|
||||
<circle fill="#31B672" cx="265.4" cy="383" r="4.5"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="238.4" cy="383" r="8"/>
|
||||
<circle fill="#31B672" cx="373.6" cy="356" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="292.4" cy="356" r="8"/>
|
||||
<circle fill="#31B672" cx="373.5" cy="328.9" r="5.6"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="346.6" cy="328.9" r="8"/>
|
||||
<circle fill="#31B672" cx="292.4" cy="328.9" r="8"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="265.4" cy="328.9" r="10.1"/>
|
||||
<circle fill="#31B672" cx="265.4" cy="301.9" r="8"/>
|
||||
<circle fill="#31B672" cx="238.4" cy="274.9" r="8"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="265.4" cy="247.8" r="8"/>
|
||||
<circle fill="#31B672" cx="265.4" cy="220.8" r="5.6"/>
|
||||
<circle fill="#31B672" cx="318.8" cy="247.8" r="5.6"/>
|
||||
<circle fill="#31B672" cx="265.4" cy="193.8" r="4.5"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="346.6" cy="274.9" r="4.5"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="238.4" cy="193.8" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="265.4" cy="112.6" r="8"/>
|
||||
<circle fill="#31B672" cx="238.4" cy="112.6" r="8"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="238.4" cy="85.6" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="265.4" cy="58.6" r="8"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="265.4" cy="4.5" r="4.5"/>
|
||||
<path opacity="0.7" fill="#31B672" enable-background="new " d="M373.5,375.1c-3.6,0-6.6,2.4-7.6,5.7h-11.7 c-1-3.3-4-5.7-7.6-5.7c-4.4,0-8,3.5-8,8s3.5,8,8,8c3.6,0,6.6-2.4,7.6-5.7H366c1,3.3,4,5.7,7.6,5.7c4.4,0,8-3.5,8-8 C381.5,378.7,377.9,375.1,373.5,375.1z"/>
|
||||
<path fill="#31B672" d="M300.5,273.6c0-4.4-3.5-8-8-8s-8,3.5-8,8c0,3.6,2.4,6.6,5.7,7.6V293c-3.3,1-5.7,4-5.7,7.6c0,4.4,3.5,8,8,8 s8-3.5,8-8c0-3.6-2.4-6.6-5.7-7.6v-11.8C298,280.2,300.5,277.2,300.5,273.6z"/>
|
||||
<circle fill="#31B672" cx="319.5" cy="356" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="319.5" cy="301.9" r="8"/>
|
||||
<path opacity="0.4" fill="#31B672" enable-background="new " d="M238.4,174.7c4.4,0,8-3.5,8-8c0-1.3-0.3-2.7-1-3.8l16.2-16.2 c1.1,0.7,2.4,1,3.8,1c4.4,0,8-3.5,8-8s-3.5-8-8-8c-4.4,0-8,3.5-8,8c0,1.3,0.3,2.7,1,3.8l-16.2,16.2c-1.1-0.7-2.4-1-3.8-1 c-4.4,0-8,3.5-8,8C230.4,171,234.1,174.7,238.4,174.7z"/>
|
||||
</g>
|
||||
<g opacity="0.4">
|
||||
<circle fill="#31B672" cx="292.4" cy="409" r="4.5"/>
|
||||
<circle fill="#31B672" cx="346.7" cy="436.1" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="292.5" cy="436.1" r="8"/>
|
||||
<circle fill="#31B672" cx="373.6" cy="463.1" r="5.6"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="346.7" cy="463.1" r="8"/>
|
||||
<circle fill="#31B672" cx="292.5" cy="463.1" r="8"/>
|
||||
<circle opacity="0.4" fill="#31B672" enable-background="new " cx="265.4" cy="463.1" r="10.1"/>
|
||||
<circle fill="#31B672" cx="265.4" cy="490.1" r="8"/>
|
||||
<path opacity="0.7" fill="#31B672" enable-background="new " d="M346.6,417c-3.6,0-6.6-2.4-7.6-5.7h-11.8c-1,3.3-4,5.7-7.6,5.7 c-4.4,0-8-3.5-8-8s3.5-8,8-8c3.6,0,6.6,2.4,7.6,5.7h11.8c1-3.3,4-5.7,7.6-5.7c4.4,0,8,3.5,8,8C354.5,413.5,350.9,417,346.6,417z"/>
|
||||
<path fill="#31B672" d="M246.4,463.1c0,4.4-3.5,8-8,8c-4.4,0-8-3.5-8-8c0-3.6,2.4-6.6,5.7-7.6v-11.8c-3.3-1-5.7-4-5.7-7.6 c0-4.4,3.5-8,8-8c4.4,0,8,3.5,8,8c0,3.6-2.4,6.6-5.7,7.6v11.8C244,456.4,246.4,459.5,246.4,463.1z"/>
|
||||
<circle fill="#31B672" cx="319.6" cy="436.1" r="8"/>
|
||||
<circle opacity="0.7" fill="#31B672" enable-background="new " cx="319.6" cy="490.1" r="8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,53 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 241.6 394" enable-background="new 0 0 241.6 394" xml:space="preserve">
|
||||
<g opacity="0.37">
|
||||
<ellipse fill="#47B973" cx="235.3" cy="57.8" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="235.3" cy="32.6" rx="4.2" ry="4.2"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="235.3" cy="7.4" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="108.2" rx="7.4" ry="7.4"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="210" cy="57.8" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="184.6" cy="133.4" rx="5.3" ry="5.2"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="184.6" cy="108.2" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="184.6" cy="57.8" rx="7.4" ry="7.4"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="184.6" cy="32.6" rx="9.5" ry="9.4"/>
|
||||
<ellipse fill="#47B973" cx="159.3" cy="32.6" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="134" cy="7.4" rx="7.4" ry="7.4"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="108.7" cy="32.6" rx="7.4" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="83.4" cy="32.6" rx="5.3" ry="5.2"/>
|
||||
<ellipse fill="#47B973" cx="108.7" cy="82.4" rx="5.3" ry="5.2"/>
|
||||
<ellipse fill="#47B973" cx="58.1" cy="32.6" rx="4.2" ry="4.2"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="134" cy="108.2" rx="4.2" ry="4.2"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="58.1" cy="7.4" rx="7.4" ry="7.4"/>
|
||||
<path opacity="0.7" fill="#47B973" d="M227.8,133.4c0-3.4,2.3-6.2,5.3-7.1v-11c-3.1-0.9-5.3-3.7-5.3-7.1c0-4.1,3.3-7.4,7.4-7.4 c4.1,0,7.4,3.3,7.4,7.4c0,3.4-2.3,6.2-5.3,7.1v11c3.1,0.9,5.3,3.7,5.3,7.1c0,4.1-3.3,7.4-7.4,7.4 C231.2,140.8,227.8,137.5,227.8,133.4z"/>
|
||||
<path fill="#47B973" d="M184.6,14.8c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4c3.4,0,6.2,2.2,7.1,5.3h11 c0.9-3.1,3.8-5.3,7.1-5.3c4.1,0,7.4,3.3,7.4,7.4c0,4.1-3.3,7.4-7.4,7.4c-3.4,0-6.2-2.2-7.1-5.3h-11C190.9,12.6,188,14.8,184.6,14.8 z"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="83" rx="7.4" ry="7.4"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="159.3" cy="83" rx="7.4" ry="7.4"/>
|
||||
<path opacity="0.4" fill="#47B973" d="M40.2,7.4c0,4.1-3.3,7.4-7.4,7.4c-1.3,0-2.5-0.3-3.6-0.9L14,29.1c0.6,1.1,0.9,2.3,0.9,3.5 c0,4.1-3.3,7.4-7.4,7.4C3.3,40,0,36.7,0,32.6c0-4.1,3.3-7.4,7.4-7.4c1.3,0,2.5,0.3,3.6,0.9L26.2,11c-0.6-1.1-0.9-2.3-0.9-3.5 c0-4.1,3.3-7.4,7.4-7.4C36.9,0,40.2,3.4,40.2,7.4z"/>
|
||||
</g>
|
||||
<g opacity="0.37">
|
||||
<ellipse fill="#47B973" cx="185.6" cy="158.8" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="158.8" rx="4.1" ry="4.2"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="234.5" cy="158.8" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="136.7" cy="184.1" rx="7.2" ry="7.4"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="185.6" cy="184.1" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="112.2" cy="209.4" rx="5.1" ry="5.3"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="136.7" cy="209.4" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="185.6" cy="209.4" rx="7.2" ry="7.4"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="210" cy="209.4" rx="9.1" ry="9.5"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="234.7" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="234.5" cy="260" rx="7.2" ry="7.4"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="210" cy="285.3" rx="7.2" ry="7.4"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="310.6" rx="5.1" ry="5.3"/>
|
||||
<ellipse fill="#47B973" cx="161.7" cy="285.3" rx="5.1" ry="5.3"/>
|
||||
<ellipse fill="#47B973" cx="210" cy="335.9" rx="4.1" ry="4.2"/>
|
||||
<ellipse opacity="0.4" fill="#47B973" cx="136.7" cy="260" rx="4.1" ry="4.2"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="234.5" cy="335.9" rx="7.2" ry="7.4"/>
|
||||
<path opacity="0.7" fill="#47B973" d="M112.2,166.2c3.3,0,6-2.3,6.9-5.3h10.7c0.9,3.1,3.6,5.3,6.9,5.3c4,0,7.2-3.3,7.2-7.4 c0-4.1-3.2-7.4-7.2-7.4c-3.3,0-6,2.3-6.9,5.3h-10.7c-0.9-3.1-3.6-5.3-6.9-5.3c-4,0-7.2,3.3-7.2,7.4 C105,162.9,108.2,166.2,112.2,166.2z"/>
|
||||
<path fill="#47B973" d="M227.3,209.4c0,4.1,3.2,7.4,7.2,7.4c4,0,7.2-3.3,7.2-7.4c0-3.4-2.2-6.2-5.2-7.1v-11c3-0.9,5.2-3.8,5.2-7.1 c0-4.1-3.2-7.4-7.2-7.4c-4,0-7.2,3.3-7.2,7.4c0,3.4,2.2,6.2,5.2,7.1v11C229.4,203.2,227.3,206,227.3,209.4z"/>
|
||||
<ellipse fill="#47B973" cx="161.1" cy="184.1" rx="7.2" ry="7.4"/>
|
||||
<ellipse opacity="0.7" fill="#47B973" cx="161.1" cy="234.7" rx="7.2" ry="7.4"/>
|
||||
<path opacity="0.4" fill="#47B973" d="M234.4,353.8c-4,0-7.2,3.3-7.2,7.4c0,1.3,0.3,2.5,0.9,3.6l-14.7,15.2c-1-0.6-2.2-0.9-3.4-0.9 c-4,0-7.2,3.3-7.2,7.4c0,4.1,3.2,7.4,7.2,7.4c4,0,7.2-3.3,7.2-7.4c0-1.3-0.3-2.5-0.9-3.6l14.7-15.2c1,0.6,2.2,0.9,3.4,0.9 c4,0,7.2-3.3,7.2-7.4C241.6,357.2,238.4,353.8,234.4,353.8z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="275.6px" height="83px" viewBox="0 0 275.6 83" enable-background="new 0 0 275.6 83" xml:space="preserve">
|
||||
<path fill="#16C473" d="M89.8,48.2c2,0.7,3,1.6,3,2.8c0,0.4-0.2,1.1-0.5,2.2l-8.5,24.4c-0.1,0.2-0.2,0.5-0.3,0.7 c-0.1,0.3-0.5,0.7-1.2,1.2c-0.6,0.5-1.4,0.7-2.2,0.7c-0.9,0-1.6-0.2-2.2-0.7c-0.6-0.5-1.1-1-1.3-1.4l-5.2-15.2 c-3.3,9.6-4.9,14.5-5,14.7c-0.1,0.2-0.2,0.4-0.4,0.7c-0.2,0.3-0.4,0.6-0.7,0.9c-0.7,0.7-1.5,1-2.4,1c-0.9,0-1.7-0.2-2.3-0.7 c-0.6-0.4-1-0.9-1.2-1.3l-0.3-0.7l-8.5-24.4c-0.3-1-0.5-1.7-0.5-2.2c0-1.2,1-2.1,3-2.8c0.9-0.3,1.6-0.4,2.3-0.4 c0.7,0,1.2,0.2,1.6,0.7c0.4,0.5,0.7,1.2,1,2.2l4.8,14.7l4.8-14.5c0.4-1.2,1.2-2.1,2.2-2.6c0.5-0.2,1.1-0.3,1.8-0.3 c0.7,0,1.4,0.2,2.1,0.7c0.6,0.5,1.1,1,1.2,1.4l5.1,15.3l4.8-14.8c0.2-0.7,0.4-1.2,0.6-1.5c0.1-0.3,0.4-0.6,0.8-0.9 c0.4-0.3,0.9-0.5,1.5-0.5C88.4,47.8,89.1,47.9,89.8,48.2z"/>
|
||||
<path fill="#16C473" d="M96.5,51.9c0-0.7,0-1.2,0.1-1.5c0-0.3,0.2-0.7,0.4-1.2c0.4-0.8,1.6-1.2,3.4-1.2c2.1,0,3.3,0.5,3.7,1.6 c0.1,0.5,0.2,1.3,0.2,2.3v24.5c0,0.7,0,1.2-0.1,1.5c0,0.3-0.2,0.7-0.4,1.1c-0.4,0.8-1.6,1.2-3.4,1.2c-2.1,0-3.3-0.6-3.6-1.7 c-0.2-0.5-0.3-1.2-0.3-2.2V51.9z"/>
|
||||
<path fill="#16C473" d="M109.7,75.8c-0.8-0.9-1.1-1.8-1.1-2.5c0-0.7,0.6-1.7,1.9-3c0.7-0.7,1.5-1.1,2.3-1.1c0.8,0,2,0.7,3.4,2.2 c0.4,0.5,1,1,1.8,1.4c0.8,0.5,1.5,0.7,2.1,0.7c2.7,0,4.1-1.1,4.1-3.3c0-0.7-0.4-1.2-1.1-1.7c-0.7-0.5-1.7-0.8-2.8-1 c-1.1-0.2-2.3-0.5-3.6-1c-1.3-0.5-2.5-1-3.6-1.6c-1.1-0.6-2-1.6-2.8-2.9c-0.7-1.3-1.1-2.9-1.1-4.8c0-2.6,1-4.8,2.9-6.8 c1.9-1.9,4.5-2.9,7.9-2.9c1.8,0,3.4,0.2,4.8,0.7c1.5,0.5,2.5,0.9,3,1.4l1.1,0.8c0.9,0.9,1.4,1.6,1.4,2.2c0,0.6-0.4,1.4-1.1,2.4 c-1,1.5-2,2.2-3.1,2.2c-0.6,0-1.4-0.3-2.3-0.9c-0.1-0.1-0.3-0.2-0.5-0.4c-0.3-0.2-0.5-0.4-0.7-0.6c-0.6-0.4-1.4-0.6-2.4-0.6 c-1,0-1.7,0.2-2.4,0.7c-0.6,0.5-0.9,1.1-0.9,1.9c0,0.8,0.4,1.5,1.1,2c0.7,0.5,1.7,0.8,2.8,1c1.1,0.2,2.3,0.4,3.7,0.8 c1.3,0.4,2.5,0.8,3.7,1.3c1.1,0.5,2,1.4,2.8,2.8c0.7,1.3,1.1,2.9,1.1,4.8c0,1.9-0.4,3.6-1.1,5c-0.8,1.5-1.8,2.6-3,3.4 c-2.4,1.6-4.9,2.3-7.6,2.3c-1.4,0-2.7-0.2-3.9-0.5c-1.2-0.3-2.2-0.8-3-1.3c-1.6-0.9-2.6-1.9-3.3-2.7L109.7,75.8z"/>
|
||||
<path fill="#16C473" d="M144,72.5h13.6c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.5,3.3-1.6,3.6 c-0.5,0.2-1.3,0.3-2.3,0.3h-17.4c-2.1,0-3.3-0.6-3.6-1.7c-0.2-0.5-0.3-1.2-0.3-2.2V51.9c0-1.5,0.3-2.5,0.8-3.1 c0.6-0.5,1.6-0.8,3.2-0.8h17.4c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.5,3.3-1.6,3.6 c-0.5,0.2-1.3,0.3-2.3,0.3H144v4.4h8.7c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.6,3.3-1.7,3.6 c-0.5,0.2-1.3,0.3-2.3,0.3H144V72.5z"/>
|
||||
<path fill="#16C473" d="M199.9,49.3c0.2,0.4,0.4,0.8,0.4,1.2c0,0.4,0.1,0.9,0.1,1.5v24.4c0,2-0.6,3.2-1.7,3.6 c-0.6,0.2-1.3,0.3-2.1,0.3s-1.5-0.1-2-0.2c-0.5-0.1-0.9-0.3-1.1-0.5c-0.3-0.2-0.5-0.5-0.6-0.9c-0.1-0.5-0.2-1.3-0.2-2.3V61.6 c-0.7,0.9-1.8,2.4-3.2,4.3c-1.4,2-2.3,3.2-2.7,3.7c-0.4,0.5-0.6,0.8-0.8,1c-0.1,0.2-0.5,0.5-1.1,0.8c-0.6,0.3-1.2,0.5-1.9,0.5 c-0.7,0-1.3-0.2-1.8-0.5c-0.5-0.3-0.9-0.6-1.2-0.9l-0.4-0.5c-0.6-0.7-1.7-2.3-3.5-4.7c-1.7-2.4-2.7-3.7-2.8-3.9v14.8 c0,0.7,0,1.2-0.1,1.5c0,0.3-0.2,0.7-0.4,1.1c-0.4,0.8-1.6,1.2-3.4,1.2c-1.8,0-2.9-0.4-3.3-1.2c-0.2-0.4-0.4-0.8-0.4-1.1 c0-0.4-0.1-0.9-0.1-1.6V51.9c0-0.7,0-1.2,0.1-1.5c0-0.3,0.2-0.7,0.4-1.2c0.4-0.8,1.6-1.1,3.4-1.1c0.8,0,1.5,0.1,2,0.3 c0.6,0.2,0.9,0.4,1.1,0.6l0.3,0.3l10,13.1c5-6.6,8.3-11,10-13.1c0.5-0.8,1.7-1.2,3.5-1.2C198.4,48.1,199.5,48.5,199.9,49.3z"/>
|
||||
<path fill="#16C473" d="M223,50.3l11.9,24.6c0.5,1,0.7,1.7,0.7,2.2c0,1.1-0.9,2-2.6,2.9c-1,0.5-1.8,0.7-2.4,0.7s-1-0.1-1.4-0.4 c-0.4-0.3-0.6-0.5-0.8-0.8c-0.2-0.3-0.4-0.7-0.7-1.3l-2.3-4.8h-12.2l-2.3,4.8c-0.3,0.6-0.5,1-0.7,1.3c-0.2,0.3-0.4,0.5-0.8,0.8 c-0.4,0.3-0.8,0.4-1.4,0.4s-1.4-0.3-2.4-0.7c-1.7-0.8-2.6-1.8-2.6-2.8c0-0.5,0.2-1.2,0.7-2.2l11.9-24.6c0.3-0.7,0.8-1.2,1.5-1.6 c0.7-0.4,1.4-0.6,2.1-0.6C221.1,48,222.3,48.8,223,50.3z M219.5,60.9l-2.9,6h5.9L219.5,60.9z"/>
|
||||
<g>
|
||||
<path fill="#16C473" d="M269.8,68.3v-10c0-0.4,0.2-0.7,0.4-0.9c1.5-1.2,2.4-3,2.2-5.1c-0.3-2.4-2.6-4.7-5-5 c-3.4-0.4-6.3,2.3-6.3,5.6c0,1.8,0.9,3.5,2.2,4.5c0.3,0.2,0.4,0.6,0.4,0.9v9.2c0,0.2-0.3,0.3-0.4,0.2l-10.8-10.8 c-0.4-0.4-0.5-0.9-0.3-1.4c0.4-1.2,0.5-2.4,0.3-3.8c-0.5-3.7-3.5-6.7-7.2-7.1c-5.4-0.6-10,3.9-9.3,9.3c0.4,3.7,3.4,6.7,7.1,7.2 c1.3,0.2,2.6,0.1,3.8-0.3c0.4-0.1,1.1,0,1.4,0.3l11.5,11.5c0.4,0.4,0.6,1,0.5,1.6c-0.2,0.9-0.2,2,0.1,3c0.7,2.5,2.8,4.5,5.4,4.9 c4.2,0.7,7.9-2.6,7.9-6.7c0-2.3-1.2-4.3-2.9-5.6C270.1,69.5,269.8,68.9,269.8,68.3z"/>
|
||||
<circle fill="#16C473" cx="244.2" cy="75.4" r="5.1"/>
|
||||
</g>
|
||||
<path fill="#405075" d="M31.8,4.4c-0.4-0.2-1.1-0.3-2.1-0.3H5.3c-1,0-1.7,0.1-2.2,0.4C2.7,4.7,2.4,5,2.3,5.4C2.1,5.9,2,6.5,2,7.3 C2,8,2.1,8.6,2.3,9.1c0.1,0.5,0.4,0.8,0.9,1c0.4,0.2,1.1,0.3,2.1,0.3h8.5v22.1c0,0.7,0,1.2,0.1,1.5c0,0.3,0.2,0.7,0.4,1.1 c0.2,0.4,0.6,0.7,1.1,0.9c0.5,0.2,1.3,0.3,2.2,0.3c0.9,0,1.6-0.1,2.2-0.3c0.6-0.2,0.9-0.5,1.2-0.9c0.2-0.4,0.4-0.8,0.4-1.1 c0-0.3,0.1-0.8,0.1-1.5V10.5h8.4c1,0,1.7-0.1,2.2-0.4c0.4-0.2,0.6-0.5,0.7-0.9c0.1-0.5,0.2-1.1,0.2-1.8c0-0.8-0.1-1.4-0.2-1.9 C32.6,5,32.3,4.6,31.8,4.4z"/>
|
||||
<path fill="#405075" d="M70.8,4.1c-1.9,0-3,0.4-3.4,1.2C67.1,5.8,67,6.2,67,6.5c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1,0.1,1.8,0.3,2.2 c0.4,1.1,1.6,1.7,3.6,1.7c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.1c0-0.3,0.1-0.8,0.1-1.5V8.1c0-1-0.1-1.8-0.2-2.3 C74.1,4.7,72.9,4.1,70.8,4.1z"/>
|
||||
<path fill="#405075" d="M125.3,4.1c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.2c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1,0.1,1.8,0.3,2.2 c0.4,1.1,1.6,1.7,3.6,1.7c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.1c0-0.3,0.1-0.8,0.1-1.5V8.1c0-1-0.1-1.8-0.2-2.3 C128.5,4.7,127.3,4.1,125.3,4.1z"/>
|
||||
<path fill="#405075" d="M159,8.7c-3.2-3.1-7-4.6-11.2-4.6l-8.1,0c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.1 c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1.3,0.2,2.2,0.5,2.8c0.4,0.7,1.6,1.1,3.3,1.1h8.1c4.5,0,8.3-1.6,11.5-4.8c3.2-3.2,4.7-7,4.7-11.5 C163.9,15.6,162.3,11.8,159,8.7z M153.5,26.2c-1.7,1.6-3.6,2.4-5.7,2.4h-4.3V11.9h4.2c2.2,0,4.2,0.8,5.8,2.4c1.7,1.6,2.5,3.6,2.5,6 C156.1,22.7,155.2,24.7,153.5,26.2z"/>
|
||||
<path fill="#405075" d="M184.5,6.4c-0.8-1.5-1.9-2.3-3.5-2.3c-0.7,0-1.4,0.2-2.1,0.6c-0.7,0.4-1.2,1-1.5,1.6L165.5,31 c-0.5,1-0.7,1.7-0.7,2.2c0,1.1,0.9,2,2.6,2.8c1,0.5,1.8,0.7,2.4,0.7s1-0.1,1.4-0.4c0.4-0.3,0.6-0.6,0.8-0.8c0.2-0.3,0.4-0.7,0.7-1.3 l2.3-4.8h12.2l2.3,4.8c0.3,0.6,0.5,1,0.7,1.3c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.3,0.8,0.4,1.4,0.4s1.4-0.2,2.4-0.7 c1.7-0.9,2.6-1.8,2.6-2.9c0-0.5-0.2-1.2-0.7-2.2L184.5,6.4z M178,23l2.9-6l3,6H178z"/>
|
||||
<path fill="#405075" d="M224.2,8.7c-3.2-3.1-7-4.6-11.2-4.6l-8.1,0c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.1 c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1.3,0.2,2.2,0.5,2.8c0.4,0.7,1.6,1.1,3.3,1.1h8.1c4.5,0,8.3-1.6,11.5-4.8c3.2-3.2,4.7-7,4.7-11.5 C229,15.6,227.4,11.8,224.2,8.7z M218.7,26.2c-1.7,1.6-3.6,2.4-5.7,2.4h-4.3V11.9h4.2c2.2,0,4.2,0.8,5.8,2.4c1.7,1.6,2.5,3.6,2.5,6 C221.2,22.7,220.4,24.7,218.7,26.2z"/>
|
||||
<g>
|
||||
<circle fill="#405075" cx="108.5" cy="9.5" r="4.3"/>
|
||||
<path fill="#405075" d="M109.1,23.9c-0.9-0.1-1.8,0-2.6,0.2c-0.8,0.2-1.6,0-2.2-0.6L93,12.2c-0.5-0.5-0.8-1.3-0.7-2.1 c0.1-0.8,0-1.6-0.2-2.5c-0.7-2.3-2.7-4.1-5.1-4.4c-3.9-0.6-7.3,2.4-7.3,6.3c0,2,0.9,3.8,2.4,5c0.6,0.4,0.9,1.1,0.9,1.8v11.3 c0,0.4-0.1,0.7-0.4,1c-1,1-1.5,2.4-1.3,4c0.3,2.2,2,3.9,4.2,4.1c2.9,0.3,5.3-1.9,5.3-4.8c0-1.3-0.5-2.4-1.3-3.3 c-0.3-0.3-0.5-0.7-0.5-1.1V17.4c0-0.2,0.3-0.4,0.5-0.2L100,27.8c0.6,0.6,0.8,1.5,0.6,2.3c-0.2,0.8-0.3,1.6-0.2,2.5 c0.3,3.9,3.5,7.1,7.5,7.4c4.8,0.3,8.8-3.7,8.5-8.5C116.2,27.5,113,24.2,109.1,23.9z"/>
|
||||
</g>
|
||||
<path fill="#405075" d="M59.8,21c0.8-1.5,1.1-3.3,1.1-5.2c0-1.9-0.4-3.6-1.1-5.2c-0.8-1.6-1.7-2.8-3-3.7c-2.4-1.9-5-2.8-7.5-2.8 h-9.4c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.2C36,6.8,36,7.3,36,8v24.5c0,1,0.1,1.8,0.3,2.3c0.4,1.1,1.6,1.6,3.6,1.6 c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.2c0-0.3,0.1-0.8,0.1-1.5v-5H46l7.9,7.3c0.8,0.7,1.4,1.1,1.8,1.3c1.1,0.5,2.3,0,3.7-1.5 c1.3-1.4,1.8-2.5,1.5-3.3c-0.2-0.5-0.3-0.8-0.6-1.1c-0.2-0.3-0.6-0.6-1.1-1.1l-3.8-3.5c0.5-0.3,0.9-0.6,1.4-1 C58.1,23.8,59.1,22.6,59.8,21z M52,18.8c-0.9,0.6-1.7,1-2.6,1h-5.6v-7.8h5.5c0.9,0,1.8,0.3,2.6,1c0.9,0.7,1.3,1.6,1.3,2.9 S52.8,18.1,52,18.8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -0,0 +1,60 @@
|
|||
@font-face
|
||||
font-family: Booster
|
||||
src: url(/assets/fonts/booster/325738_1_0.eot)
|
||||
src: url(/assets/fonts/booster/325738_1_0.eot?#iefix) format("embedded-opentype"),
|
||||
url(/assets/fonts/booster/325738_1_0.woff2) format("woff2"),
|
||||
url(/assets/fonts/booster/325738_1_0.woff) format("woff"),
|
||||
url(/assets/fonts/booster/325738_1_0.ttf) format("truetype")
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
|
||||
@font-face
|
||||
font-family: Booster
|
||||
src: url(/assets/fonts/booster/325738_2_0.eot);
|
||||
src: url(/assets/fonts/booster/325738_2_0.eot?#iefix) format("embedded-opentype"),
|
||||
url(/assets/fonts/booster/325738_2_0.woff2) format("woff2"),
|
||||
url(/assets/fonts/booster/325738_2_0.woff) format("woff"),
|
||||
url(/assets/fonts/booster/325738_2_0.ttf) format("truetype")
|
||||
font-style: normal
|
||||
font-weight: 500
|
||||
|
||||
@font-face
|
||||
font-family: Booster
|
||||
src: url(/assets/fonts/booster/325738_5_0.eot)
|
||||
src: url(/assets/fonts/booster/325738_5_0.eot?#iefix) format("embedded-opentype"),
|
||||
url(/assets/fonts/booster/325738_5_0.woff2) format("woff2"),
|
||||
url(/assets/fonts/booster/325738_5_0.woff) format("woff"),
|
||||
url(/assets/fonts/booster/325738_5_0.ttf) format("truetype");
|
||||
font-style: normal
|
||||
font-weight: 700
|
||||
|
||||
@font-face
|
||||
font-family: Booster
|
||||
src: url(/assets/fonts/booster/325738_3_0.eot)
|
||||
src: url(/assets/fonts/booster/325738_3_0.eot?#iefix) format("embedded-opentype"),
|
||||
url(/assets/fonts/booster/325738_3_0.woff2) format("woff2"),
|
||||
url(/assets/fonts/booster/325738_3_0.woff) format("woff"),
|
||||
url(/assets/fonts/booster/325738_3_0.ttf) format("truetype")
|
||||
font-style: normal
|
||||
font-weight: 900
|
||||
|
||||
@font-face
|
||||
font-family: 'Open Sans'
|
||||
src: url(/assets/fonts/open-sans/opensans-bold-webfont.woff2) format("woff2"),
|
||||
url(/assets/fonts/open-sans/opensans-bold-webfont.woff) format("woff");
|
||||
font-weight: 700
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: 'Open Sans'
|
||||
src: url(/assets/fonts/open-sans/opensans-regular-webfont.woff2) format("woff2"),
|
||||
url(/assets/fonts/open-sans/opensans-regular-webfont.woff) format("woff")
|
||||
font-weight: 400
|
||||
font-style: normal
|
||||
|
||||
@font-face
|
||||
font-family: 'Open Sans'
|
||||
src: url(/assets/fonts/open-sans/opensans-light-webfont.woff2) format("woff2"),
|
||||
url(/assets/fonts/open-sans/opensans-light-webfont.woff) format("woff")
|
||||
font-weight: 100
|
||||
font-style: normal
|
||||
|
|
@ -1 +1,91 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
@import('/assets/stylus/_fonts.styl')
|
||||
|
||||
html, body
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
body
|
||||
background: #3A3D57
|
||||
background-image: url(/assets/images/bg-deco-left.svg), url(/assets/images/bg-deco-right.svg)
|
||||
background-repeat: no-repeat
|
||||
background-position: left bottom, right top
|
||||
background-size: 150px, 250px
|
||||
background-attachment: fixed
|
||||
font-family: Open Sans
|
||||
line-height: 1
|
||||
|
||||
p
|
||||
line-height: 150%
|
||||
font-size: 24px
|
||||
margin: 15px 0
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
margin: 60px 0
|
||||
font-family: Booster
|
||||
font-weight: 900
|
||||
text-transform: uppercase
|
||||
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
width: 100%
|
||||
|
||||
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child
|
||||
margin-top: 0
|
||||
|
||||
h2
|
||||
font-weight: 700
|
||||
font-size: 48px
|
||||
color: #14cc76
|
||||
text-align: center
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
.clickable
|
||||
cursor: pointer
|
||||
|
||||
.flex-row, .flex-col
|
||||
display: flex
|
||||
|
||||
.flex-row
|
||||
flex-direction: row
|
||||
|
||||
.flex-col
|
||||
flex-direction: column
|
||||
|
||||
ul a
|
||||
display: block
|
||||
text-decoration: none
|
||||
line-height: 120%
|
||||
color: #333
|
||||
position: relative
|
||||
text-align: right
|
||||
overflow: hidden
|
||||
font-size: 24px
|
||||
padding: 15px 35px
|
||||
text-transform: uppercase
|
||||
|
||||
ul a.active, ul a:hover
|
||||
color: #14cc76
|
||||
font-weight: 700
|
||||
|
||||
.page-wrapper
|
||||
max-width: 1200px
|
||||
min-height: 100%
|
||||
margin: 0 auto
|
||||
|
||||
.page-container
|
||||
padding: 60px 0
|
||||
background-color: #efefef
|
||||
flex-grow: 1
|
||||
|
||||
.page-content
|
||||
flex-grow: 1
|
||||
padding: 0 60px
|
||||
position: relative
|
||||
|
||||
app-article p
|
||||
margin: 40px 0 !important
|
||||
|
|
|
|||
Loading…
Reference in New Issue