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:
parent
52e2338bf5
commit
c73c806cf5
|
@ -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>
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue