cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): about page style changes

Browse Source 
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 [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
<div class="card-front" (click)="flipCard(person)"> <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 *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>
<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> <div class="contributor-info">
<h3>{{person.name}}</h3> <button>
<div class="contributor-info"> <a *ngIf="person.bio" aria-label="View Bio">View Bio</a>
<a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank"> </button>
<span class="fa fa-twitter fa-2x"></span> <button class="icon">
</a> <a *ngIf="person.twitter" href="https://twitter.com/{{person.twitter}}" target="_blank">
<a *ngIf="person.website" href="{{person.website}}" target="_blank"> <span class="fa fa-twitter fa-2x"></span>
<span class="fa fa-link fa-2x"></span> </a>
</a> </button>
<div> <button class="icon">
<a *ngIf="person.bio" aria-label="View Bio">View Bio</a> <a *ngIf="person.website" href="{{person.website}}" target="_blank">
<span class="fa fa-link fa-2x"></span>
</a>
</button>
</div> </div>
</div> </div>
</div> </div>

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

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