honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(aio): clean up `aio-contributor` template and styles

This commit is contained in:
Georgios Kalpakas 2017-06-21 23:34:08 +03:00 committed by Matias Niemelä
parent 87206e1986
commit 5713e7c9b6
2 changed files with 50 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
<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-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
<div class="contributor-info">
<button *ngIf="person.bio" >
<a aria-label="View Bio">View Bio</a>
@ -28,29 +28,11 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
</button>
</div>
</div>
<div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'">
<div class="contributor-info">
<button *ngIf="person.bio">
<a aria-label="View Bio">View Bio</a>
</button>
<button *ngIf="person.twitter" class="icon">
<a href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span>
</a>
</button>
<button *ngIf="person.website" class="icon">
<a href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div>
</div>
</div>
<div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
<h3>{{person.name}}</h3>
<p class="contributor-bio" >{{person.bio}}</p>
<p class="contributor-bio">{{person.bio}}</p>
</div>
</div>
`

96
aio/src/styles/2-modules/_contributor.scss
View File

@ -99,64 +99,64 @@ aio-contributor {
}
}
div.contributor-card {
width: 250px;
height: 270px;
div.contributor-card {
width: 250px;
height: 270px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-radius: 4px;
transform-style:preserve-3d;
transition:transform ease 500ms;
h3 {
margin: 8px 0;
}
.card-front, .card-back {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-radius: 4px;
transform-style:preserve-3d;
transition:transform ease 500ms;
box-sizing: border-box;
}
h3 {
.card-front {
justify-content: center;
}
.card-back {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 24px;
transform:rotateY(180deg);
section {
display: none;
}
p {
margin: 8px 0;
font-size: 12px;
line-height: 14px;
text-align: left;
}
.card-front, .card-back {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
}
&.flipped {
transform:rotateY(180deg);
.card-front {
justify-content: center;
}
.card-back {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 24px;
transform:rotateY(180deg);
section {
display: none;
}
p {
margin: 8px 0;
font-size: 12px;
line-height: 14px;
text-align: left;
}
}
&.flipped {
transform:rotateY(180deg);
.card-front {
display: none;
}
display: none;
}
}
}
.contributor-image {
display: flex;