From 405331f7cbf83cc25c4c94da39025741e1509a6f Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Oct 2019 14:50:44 +0200
Subject: [PATCH] Make event header picture display as background cover

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/Event/Event.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 70f6aefb8..b2e5e8f51 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -3,13 +3,13 @@
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <transition appear name="fade" mode="out-in">
       <div v-if="event">
-        <div class="header-picture container">
-          <figure class="image is-3by1" v-if="event.picture">
+        <div class="header-picture" :style="`background-image: url('${event.picture ? event.picture.url : 'https://picsum.photos/600/200/'}')`">
+          <!--<figure class="image is-3by1" v-if="event.picture">
             <img :src="event.picture.url">
           </figure>
           <figure class="image is-3by1" v-else>
             <img src="https://picsum.photos/600/200/">
-          </figure>
+          </figure>-->
         </div>
           <section>
             <div class="title-and-participate-button">
@@ -495,6 +495,14 @@ export default class Event extends EventMixin {
     opacity: 0;
   }
 
+  .header-picture {
+    height: 400px;
+    background-size: cover;
+    // background-position: center center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+  }
+
   div.sidebar {
     display: flex;
     flex-wrap: wrap;