Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit 802f7cb

Browse files
ladyleetladyleet
authored
Merge pull request #202 from fredrik-lundin/master
feat(teams page): Design a teams page
2 parents b82118f + f59b1bc commit 802f7cb

19 files changed

+378
-9
lines changed

‎src/app/team/member.component.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<mat-card>
2+
<img mat-card-image [src]="member.avatar" />
3+
<mat-card-header>
4+
<mat-card-title-group>
5+
<mat-card-title>{{member.name}}</mat-card-title>
6+
<mat-card-subtitle>{{member.role}}</mat-card-subtitle>
7+
</mat-card-title-group>
8+
</mat-card-header>
9+
<mat-card-content>
10+
<p>
11+
{{member.bio}}
12+
</p>
13+
</mat-card-content>
14+
<mat-card-actions>
15+
<app-social-sharing
16+
[githubUrl]="member.githubUrl"
17+
[twitterUrl]="member.twitterUrl"
18+
[linkedinUrl]="member.linkedinUrl">
19+
</app-social-sharing>
20+
</mat-card-actions>
21+
</mat-card>

‎src/app/team/member.component.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.mat-card {
2+
width: 210px;
3+
margin: 10px;
4+
}
5+
6+
.header-image {
7+
background-size: cover;
8+
}
9+
10+
.mat-card-actions {
11+
text-align: center;
12+
margin-bottom: 1px;
13+
}
14+
15+
.mat-card-title {
16+
font-size: 20px;
17+
}

‎src/app/team/member.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MemberComponent } from './member.component';
4+
5+
describe('MemberComponent', () => {
6+
let component: MemberComponent;
7+
let fixture: ComponentFixture<MemberComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ MemberComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(MemberComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/team/member.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
import { IMember } from './team.models';
4+
5+
@Component({
6+
selector: 'app-member',
7+
templateUrl: './member.component.html',
8+
styleUrls: ['./member.component.scss']
9+
})
10+
export class MemberComponent{
11+
@Input() member: IMember;
12+
}

‎src/app/team/social-sharing/social-sharing.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<a *ngIf="!!githubUrl" mat-button [href]="githubUrl">
2+
<mat-icon class="icon-github"></mat-icon>
3+
</a>
4+
<a *ngIf="!!twitterUrl" mat-button [href]="twitterUrl">
5+
<mat-icon class="icon-twitter"></mat-icon>
6+
</a>
7+
<a *ngIf="!!linkedinUrl" mat-button [href]="linkedinUrl">
8+
<mat-icon class="icon-linkedin"></mat-icon>
9+
</a>

‎src/app/team/social-sharing/social-sharing.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import "../../../styles/colors";
2+
3+
a.mat-button {
4+
font-size: 25px;
5+
}
6+
7+
.icon-github {
8+
color: $icon-color-github;
9+
}
10+
11+
.icon-twitter {
12+
color: $icon-color-twitter;
13+
14+
}
15+
16+
.icon-linkedin {
17+
color: $icon-color-linkedin;
18+
}

‎src/app/team/social-sharing/social-sharing.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SocialSharingComponent } from './social-sharing.component';
4+
5+
describe('SocialSharingComponent', () => {
6+
let component: SocialSharingComponent;
7+
let fixture: ComponentFixture<SocialSharingComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ SocialSharingComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SocialSharingComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/team/social-sharing/social-sharing.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-social-sharing',
5+
templateUrl: './social-sharing.component.html',
6+
styleUrls: ['./social-sharing.component.scss']
7+
})
8+
export class SocialSharingComponent {
9+
@Input() githubUrl: string;
10+
@Input() twitterUrl: string;
11+
@Input() linkedinUrl: string;
12+
}

‎src/app/team/team.component.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
<p>
2-
team works!
3-
</p>
1+
<div style="background-color: white;" class="team-section">
2+
<h2>Core team</h2>
3+
<section class="wrapper">
4+
<app-member *ngFor="let member of (team$ | async).coreTeam" [member]="member">
5+
</app-member>
6+
</section>
7+
</div>
8+
9+
<div style="background-color: #efefef" class="team-section">
10+
<h2>Learning team</h2>
11+
<section class="wrapper">
12+
<app-member *ngFor="let member of (team$ | async).learningTeam" [member]="member">
13+
</app-member>
14+
</section>
15+
</div>

‎src/app/team/team.component.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:host {
2+
display: block;
3+
max-width: 1000px;
4+
margin: 0 auto;
5+
}
6+
7+
h2 {
8+
text-align: center;
9+
margin: 0;
10+
padding: 20px;
11+
}
12+
13+
section.wrapper {
14+
display: flex;
15+
flex-flow: row wrap;
16+
justify-content: center;
17+
}
18+
19+
div.team-section {
20+
box-shadow: -1px 3px 5px 0px #d6d6d6;
21+
margin-bottom: 3px;
22+
}

0 commit comments

Comments
 (0)