From c73c806cf583e6bfb9df900c4e8dfdac3c51fd47 Mon Sep 17 00:00:00 2001
From: eleanor <eleanorcjkgraham@gmail.com>
Date: Mon, 12 Nov 2018 09:38:02 -0500
Subject: [PATCH] add buttons that link to website and github repos for case
 studies. Make it easy to display multiple testimonials per project

---
 .../case-studies/case-studies.component.html  | 29 ++++++++++++++++---
 .../case-studies/case-studies.component.scss  |  7 +++++
 .../case-studies/case-studies.component.ts    |  5 +++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/app/case-studies/case-studies.component.html b/src/app/case-studies/case-studies.component.html
index 06527d6..c9d2c97 100644
--- a/src/app/case-studies/case-studies.component.html
+++ b/src/app/case-studies/case-studies.component.html
@@ -28,15 +28,36 @@
          fxLayoutGap="2%"
          fxLayoutAlign="space-between stretch"
     >
-      <div fxFlex="30%">
+      <div
+        fxFlex="30%"
+        fxLayout="column"
+        fxLayoutGap="2%"
+      >
         <h2>{{ caseStudy.projectName }}</h2>
         <h3>{{ caseStudy.organizationName }}</h3>
         <div
-          *ngIf="caseStudy.testimonials[0]"
-          class="testimonial"
+          *ngIf="caseStudy.testimonials"
         >
-          <p>"{{ caseStudy.testimonials[0].quote}}" - {{ caseStudy.testimonials[0].name}}</p>
+          <div
+            *ngFor="let t of caseStudy.testimonials"
+            class="testimonial"
+          >
+            <p>"{{ t.quote}}"</p>
+            <p>- {{ t.name}}</p>
+          </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%">
         <h3>{{ caseStudy.tagLine }}</h3>
diff --git a/src/app/case-studies/case-studies.component.scss b/src/app/case-studies/case-studies.component.scss
index 56a48b3..d98a35c 100644
--- a/src/app/case-studies/case-studies.component.scss
+++ b/src/app/case-studies/case-studies.component.scss
@@ -20,6 +20,13 @@
     object-fit: cover;
   }
 
+  button {
+    background-color: mat-color($sartography-warn, 500);
+    color: mat-contrast($sartography-warn, 500);
+    padding: 3%;
+    cursor: pointer;
+  }
+
   .intro {
     background-color: mat-color($sartography-accent, A100);
     padding: 3%;
diff --git a/src/app/case-studies/case-studies.component.ts b/src/app/case-studies/case-studies.component.ts
index 29c0354..d9fd99c 100644
--- a/src/app/case-studies/case-studies.component.ts
+++ b/src/app/case-studies/case-studies.component.ts
@@ -18,7 +18,6 @@ export class CaseStudiesComponent implements OnInit {
   ngOnInit() {
     this.api.getCaseStudies().subscribe(studies => {
       this.caseStudies = studies;
-      console.log('case studies!', studies);
     });
   }
 
@@ -26,4 +25,8 @@ export class CaseStudiesComponent implements OnInit {
     this.caseStudy = study;
   }
 
+  goWebsite(link: string) {
+    window.open(link, '_blank');
+  }
+
 }