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

Merge branch 'feature/fix-news-lint' into develop

This commit is contained in:
Christian Cueni 2020-06-17 14:39:09 +02:00
parent 5339ede9aa d6e8db5f99
commit 6d3fc6531c
2 changed files with 74 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,74 +1,75 @@
<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"
<h4 class="teaser__title">{{teaser.title}}</h4> class="teaser__image">
<p class="teaser__description">{{teaser.description}}</p> <p class="teaser__image-source">
<p class="teaser__date">{{teaser.displayDate}}</p> <a
:href="teaser.imageSource"
class="tiny-text">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> </a>
</div> </div>
</div> </div>
</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: {
$client: 'publicClient', $client: 'publicClient',
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">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_functions.scss"; @import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
$news_width: 550px; $news_width: 550px;
$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;
} }
grid-template-columns: repeat( auto-fit, minmax(320px, $news_width) ); grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
grid-gap: 40px; grid-gap: 40px;
grid-auto-rows: minmax(400px, auto); grid-auto-rows: minmax(400px, auto);
grid-template-rows: auto auto; grid-template-rows: auto auto;
-ms-grid-columns: $news_width $news_width; -ms-grid-columns: $news_width $news_width;
} }
} }
.teaser {
.teaser {
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
position: relative; position: relative;
@ -98,5 +99,5 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
} }
</style> </style>