Show cards on event card

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

js/src/App.vue

@@ -76,6 +76,7 @@ export default class App extends Vue {
   @import "~bulma/sass/elements/title.sass";
   @import "~bulma/sass/elements/image.sass";
   @import "~bulma/sass/elements/box.sass";
+  @import "~bulma/sass/elements/tag.sass";
   @import "~bulma/sass/components/navbar.sass";
   @import "~bulma/sass/components/modal.sass";
   @import "~bulma/sass/grid/_all.sass";
@@ -86,6 +87,7 @@ export default class App extends Vue {
   @import "~buefy/src/scss/components/modal";
   @import "~buefy/src/scss/components/form";
   @import "~buefy/src/scss/components/dropdown";
+  @import "~buefy/src/scss/components/tag";
 
 .router-enter-active,
 .router-leave-active {

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;
     }

js/src/graphql/event.ts

@@ -111,7 +111,11 @@ export const FETCH_EVENTS = gql`
       category,
       participants {
         ${participantQuery}
-      }
+      },
+      tags {
+        slug,
+        title
+      },
     }
   }
 `;

js/src/types/event.model.ts

@@ -1,5 +1,6 @@
 import { Actor, IActor } from './actor.model';
 import { IAddress } from '@/types/address.model';
+import { ITag } from '@/types/tag.model';
 
 export enum EventStatus {
   TENTATIVE,

js/src/types/tag.model.ts

@@ -0,0 +1,4 @@
+export interface ITag {
+  slug: string;
+  title: string;
+}

js/src/variables.scss

@@ -1,5 +1,14 @@
+@import "~bulma/sass/utilities/_all";
+
 $primary: #424056;
+$primary-invert: findColorInvert($primary);
 $secondary: #FAB12D;
+$secondary-invert: findColorInvert($secondary);
+
+$colors: (
+        "primary": ($primary, $primary-invert),
+        "secondary": ($secondary, $secondary-invert),
+);
 
 // Navbar
 $navbar-background-color: $secondary;