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

feat(aio): about page styles

Browse Source 
contributor fix

contributor card styling updates

button styling and container size fix

remove button and add image border

selection filter for buttons

header only show when group selected and styles

initial flip card funcitonality and data change

selected buttons styling

complete flip func and card style

flip feature

contributor group changes

fixes
This commit is contained in:
Stefanie Fluin
2017-04-04 11:33:25 -07:00
committed by Tobias Bosch
parent f21ff904c2
commit 6e89f0bf8d
12 changed files with 220 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,32 +5,47 @@ import { Contributor } from './contributors.model';
@Component({
selector: 'aio-contributor',
template: `
<header>
<img src="{{pictureBase}}{{person.picture || noPicture}}" alt="name" width="240" height="208">
<h3>{{person.name}}</h3>
<button *ngIf="person.bio" aria-label="View Bio" (click)="showBio=!showBio">View Bio</button>
<div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
<div class="card-front" (click)="flipCard(person)">
<div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'">
</div>
<!-- TODO: get the twitter/website icons and get rid of text -->
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}">
<span class="icon-twitter">twitter</span>
</a>
<a *ngIf="person.website" href="{{person.website}}">
<span class="icon-publ">website</span>
</a>
<p>{{person.bio}}</p>
<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" (click)="flipCard(person)">View Bio</a>
</div>
</div>
</div>
<header>
<!-- TODO: This should be modal and float over the width of page -->
<article *ngIf="showBio">
<h3>{{person.name}}</h3>
<p>{{person.bio}}</p>
<article>
<div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
<h3>{{person.name}}</h3>
<p class="contributor-bio" >{{person.bio}}</p>
</div>
</div>
`
})
export class ContributorComponent {
@Input() person: Contributor;
showBio = false;
noPicture = '_no-one.png';
pictureBase = 'content/images/bios/';
@Input() person: Contributor;
noPicture = '_no-one.png';
pictureBase = 'content/images/bios/';
flipCard(person){
if(person.isFlipped==true){
person.isFlipped=false;
}else{
person.isFlipped=true;
}
}
}

1
aio/src/app/embedded/contributor/contributors.model.ts
View File

@ -11,4 +11,5 @@ export class Contributor {
website?: string;
twitter?: string;
bio?: string;
isFlipped?: boolean = false;
}