From deeab23088f56ebfa62da2d563362e845c2bf24a Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 28 May 2020 13:56:18 +0200
Subject: [PATCH] Add link, align date on bottom

---
 client/src/components/NewsTeasers.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/NewsTeasers.vue b/client/src/components/NewsTeasers.vue
index 4ed433c0..53bba750 100644
--- a/client/src/components/NewsTeasers.vue
+++ b/client/src/components/NewsTeasers.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="news__teasers teasers">
     <div v-for="teaser in newsTeasers" :key="teaser.id" class="teasers__teaser teaser">
-      <img :src="teaser.imageUrl" class="teaser__image" />
-      <p class="teaser__image-source"><a class="tiny" :href="teaser.imageSource">Quelle {{teaser.imageSource}}</a></p>
-      <h4 class="teaser__title">{{teaser.title}}</h4>
-      <p class="teaser__description">{{teaser.description}}</p>
-      <p class="teaser__date">{{teaser.displayDate}}</p>
+      <a :href="teaser.newsArticleUrl">
+        <img :src="teaser.imageUrl" class="teaser__image" />
+        <p class="teaser__image-source"><a class="tiny" :href="teaser.imageSource">Quelle {{teaser.imageSource}}</a></p>
+        <h4 class="teaser__title">{{teaser.title}}</h4>
+        <p class="teaser__description">{{teaser.description}}</p>
+        <p class="teaser__date">{{teaser.displayDate}}</p>
+      </a>
     </div>
   </div>
 </template>
@@ -68,6 +70,7 @@
   .teaser {
 
     margin-bottom: $large-spacing;
+    position: relative;
 
     &__image {
       display: block;
@@ -91,6 +94,9 @@
       font-family: $sans-serif-font-family;
       font-weight: $font-weight-regular;
       color: $color-silver-dark;
+      position: absolute;
+      bottom: 0;
+      left: 0;
     }
   }
 </style>