From 7e97fda67fafb3bd83caadc4cdb0b2559ec45960 Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Tue, 1 Dec 2020 11:08:46 +0100
Subject: [PATCH] event picture in list

---
 js/package.json                           |  1 +
 js/src/components/Event/EventListCard.vue | 52 +++++++++++++++++------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/js/package.json b/js/package.json
index 3fd83757b..cecf08ede 100644
--- a/js/package.json
+++ b/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",
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index 780bd96f0..ed53ed268 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/js/src/components/Event/EventListCard.vue
@@ -3,12 +3,38 @@
     <div class="columns">
       <div class="content column">
         <div class="title-wrapper">
-          <div class="date-component">
-            <date-calendar-icon :date="participation.event.beginsOn" />
+          <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 } }"
+              >
+                <h3 class="title">{{ participation.event.title }}</h3>
+              </router-link>
+            </div>
           </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
-            <h3 class="title">{{ participation.event.title }}</h3>
-          </router-link>
         </div>
         <div class="participation-actor has-text-grey">
           <span>
@@ -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
@@ -146,7 +172,7 @@
             "
             @click="openDeleteEventModalWrapper"
           >
-            <b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button>
+            <b-button type="is-text" icon-left="delete">{{ $t("Delete") }} </b-button>
           </li>
           <li
             v-if="
@@ -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;
       }