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

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

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 class="contributor-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
<button *ngIf="person.bio" >
<a aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<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 class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
<button *ngIf="person.website" class="icon">
<a href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</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 class="contributor-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
<button *ngIf="person.bio">
<a aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<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 class="icon">
<a *ngIf="person.website" href="{{person.website}}" target="_blank">
<button *ngIf="person.website" class="icon">
<a href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</button>

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

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