diff --git a/js/src/components/Event/EventBanner.vue b/js/src/components/Event/EventBanner.vue
index bbdae2c67..1e82f0c38 100644
--- a/js/src/components/Event/EventBanner.vue
+++ b/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%;
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index bb2be7607..26f92609a 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/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;
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index 6128c9e27..06c2f795f 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/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 {
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index 41f61b1c0..c9d8baf45 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/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;
}
diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index e1af655dc..9bfaa8c91 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/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;
}
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 6b378ac80..a9e390f67 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -1,299 +1,296 @@
<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">
- <date-calendar-icon :date="event.beginsOn" />
- </div>
- <div class="column">
- <h1 class="title" style="margin: 0">{{ event.title }}</h1>
- <div class="organizer">
- <span v-if="event.organizerActor && !event.attributedTo">
- <popover-actor-card
- :actor="event.organizerActor"
- :inline="true"
+ <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">
+ <span v-if="event.organizerActor && !event.attributedTo">
+ <popover-actor-card
+ :actor="event.organizerActor"
+ :inline="true"
+ >
+ <span>
+ {{
+ $t("By @{username}", {
+ username: usernameWithDomain(event.organizerActor),
+ })
+ }}
+ </span>
+ </popover-actor-card>
+ </span>
+ <span
+ v-else-if="
+ event.attributedTo &&
+ event.options.hideOrganizerWhenGroupEvent
+ "
>
- <span>
- {{
- $t("By @{username}", {
- username: usernameWithDomain(event.organizerActor),
- })
- }}
- </span>
- </popover-actor-card>
- </span>
- <span
- v-else-if="
- event.attributedTo &&
- event.options.hideOrganizerWhenGroupEvent
- "
- >
- <popover-actor-card
- :actor="event.attributedTo"
- :inline="true"
- >
- {{
- $t("By @{group}", {
- group: usernameWithDomain(event.attributedTo),
- })
- }}
- </popover-actor-card>
- </span>
- <span v-else-if="event.organizerActor && event.attributedTo">
- <i18n path="By {group}">
<popover-actor-card
:actor="event.attributedTo"
- slot="group"
:inline="true"
+ >
+ {{
+ $t("By @{group}", {
+ group: usernameWithDomain(event.attributedTo),
+ })
+ }}
+ </popover-actor-card>
+ </span>
+ <span v-else-if="event.organizerActor && event.attributedTo">
+ <i18n path="By {group}">
+ <popover-actor-card
+ :actor="event.attributedTo"
+ slot="group"
+ :inline="true"
+ >
+ <router-link
+ :to="{
+ name: RouteName.GROUP,
+ params: {
+ preferredUsername: usernameWithDomain(
+ event.attributedTo
+ ),
+ },
+ }"
+ >
+ {{
+ $t("@{group}", {
+ group: usernameWithDomain(event.attributedTo),
+ })
+ }}
+ </router-link>
+ </popover-actor-card>
+ </i18n>
+ </span>
+ </div>
+ <p class="tags" v-if="event.tags && event.tags.length > 0">
+ <router-link
+ v-for="tag in event.tags"
+ :key="tag.title"
+ :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+ >
+ <tag>{{ tag.title }}</tag>
+ </router-link>
+ </p>
+ <b-tag type="is-warning" size="is-medium" v-if="event.draft"
+ >{{ $t("Draft") }}
+ </b-tag>
+ <span
+ class="event-status"
+ v-if="event.status !== EventStatus.CONFIRMED"
+ >
+ <b-tag
+ type="is-warning"
+ v-if="event.status === EventStatus.TENTATIVE"
+ >{{ $t("Event to be confirmed") }}</b-tag
+ >
+ <b-tag
+ type="is-danger"
+ v-if="event.status === EventStatus.CANCELLED"
+ >{{ $t("Event cancelled") }}</b-tag
+ >
+ </span>
+ </div>
+ <div class="column is-3-tablet">
+ <participation-section
+ :participation="participations[0]"
+ :event="event"
+ :anonymousParticipation="anonymousParticipation"
+ @join-event="joinEvent"
+ @join-modal="isJoinModalActive = true"
+ @join-event-with-confirmation="joinEventWithConfirmation"
+ @confirm-leave="confirmLeave"
+ @cancel-anonymous-participation="cancelAnonymousParticipation"
+ />
+ <div class="has-text-right">
+ <template class="visibility" v-if="!event.draft">
+ <p v-if="event.visibility === EventVisibility.PUBLIC">
+ {{ $t("Public event") }}
+ <b-icon icon="earth" />
+ </p>
+ <p v-if="event.visibility === EventVisibility.UNLISTED">
+ {{ $t("Private event") }}
+ <b-icon icon="link" />
+ </p>
+ </template>
+ <template v-if="!event.local && organizer">
+ <a :href="event.url">
+ <tag>{{ organizer.domain }}</tag>
+ </a>
+ </template>
+ <p>
+ <router-link
+ class="participations-link"
+ v-if="actorIsOrganizer && event.draft === false"
+ :to="{
+ name: RouteName.PARTICIPATIONS,
+ params: { eventId: event.uuid },
+ }"
+ >
+ <!-- We retire one because of the event creator who is a participant -->
+ <span v-if="event.options.maximumAttendeeCapacity">
+ {{
+ $tc(
+ "{available}/{capacity} available places",
+ event.options.maximumAttendeeCapacity -
+ event.participantStats.participant,
+ {
+ available:
+ event.options.maximumAttendeeCapacity -
+ event.participantStats.participant,
+ capacity: event.options.maximumAttendeeCapacity,
+ }
+ )
+ }}
+ </span>
+ <span v-else>
+ {{
+ $tc(
+ "No one is participating|One person participating|{going} people participating",
+ event.participantStats.participant,
+ {
+ going: event.participantStats.participant,
+ }
+ )
+ }}
+ </span>
+ </router-link>
+ <span v-else>
+ <span v-if="event.options.maximumAttendeeCapacity">
+ {{
+ $tc(
+ "{available}/{capacity} available places",
+ event.options.maximumAttendeeCapacity -
+ event.participantStats.participant,
+ {
+ available:
+ event.options.maximumAttendeeCapacity -
+ event.participantStats.participant,
+ capacity: event.options.maximumAttendeeCapacity,
+ }
+ )
+ }}
+ </span>
+ <span v-else>
+ {{
+ $tc(
+ "No one is participating|One person participating|{going} people participating",
+ event.participantStats.participant,
+ {
+ going: event.participantStats.participant,
+ }
+ )
+ }}
+ </span>
+ </span>
+ <b-tooltip
+ type="is-dark"
+ v-if="!event.local"
+ :label="
+ $t(
+ 'The actual number of participants may differ, as this event is hosted on another instance.'
+ )
+ "
+ >
+ <b-icon size="is-small" icon="help-circle-outline" />
+ </b-tooltip>
+ <b-icon icon="ticket-confirmation-outline" />
+ </p>
+ <b-dropdown position="is-bottom-left" aria-role="list">
+ <b-button
+ slot="trigger"
+ role="button"
+ icon-right="dots-horizontal"
+ >
+ {{ $t("Actions") }}
+ </b-button>
+ <b-dropdown-item
+ aria-role="listitem"
+ has-link
+ v-if="actorIsOrganizer || event.draft"
>
<router-link
:to="{
- name: RouteName.GROUP,
- params: {
- preferredUsername: usernameWithDomain(
- event.attributedTo
- ),
- },
+ name: RouteName.EDIT_EVENT,
+ params: { eventId: event.uuid },
}"
>
- {{
- $t("@{group}", {
- group: usernameWithDomain(event.attributedTo),
- })
- }}
+ {{ $t("Edit") }}
+ <b-icon icon="pencil" />
</router-link>
- </popover-actor-card>
- </i18n>
- </span>
- </div>
- <p class="tags" v-if="event.tags && event.tags.length > 0">
- <router-link
- v-for="tag in event.tags"
- :key="tag.title"
- :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
- >
- <tag>{{ tag.title }}</tag>
- </router-link>
- </p>
- <b-tag type="is-warning" size="is-medium" v-if="event.draft"
- >{{ $t("Draft") }}
- </b-tag>
- <span
- class="event-status"
- v-if="event.status !== EventStatus.CONFIRMED"
- >
- <b-tag
- type="is-warning"
- v-if="event.status === EventStatus.TENTATIVE"
- >{{ $t("Event to be confirmed") }}</b-tag
- >
- <b-tag
- type="is-danger"
- v-if="event.status === EventStatus.CANCELLED"
- >{{ $t("Event cancelled") }}</b-tag
- >
- </span>
- </div>
- <div class="column is-3-tablet">
- <participation-section
- :participation="participations[0]"
- :event="event"
- :anonymousParticipation="anonymousParticipation"
- @join-event="joinEvent"
- @join-modal="isJoinModalActive = true"
- @join-event-with-confirmation="joinEventWithConfirmation"
- @confirm-leave="confirmLeave"
- @cancel-anonymous-participation="cancelAnonymousParticipation"
- />
- <div class="has-text-right">
- <template class="visibility" v-if="!event.draft">
- <p v-if="event.visibility === EventVisibility.PUBLIC">
- {{ $t("Public event") }}
- <b-icon icon="earth" />
- </p>
- <p v-if="event.visibility === EventVisibility.UNLISTED">
- {{ $t("Private event") }}
- <b-icon icon="link" />
- </p>
- </template>
- <template v-if="!event.local && organizer">
- <a :href="event.url">
- <tag>{{ organizer.domain }}</tag>
- </a>
- </template>
- <p>
- <router-link
- class="participations-link"
- v-if="actorIsOrganizer && event.draft === false"
- :to="{
- name: RouteName.PARTICIPATIONS,
- params: { eventId: event.uuid },
- }"
- >
- <!-- We retire one because of the event creator who is a participant -->
- <span v-if="event.options.maximumAttendeeCapacity">
- {{
- $tc(
- "{available}/{capacity} available places",
- event.options.maximumAttendeeCapacity -
- event.participantStats.participant,
- {
- available:
- event.options.maximumAttendeeCapacity -
- event.participantStats.participant,
- capacity: event.options.maximumAttendeeCapacity,
- }
- )
- }}
- </span>
- <span v-else>
- {{
- $tc(
- "No one is participating|One person participating|{going} people participating",
- event.participantStats.participant,
- {
- going: event.participantStats.participant,
- }
- )
- }}
- </span>
- </router-link>
- <span v-else>
- <span v-if="event.options.maximumAttendeeCapacity">
- {{
- $tc(
- "{available}/{capacity} available places",
- event.options.maximumAttendeeCapacity -
- event.participantStats.participant,
- {
- available:
- event.options.maximumAttendeeCapacity -
- event.participantStats.participant,
- capacity: event.options.maximumAttendeeCapacity,
- }
- )
- }}
- </span>
- <span v-else>
- {{
- $tc(
- "No one is participating|One person participating|{going} people participating",
- event.participantStats.participant,
- {
- going: event.participantStats.participant,
- }
- )
- }}
- </span>
- </span>
- <b-tooltip
- type="is-dark"
- v-if="!event.local"
- :label="
- $t(
- 'The actual number of participants may differ, as this event is hosted on another instance.'
- )
- "
- >
- <b-icon size="is-small" icon="help-circle-outline" />
- </b-tooltip>
- <b-icon icon="ticket-confirmation-outline" />
- </p>
- <b-dropdown position="is-bottom-left" aria-role="list">
- <b-button
- slot="trigger"
- role="button"
- icon-right="dots-horizontal"
- >
- {{ $t("Actions") }}
- </b-button>
- <b-dropdown-item
- aria-role="listitem"
- has-link
- v-if="actorIsOrganizer || event.draft"
- >
- <router-link
- :to="{
- name: RouteName.EDIT_EVENT,
- params: { eventId: event.uuid },
- }"
+ </b-dropdown-item>
+ <b-dropdown-item
+ aria-role="listitem"
+ has-link
+ v-if="actorIsOrganizer || event.draft"
>
- {{ $t("Edit") }}
- <b-icon icon="pencil" />
- </router-link>
- </b-dropdown-item>
- <b-dropdown-item
- aria-role="listitem"
- has-link
- v-if="actorIsOrganizer || event.draft"
- >
- <router-link
- :to="{
- name: RouteName.DUPLICATE_EVENT,
- params: { eventId: event.uuid },
- }"
+ <router-link
+ :to="{
+ name: RouteName.DUPLICATE_EVENT,
+ params: { eventId: event.uuid },
+ }"
+ >
+ {{ $t("Duplicate") }}
+ <b-icon icon="content-duplicate" />
+ </router-link>
+ </b-dropdown-item>
+ <b-dropdown-item
+ aria-role="listitem"
+ v-if="actorIsOrganizer || event.draft"
+ @click="openDeleteEventModalWrapper"
>
- {{ $t("Duplicate") }}
- <b-icon icon="content-duplicate" />
- </router-link>
- </b-dropdown-item>
- <b-dropdown-item
- aria-role="listitem"
- v-if="actorIsOrganizer || event.draft"
- @click="openDeleteEventModalWrapper"
- >
- {{ $t("Delete") }}
- <b-icon icon="delete" />
- </b-dropdown-item>
+ {{ $t("Delete") }}
+ <b-icon icon="delete" />
+ </b-dropdown-item>
- <hr
- class="dropdown-divider"
- aria-role="menuitem"
- v-if="actorIsOrganizer || event.draft"
- />
- <b-dropdown-item
- aria-role="listitem"
- v-if="!event.draft"
- @click="triggerShare()"
- >
- <span>
- {{ $t("Share this event") }}
- <b-icon icon="share" />
- </span>
- </b-dropdown-item>
- <b-dropdown-item
- aria-role="listitem"
- @click="downloadIcsEvent()"
- v-if="!event.draft"
- >
- <span>
- {{ $t("Add to my calendar") }}
- <b-icon icon="calendar-plus" />
- </span>
- </b-dropdown-item>
- <b-dropdown-item
- aria-role="listitem"
- v-if="ableToReport"
- @click="isReportModalActive = true"
- >
- <span>
- {{ $t("Report") }}
- <b-icon icon="flag" />
- </span>
- </b-dropdown-item>
- </b-dropdown>
+ <hr
+ class="dropdown-divider"
+ aria-role="menuitem"
+ v-if="actorIsOrganizer || event.draft"
+ />
+ <b-dropdown-item
+ aria-role="listitem"
+ v-if="!event.draft"
+ @click="triggerShare()"
+ >
+ <span>
+ {{ $t("Share this event") }}
+ <b-icon icon="share" />
+ </span>
+ </b-dropdown-item>
+ <b-dropdown-item
+ aria-role="listitem"
+ @click="downloadIcsEvent()"
+ v-if="!event.draft"
+ >
+ <span>
+ {{ $t("Add to my calendar") }}
+ <b-icon icon="calendar-plus" />
+ </span>
+ </b-dropdown-item>
+ <b-dropdown-item
+ aria-role="listitem"
+ v-if="ableToReport"
+ @click="isReportModalActive = true"
+ >
+ <span>
+ {{ $t("Report") }}
+ <b-icon icon="flag" />
+ </span>
+ </b-dropdown-item>
+ </b-dropdown>
+ </div>
</div>
</div>
- </div>
- </section>
+ </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 {