Event components enhancements

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

js/src/components/Event/EventBanner.vue

@@ -22,7 +22,7 @@ export default class EventBanner extends Vue {
 .banner-container {
   display: flex;
   justify-content: center;
-  height: 400px;
+  height: 30vh;
 }
 ::v-deep img {
   width: 100%;

js/src/components/Event/EventListCard.vue

@@ -24,7 +24,7 @@
             <h3 class="title">{{ participation.event.title }}</h3>
           </router-link>
         </div>
-        <div class="participation-actor has-text-grey">
+        <div class="participation-actor">
           <span>
             <b-icon
               icon="earth"
@@ -50,8 +50,11 @@
             "
             >{{ participation.event.physicalAddress.locality }} -</span
           >
-          <span>
-            <i18n tag="span" path="Organized by {name}">
+          <i18n
+            tag="span"
+            path="Organized by {name}"
+            v-if="organizerActor.id !== currentActor.id"
+          >
             <popover-actor-card
               slot="name"
               :actor="organizerActor"
@@ -60,7 +63,7 @@
               {{ organizerActor.displayName() }}
             </popover-actor-card>
           </i18n>
-          </span>
+          <span v-else>{{ $t("Organized by you") }}</span>
         </div>
         <div>
           <span
@@ -116,7 +119,9 @@
                   $tc(
                     "{count} requests waiting",
                     participation.event.participantStats.notApproved,
-                    { count: participation.event.participantStats.notApproved }
+                    {
+                      count: participation.event.participantStats.notApproved,
+                    }
                   )
                 }}
               </b-button>
@@ -347,6 +352,7 @@ article.box {
   .list-card {
     display: flex;
     align-items: center;
+    padding: 0 6px;
 
     .actions {
       padding-right: 7.5px;

js/src/components/Event/EventMetadataBlock.vue

@@ -23,7 +23,7 @@ export default class EventMetadataBlock extends Vue {
 h2 {
   font-size: 1.8rem;
   font-weight: 500;
-  color: #f7ba30;
+  color: $violet;
 }
 
 div.eventMetadataBlock {

js/src/components/Event/OrganizerPicker.vue

@@ -66,7 +66,9 @@ export default class OrganizerPicker extends Vue {
       return this.value;
     }
     if (this.currentActor) {
-      return this.currentActor;
+      return this.identities.find(
+        (identity) => identity.id === this.currentActor.id
+      );
     }
     return undefined;
   }

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -110,6 +110,7 @@ import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 import OrganizerPicker from "./OrganizerPicker.vue";
 import {
   CURRENT_ACTOR_CLIENT,
+  IDENTITIES,
   LOGGED_USER_MEMBERSHIPS,
 } from "../../graphql/actor";
 import { Paginate } from "../../types/paginate";
@@ -152,6 +153,7 @@ const MEMBER_ROLES = [
       },
       update: (data) => data.loggedUser.memberships,
     },
+    identities: IDENTITIES,
   },
 })
 export default class OrganizerPickerWrapper extends Vue {
@@ -161,6 +163,8 @@ export default class OrganizerPickerWrapper extends Vue {
 
   currentActor!: IPerson;
 
+  identities!: IPerson[];
+
   isComponentModalActive = false;
 
   @Prop({ type: Array, required: false, default: () => [] })
@@ -200,7 +204,9 @@ export default class OrganizerPickerWrapper extends Vue {
       return this.value;
     }
     if (this.currentActor) {
-      return this.currentActor;
+      return this.identities.find(
+        (identity) => identity.id === this.currentActor.id
+      );
     }
     return undefined;
   }

js/src/views/Event/Event.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="container">
     <transition appear name="fade" mode="out-in">
-      <div>
-        <div
-          class="header-picture"
-          v-if="event.picture"
-          :style="`background-image: url('${event.picture.url}')`"
-        />
-        <div class="header-picture-default" v-else />
-        <section class="section intro">
-          <div class="columns">
-            <div class="column is-1-tablet">
+      <div class="wrapper">
+        <event-banner :picture="event.picture" />
+        <div class="intro-wrapper">
+          <div class="date-calendar-icon-wrapper">
             <date-calendar-icon :date="event.beginsOn" />
           </div>
+          <section class="intro">
+            <div class="columns">
               <div class="column">
                 <h1 class="title" style="margin: 0">{{ event.title }}</h1>
                 <div class="organizer">
@@ -294,6 +290,7 @@
               </div>
             </div>
           </section>
+        </div>
         <div class="event-description-wrapper">
           <aside class="event-metadata">
             <div class="sticky">
@@ -662,6 +659,7 @@ import { IConfig } from "../../types/config.model";
 import Subtitle from "../../components/Utils/Subtitle.vue";
 import Tag from "../../components/Tag.vue";
 import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
+import EventBanner from "../../components/Event/EventBanner.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
 import { IParticipant } from "../../types/participant.model";
@@ -683,6 +681,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
     Tag,
     ActorCard,
     PopoverActorCard,
+    EventBanner,
     "map-leaflet": () =>
       import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
     ShareEventModal: () =>
@@ -1308,18 +1307,6 @@ export default class Event extends EventMixin {
   opacity: 0;
 }
 
-.header-picture,
-.header-picture-default {
-  height: 400px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.header-picture-default {
-  background-image: url("../../../public/img/mobilizon_default_card.png");
-}
-
 div.sidebar {
   display: flex;
   flex-wrap: wrap;
@@ -1353,7 +1340,7 @@ div.sidebar {
   }
 }
 
-.intro.section {
+.intro {
   background: white;
 
   .is-3-tablet {