style for date box

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/common.scss

@@ -151,3 +151,9 @@ a.list-item {
 .router-link-active{
   background-color: $purple-1;
 }
+.date-component{
+  background-color: $chapril_blue_light !important;
+}
+.time.datetime-container span.month{
+  color : $primary-invert;
+}

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

js/src/variables.scss

@@ -8,7 +8,7 @@ $chapril_orange: #ff5e00;
 $chapril_grey: #5f5f5f;
 // other
 $bleuvert: #1e7d97;
-$jaune: #ffd599;
+$jaune: mix($chapril_blue,#ffd599);
 $violet: #424056;
 
 /**