Show cards on event card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventCard.vue

@@ -2,6 +2,9 @@
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image" v-if="!event.image">
       <figure class="image is-16by9">
+        <div class="tag-container">
+          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
+        </div>
         <img src="https://picsum.photos/g/400/225/?random">
       </figure>
     </div>
@@ -80,7 +83,7 @@ export default class EventCard extends Vue {
     return { ...this.defaultOptions, ...this.options };
   }
 
-  get actorDisplayName() {
+  get actorDisplayName(): string {
     const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
     return actor.displayName();
   }
@@ -95,6 +98,28 @@ export default class EventCard extends Vue {
     border: none;
     background: $secondary;
 
+    div.tag-container {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      margin-right: -5px;
+      z-index: 10;
+      max-width: 40%;
+
+      span.tag {
+        margin: 5px auto;
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+        /*word-break: break-all;*/
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        /*text-align: right;*/
+        font-size: 1em;
+        /*padding: 0 1px;*/
+        line-height: 1.75em;
+      }
+    }
+
     div.card-image {
       background: $secondary;
     }