cargdev/angular
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): about page style changes

Browse Source 
Added contributor info links as overlay
Made image larger as a focus
This commit is contained in:
Stefanie Fluin
2017-04-18 08:45:47 -07:00
committed by Pete Bacon Darwin
parent b6ddacdccf
commit 79db6c3d19
2 changed files with 77 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
aio/src/app/embedded/contributor/contributor.component.ts
View File

@ -8,21 +8,41 @@ import { Contributor } from './contributors.model';
<div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
<div class="card-front" (click)="flipCard(person)">
<h3>{{person.name}}</h3>
<div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'">
<div class="contributor-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span>
</a>
</button>
<button class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div>
</div>
<div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'">
</div>
<h3>{{person.name}}</h3>
<div class="contributor-info">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span>
</a>
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
<div>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
<div class="contributor-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span>
</a>
</button>
<button class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div>
</div>
</div>