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,17 +50,20 @@
             "
             >{{ participation.event.physicalAddress.locality }} -</span
           >
-          <span>
-            <i18n tag="span" path="Organized by {name}">
-              <popover-actor-card
-                slot="name"
-                :actor="organizerActor"
-                :inline="true"
-              >
-                {{ organizerActor.displayName() }}
-              </popover-actor-card>
-            </i18n>
-          </span>
+          <i18n
+            tag="span"
+            path="Organized by {name}"
+            v-if="organizerActor.id !== currentActor.id"
+          >
+            <popover-actor-card
+              slot="name"
+              :actor="organizerActor"
+              :inline="true"
+            >
+              {{ organizerActor.displayName() }}
+            </popover-actor-card>
+          </i18n>
+          <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;
   }