Merge branch 'feature/fix-news-lint' into develop
This commit is contained in:
commit
6d3fc6531c
|
|
@ -1,9 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="news-teasers">
|
<div class="news-teasers">
|
||||||
<div v-for="teaser in newsTeasers" :key="teaser.id" class="news-teasers__teaser teaser">
|
<div
|
||||||
|
:key="teaser.id"
|
||||||
|
class="news-teasers__teaser teaser"
|
||||||
|
v-for="teaser in newsTeasers">
|
||||||
<a :href="teaser.newsArticleUrl">
|
<a :href="teaser.newsArticleUrl">
|
||||||
<img :src="teaser.imageUrl" class="teaser__image" />
|
<img
|
||||||
<p class="teaser__image-source"><a class="tiny-text" :href="teaser.imageSource">Quelle {{teaser.imageSource}}</a></p>
|
:src="teaser.imageUrl"
|
||||||
|
class="teaser__image">
|
||||||
|
<p class="teaser__image-source">
|
||||||
|
<a
|
||||||
|
:href="teaser.imageSource"
|
||||||
|
class="tiny-text">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>
|
||||||
|
|
@ -13,13 +21,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
|
import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
|
|
||||||
computed: {
|
data() {
|
||||||
|
return {
|
||||||
|
newsTeasers: []
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
apollo: {
|
apollo: {
|
||||||
|
|
@ -27,17 +37,11 @@
|
||||||
newsTeasers: {
|
newsTeasers: {
|
||||||
query: NEWS_TEASER_QUERY,
|
query: NEWS_TEASER_QUERY,
|
||||||
update(data) {
|
update(data) {
|
||||||
return this.$getRidOfEdges(data).newsTeasers
|
return this.$getRidOfEdges(data).newsTeasers;
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
newsTeasers: []
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
@ -49,11 +53,9 @@
|
||||||
$image_height: 254px;
|
$image_height: 254px;
|
||||||
|
|
||||||
.teasers {
|
.teasers {
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@include desktop {
|
@include desktop {
|
||||||
|
|
||||||
@supports (display: grid) {
|
@supports (display: grid) {
|
||||||
display: grid;
|
display: grid;
|
||||||
display: -ms-grid;
|
display: -ms-grid;
|
||||||
|
|
@ -68,7 +70,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.teaser {
|
.teaser {
|
||||||
|
|
||||||
margin-bottom: $large-spacing;
|
margin-bottom: $large-spacing;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue