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)"> <div class="card-front" (click)="flipCard(person)">
<h3>{{person.name}}</h3> <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"> <div class="contributor-info">
<button *ngIf="person.bio" > <button *ngIf="person.bio" >
<a aria-label="View Bio">View Bio</a> <a aria-label="View Bio">View Bio</a>
@ -28,29 +28,11 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
</button> </button>
</div> </div>
</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>
<div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)"> <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
<h3>{{person.name}}</h3> <h3>{{person.name}}</h3>
<p class="contributor-bio" >{{person.bio}}</p> <p class="contributor-bio">{{person.bio}}</p>
</div> </div>
</div> </div>
` `

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

@ -99,64 +99,64 @@ aio-contributor {
} }
} }
div.contributor-card { div.contributor-card {
width: 250px; width: 250px;
height: 270px; 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; box-sizing: border-box;
justify-content: space-between; }
position: relative;
overflow: hidden;
border-radius: 4px;
transform-style:preserve-3d;
transition:transform ease 500ms;
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; 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 { .card-front {
justify-content: center; display: none;
}
.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;
}
} }
} }
}
.contributor-image { .contributor-image {
display: flex; display: flex;