Add basic grid

client/src/components/NewsTeasers.vue

@@ -0,0 +1,82 @@
+<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">{{teaser.imageSource}}</p>
+      <h3 class="teaser__title">{{teaser.title}}</h3>
+      <p class="teaser__description">{{teaser.description}}</p>
+      <p class="teaser__date">{{teaser.date}}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
+
+  export default {
+    components: {},
+
+    computed: {
+},
+
+    apollo: {
+      $client: 'publicClient',
+      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/_functions.scss";
+  @import "@/styles/_mixins.scss";
+
+  $news_width: 550px;
+  $image_height: 254px;
+
+  .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 {
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      // max-height: 100%;
+      // width: auto;
+      height: auto;
+
+      @include desktop {
+        max-width: $news_width;
+      }
+    }
+  }
+</style>

client/src/pages/news.vue

@@ -1,44 +1,16 @@
 <template>
   <div class="news">
     <h2 class="news__heading">News</h2>
-    <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" />
-        <h3 class="teaser__title">{{teaser.title}}</h3>
-        <p class="teaser__description">{{teaser.description}}</p>
-        <p class="teaser__date">{{teaser.date}}</p>
-      </div>
-    </div>
-
+   <NewsTeasers />
   </div>
 </template>
 
 <script>
 
-  import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
+  import NewsTeasers from '@/components/NewsTeasers';
 
   export default {
-    components: {},
-
-    computed: {
-},
-
-    apollo: {
-      $client: 'publicClient',
-      newsTeasers: {
-        query: NEWS_TEASER_QUERY,
-        update(data) {
-          console.log(data);
-          return this.$getRidOfEdges(data).newsTeasers
-        },
-      },
-    },
-
-    data() {
-      return {
-        newsTeasers: []
-      }
-    },
+    components: {NewsTeasers},
   }
 </script>
 
@@ -47,12 +19,11 @@
   @import "@/styles/_functions.scss";
   @import "@/styles/_mixins.scss";
 
-  .teasers {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
-    }
-    grid-template-rows: 300px 300px;
-    -ms-grid-rows: auto 1fr 65px;
+  $news_width: 550px;
+  $image_height: 254px;
+
+  .news {
+    padding: 0 $large-spacing;
   }
+
 </style>

server/newsteaser/factories.py

@@ -15,7 +15,7 @@ class NewsTeaserFactory(factory.django.DjangoModelFactory):
 
     title = factory.LazyAttribute(lambda x: fake_title(max_words=2))
     description = factory.LazyAttribute(lambda x: fake.sentence(nb_words=random.randint(4, 8)))
-    image_url = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
+    image_url = factory.LazyAttribute(lambda x: 'https://picsum.photos/550/257/?random')
     news_article_url = factory.LazyAttribute(lambda x: 'https://myskillbox-abu-news.webflow.io/brexit')
     date = FuzzyDateTime(datetime.datetime(2020, 1, 1, tzinfo=UTC))
-    image_source = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
+    image_source = factory.LazyAttribute(lambda x: 'https://picsum.photos/550/257/?random')

server/newsteaser/tests/test_newsteaser.py

@@ -12,7 +12,6 @@ class NewsTeaserTests(TestCase):
 
         self.client = Client(schema=schema)
 
-
     def make_query(self):
         query = '''
             query NewsTeasers {