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

feat(aio): about page style changes 

Added contributor info links as overlay
Made image larger as a focus
This commit is contained in:
Stefanie Fluin 2017-04-18 08:45:47 -07:00 committed by Pete Bacon Darwin
parent b6ddacdccf
commit 79db6c3d19
2 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,21 +8,41 @@ import { Contributor } from './contributors.model';
<div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
<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-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" 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">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div>
</div>
<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">View Bio</a>
<div class="contributor-info">
<button>
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
</button>
<button class="icon">
<a *ngIf="person.twitter" 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">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div>
</div>
</div>

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

@ -51,33 +51,57 @@ aio-contributor {
.contributor-image {
transform: scale(1.05);
}
.contributor-info {
opacity: 1;
}
}
.contributor-info {
height: 48px;
background: rgba($darkgray, 0.5);
height: 200px;
width: 200px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 16px 8px;
background: $blue;
opacity: 0;
border-radius: 50%;
button {
background: none;
border: none;
padding: 0;
margin: 8px;
text-transform: uppercase;
cursor: pointer;
&.icon {
width: 20px;
min-width: 20px;
}
}
a {
color: $white;
margin-right: 8px;
font-size: 14px;
font-weight: 500;
.fa-2x {
font-size: 20px;
}
&:hover {
opacity: 0.7;
color: rgba($white, 0.7);
color: $blue;
}
}
}
div.contributor-card {
width: 240px;
height: 300px;
width: 250px;
height: 270px;
display: flex;
flex-direction: column;
align-items: center;
@ -98,7 +122,7 @@ aio-contributor {
}
.card-front {
justify-content: space-between;
justify-content: center;
}
.card-back {
@ -106,13 +130,11 @@ aio-contributor {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
padding: 16px 24px;
transform:rotateY(180deg);
h3 {
overflow: auto;
padding: 8px;
margin: 0;
display: none;
}
p {
@ -133,23 +155,28 @@ aio-contributor {
}
.contributor-image {
display: flex;
justify-content: center;
border-radius: 50%;
align-items: center;
height: 130px;
width: 130px;
height: 200px;
width: 200px;
background-size: cover;
background-position: center;
margin: 16px auto 0px;
border: 1px solid $lightgray;
margin: 8px auto;
border: 2px solid $lightgray;
transition: all .2s ease-in-out;
}
h3 {
font-size: 16px;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
padding: 8px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
}
p {