ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add link, align date on bottom

This commit is contained in:
Christian Cueni 2020-05-28 13:56:18 +02:00
parent ca6adf75e1
commit deeab23088
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/NewsTeasers.vue
View File

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