event picture in list

js/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.2",
   "private": true,
   "scripts": {
+    "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --modern",
     "test:unit": "vue-cli-service test:unit",

js/src/components/Event/EventListCard.vue

@@ -3,13 +3,39 @@
     <div class="columns">
       <div class="content column">
         <div class="title-wrapper">
+          <div class="columns">
+            <div class="column is-narrow">
+              <figure
+                class="image is-16by9"
+                :style="`background-image: url('${
+                  participation.event.picture
+                    ? participation.event.picture.url
+                    : '/img/mobilizon_default_card.png'
+                }')`"
+              >
+                <div class="tag-container" v-if="event.tags">
+                  <router-link
+                    :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+                    v-for="tag in participation.event.tags.slice(0, 3)"
+                    :key="tag.slug"
+                  >
+                    <b-tag type="is-light">{{ tag.title }}</b-tag>
+                  </router-link>
+                </div>
+              </figure>
+            </div>
+            <div class="column">
               <div class="date-component">
                 <date-calendar-icon :date="participation.event.beginsOn" />
               </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
+              <router-link
+                :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
+              >
                 <h3 class="title">{{ participation.event.title }}</h3>
               </router-link>
             </div>
+          </div>
+        </div>
         <div class="participation-actor has-text-grey">
           <span>
             <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
@@ -121,8 +147,8 @@
                 })
               "
               icon-left="pencil"
-              >{{ $t("Edit") }}</b-button
+              >{{ $t("Edit") }}
-            >
+            </b-button>
           </li>
           <li v-if="participation.role === ParticipantRole.CREATOR">
             <b-button
@@ -164,8 +190,8 @@
                 })
               "
               icon-left="account-multiple-plus"
-              >{{ $t("Manage participations") }}</b-button
+              >{{ $t("Manage participations") }}
-            >
+            </b-button>
           </li>
           <li>
             <b-button
@@ -173,8 +199,8 @@
               icon-left="view-compact"
               type="is-text"
               :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
-              >{{ $t("View event page") }}</b-button
+              >{{ $t("View event page") }}
-            >
+            </b-button>
           </li>
         </ul>
       </div>
@@ -293,6 +319,7 @@ article.box {
       line-height: 1.75em;
     }
   }
+
   div.content {
     padding: 5px;
 
@@ -336,6 +363,7 @@ article.box {
   .actions {
     ul li {
       margin: 0 auto;
+
       .is-link {
         cursor: pointer;
       }