add buttons that link to website and github repos for case studies. Make it easy to display multiple testimonials per project

This commit is contained in:
eleanor 2018-11-12 09:38:02 -05:00
parent 52e2338bf5
commit c73c806cf5
3 changed files with 36 additions and 5 deletions

View File

@ -28,16 +28,37 @@
fxLayoutGap="2%" fxLayoutGap="2%"
fxLayoutAlign="space-between stretch" fxLayoutAlign="space-between stretch"
> >
<div fxFlex="30%"> <div
fxFlex="30%"
fxLayout="column"
fxLayoutGap="2%"
>
<h2>{{ caseStudy.projectName }}</h2> <h2>{{ caseStudy.projectName }}</h2>
<h3>{{ caseStudy.organizationName }}</h3> <h3>{{ caseStudy.organizationName }}</h3>
<div <div
*ngIf="caseStudy.testimonials[0]" *ngIf="caseStudy.testimonials"
>
<div
*ngFor="let t of caseStudy.testimonials"
class="testimonial" class="testimonial"
> >
<p>"{{ caseStudy.testimonials[0].quote}}" - {{ caseStudy.testimonials[0].name}}</p> <p>"{{ t.quote}}"</p>
<p>- {{ t.name}}</p>
</div> </div>
</div> </div>
<button
*ngIf="caseStudy.websiteLink"
(click)="goWebsite(caseStudy.websiteLink)"
>
Visit Website
</button>
<button
*ngIf="caseStudy.gitHubLink"
(click)="goWebsite(caseStudy.gitHubLink)"
>
View on GitHub
</button>
</div>
<div fxFlex="60%"> <div fxFlex="60%">
<h3>{{ caseStudy.tagLine }}</h3> <h3>{{ caseStudy.tagLine }}</h3>
<p>{{ caseStudy.description }}</p> <p>{{ caseStudy.description }}</p>

View File

@ -20,6 +20,13 @@
object-fit: cover; object-fit: cover;
} }
button {
background-color: mat-color($sartography-warn, 500);
color: mat-contrast($sartography-warn, 500);
padding: 3%;
cursor: pointer;
}
.intro { .intro {
background-color: mat-color($sartography-accent, A100); background-color: mat-color($sartography-accent, A100);
padding: 3%; padding: 3%;

View File

@ -18,7 +18,6 @@ export class CaseStudiesComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.api.getCaseStudies().subscribe(studies => { this.api.getCaseStudies().subscribe(studies => {
this.caseStudies = studies; this.caseStudies = studies;
console.log('case studies!', studies);
}); });
} }
@ -26,4 +25,8 @@ export class CaseStudiesComponent implements OnInit {
this.caseStudy = study; this.caseStudy = study;
} }
goWebsite(link: string) {
window.open(link, '_blank');
}
} }