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

client/src/components/NewsTeasers.vue

@@ -1,102 +1,103 @@
 <template>
   <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">
-        <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>
     </div>
   </div>
 </template>
 
 <script>
+import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
 
-  import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
+export default {
+  components: {},
 
-  export default {
+  data() {
-    components: {},
+    return {
+      newsTeasers: []
+    };
+  },
 
-    computed: {
+  apollo: {
-},
+    $client: 'publicClient',
-
+    newsTeasers: {
-    apollo: {
+      query: NEWS_TEASER_QUERY,
-      $client: 'publicClient',
+      update(data) {
-      newsTeasers: {
+        return this.$getRidOfEdges(data).newsTeasers;
-        query: NEWS_TEASER_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).newsTeasers
-        },
-      },
-    },
-
-    data() {
-      return {
-        newsTeasers: []
       }
-    },
+    }
   }
+};
 </script>
 
 <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;
 
+  @include desktop {
+    @supports (display: grid) {
+      display: grid;
+      display: -ms-grid;
+    }
+
+    grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
+    grid-gap: 40px;
+    grid-auto-rows: minmax(400px, auto);
+    grid-template-rows: auto auto;
+    -ms-grid-columns: $news_width $news_width;
+  }
+}
+
+.teaser {
+  margin-bottom: $large-spacing;
+  position: relative;
+
+  &__image {
     display: block;
+    max-width: 100%;
+    height: auto;
 
     @include desktop {
-
+      max-width: $news_width;
-      @supports (display: grid) {
-        display: grid;
-        display: -ms-grid;
-      }
-
-      grid-template-columns: repeat( auto-fit, minmax(320px, $news_width) );
-      grid-gap: 40px;
-      grid-auto-rows: minmax(400px, auto);
-      grid-template-rows: auto auto;
-      -ms-grid-columns: $news_width $news_width;
     }
   }
 
-  .teaser {
+  &__image-source {
+    line-height: 25px;
+  }
 
+  &__description {
     margin-bottom: $large-spacing;
-    position: relative;
-
-    &__image {
-      display: block;
-      max-width: 100%;
-      height: auto;
-
-      @include desktop {
-        max-width: $news_width;
-      }
-    }
-
-    &__image-source {
-      line-height: 25px;
-    }
-
-    &__description {
-      margin-bottom: $large-spacing;
-    }
-
-    &__date {
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
-      color: $color-silver-dark;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
   }
+
+  &__date {
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-regular;
+    color: $color-silver-dark;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
 </style>

client/src/pages/news.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="news">
     <h1 class="news__heading">News</h1>
-   <NewsTeasers />
+    <NewsTeasers />
   </div>
 </template>