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

fix(aio): contributor img offset and hover fix (#17338)

Browse Source
This commit is contained in:
Stefanie Fluin 2017-06-08 12:00:43 -07:00 committed by Igor Minar
parent 4d2ee51bb0
commit 0940e6d6ed
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,16 +13,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
<div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'"> <div *ngIf="person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+person.picture+')'">
<div class="contributor-info"> <div class="contributor-info">
<button> <button *ngIf="person.bio" >
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a> <a aria-label="View Bio">View Bio</a>
</button> </button>
<button class="icon"> <button *ngIf="person.twitter" class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank"> <a href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span> <span class="fa fa-twitter fa-2x"></span>
</a> </a>
</button> </button>
<button class="icon"> <button *ngIf="person.website" class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank"> <a href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span> <span class="fa fa-link fa-2x"></span>
</a> </a>
</button> </button>
@ -31,16 +31,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
<div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'"> <div *ngIf="!person.picture" class="contributor-image" [style.background-image]="'url('+pictureBase+noPicture+')'">
<div class="contributor-info"> <div class="contributor-info">
<button> <button *ngIf="person.bio">
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a> <a aria-label="View Bio">View Bio</a>
</button> </button>
<button class="icon"> <button *ngIf="person.twitter" class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank"> <a href="https://twitter.com/{{person.twitter}}" target="_blank">
<span class="fa fa-twitter fa-2x"></span> <span class="fa fa-twitter fa-2x"></span>
</a> </a>
</button> </button>
<button class="icon"> <button *ngIf="person.website" class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank"> <a href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span> <span class="fa fa-link fa-2x"></span>
</a> </a>
</button> </button>

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

@ -59,8 +59,8 @@ aio-contributor {
.contributor-info { .contributor-info {
background: rgba($darkgray, 0.5); background: rgba($darkgray, 0.5);
height: 200px; height: 168px;
width: 200px; width: 168px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -94,7 +94,7 @@ aio-contributor {
} }
&:hover { &:hover {
color: $blue; color: $lightgray;
} }
} }
} }
@ -112,6 +112,10 @@ aio-contributor {
transform-style:preserve-3d; transform-style:preserve-3d;
transition:transform ease 500ms; transition:transform ease 500ms;
h3 {
margin: 8px 0;
}
.card-front, .card-back { .card-front, .card-back {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -159,8 +163,8 @@ aio-contributor {
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
align-items: center; align-items: center;
height: 200px; height: 168px;
width: 200px; width: 168px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
margin: 8px auto; margin: 8px auto;