Format date, style source

client/src/components/NewsTeasers.vue

@@ -2,10 +2,10 @@
   <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>
+      <p class="teaser__image-source"><a class="hep-link" :href="teaser.imageSource">Quelle</a></p>
-      <h3 class="teaser__title">{{teaser.title}}</h3>
+      <h4 class="teaser__title">{{teaser.title}}</h4>
       <p class="teaser__description">{{teaser.description}}</p>
-      <p class="teaser__date">{{teaser.date}}</p>
+      <p class="teaser__date">{{teaser.displayDate}}</p>
     </div>
   </div>
 </template>
@@ -67,16 +67,22 @@
 
   .teaser {
 
+    margin-bottom: $large-spacing;
+
     &__image {
       display: block;
       max-width: 100%;
-      // max-height: 100%;
-      // width: auto;
       height: auto;
 
       @include desktop {
         max-width: $news_width;
       }
     }
+
+    &__date {
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
+      color: $color-silver-dark;
+    }
   }
 </style>

client/src/graphql/gql/newsTeasersQuery.gql

@@ -7,7 +7,7 @@ query NewsTeasers {
         title
         imageUrl
         newsArticleUrl
-        date
+        displayDate
         imageSource
 	    }
 	  }

client/src/pages/news.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="news">
-    <h2 class="news__heading">News</h2>
+    <h1 class="news__heading">News</h1>
    <NewsTeasers />
   </div>
 </template>
@@ -16,14 +16,17 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
   @import "@/styles/_mixins.scss";
 
-  $news_width: 550px;
-  $image_height: 254px;
-
   .news {
     padding: 0 $large-spacing;
+    max-width: 800px;
+    margin: 0 auto;
+
+    @include desktop {
+      max-width: unset;
+      margin: 0;
+    }
   }
 
 </style>

server/newsteaser/schema_public.py

@@ -1,3 +1,4 @@
+import graphene
 from graphene import relay
 from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
@@ -6,15 +7,20 @@ from newsteaser.models import NewsTeaser
 
 
 class NewsTeaserNode(DjangoObjectType):
+    display_date = graphene.String()
 
     class Meta:
         model = NewsTeaser
-        filter_fields = []
+        filter_fields = ['date',]
         interfaces = (relay.Node,)
 
+    def resolve_display_date(self, *args, **kwargs):
+        return self.date.strftime("%d. %B %Y")
+
 
 class AllNewsTeasersQuery(object):
     news_teasers = DjangoFilterConnectionField(NewsTeaserNode)
 
     def resolve_news_teasers(self, info, **kwargs):
         return NewsTeaser.objects.all().order_by('order_id')
+

server/newsteaser/tests/test_newsteaser.py

@@ -23,7 +23,7 @@ class NewsTeaserTests(TestCase):
                       title
                       imageUrl
                       newsArticleUrl
-                      date
+                      displayDate
                       imageSource
                     }
                   }