diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index 2a120151f..8c93c63b0 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -1,6 +1,6 @@
<template>
<router-link
- class="event-minimalist-card-wrapper"
+ class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
dir="auto"
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
>
diff --git a/js/src/components/Utils/EmptyContent.vue b/js/src/components/Utils/EmptyContent.vue
index 60102696e..d76ae818f 100644
--- a/js/src/components/Utils/EmptyContent.vue
+++ b/js/src/components/Utils/EmptyContent.vue
@@ -1,5 +1,9 @@
<template>
- <div class="empty-content" :class="{ inline }" role="note">
+ <div
+ class="empty-content"
+ :class="{ inline, 'text-center': center }"
+ role="note"
+ >
<b-icon :icon="icon" size="is-large" />
<h2 class="empty-content__title">
<!-- @slot Mandatory title -->
@@ -18,6 +22,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
export default class EmptyContent extends Vue {
@Prop({ type: String, required: true }) icon!: string;
@Prop({ type: Boolean, required: false, default: false }) inline!: boolean;
+ @Prop({ type: Boolean, required: false, default: false }) center!: boolean;
}
</script>
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 7d40c9578..37835ede4 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1318,5 +1318,8 @@
"return to the homepage": "return to the homepage",
"Thanks a lot, your feedback was submitted!": "Thanks a lot, your feedback was submitted!",
"You may also:": "You may also:",
- "You may now close this page or {return_to_the_homepage}.": "You may now close this page or {return_to_the_homepage}."
-}
+ "You may now close this page or {return_to_the_homepage}.": "You may now close this page or {return_to_the_homepage}.",
+ "This group is a remote group, it's possible the original instance has more informations.": "This group is a remote group, it's possible the original instance has more informations.",
+ "View the group profile on the original instance": "View the group profile on the original instance",
+ "View past events": "View past events"
+}
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 8a2b01d61..35a52c4a3 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1309,5 +1309,8 @@
"Category": "Catégorie",
"Select a category": "Choisissez une categorie",
"Any category": "N'importe quelle catégorie",
- "No instance found.": "Aucune instance trouvée."
+ "No instance found.": "Aucune instance trouvée.",
+ "This group is a remote group, it's possible the original instance has more informations.": "Ce groupe est un groupe distant, il est possible que l'instance d'origine ait plus d'informations.",
+ "View the group profile on the original instance": "Afficher le profil du groupe sur l'instance d'origine",
+ "View past events": "Voir les événements passés"
}
diff --git a/js/src/views/Event/GroupEvents.vue b/js/src/views/Event/GroupEvents.vue
index 642892a9b..a930c1bf9 100644
--- a/js/src/views/Event/GroupEvents.vue
+++ b/js/src/views/Event/GroupEvents.vue
@@ -43,21 +43,40 @@
<subtitle>
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
</subtitle>
- <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
+ <b-switch class="mb-4" v-model="showPassedEvents">{{
+ $t("Past events")
+ }}</b-switch>
<grouped-multi-event-minimalist-card
:events="group.organizedEvents.elements"
:isCurrentActorMember="isCurrentActorMember"
/>
- <b-message
+ <empty-content
v-if="
group.organizedEvents.elements.length === 0 &&
$apollo.loading === false
"
- type="is-danger"
+ icon="calendar"
+ :inline="true"
+ :center="true"
>
{{ $t("No events found") }}
- </b-message>
+ <template v-if="group.domain !== null">
+ <div class="mt-4">
+ <p>
+ {{
+ $t(
+ "This group is a remote group, it's possible the original instance has more informations."
+ )
+ }}
+ </p>
+ <b-button type="is-text" tag="a" :href="group.url">
+ {{ $t("View the group profile on the original instance") }}
+ </b-button>
+ </div>
+ </template>
+ </empty-content>
<b-pagination
+ class="mt-4"
:total="group.organizedEvents.total"
v-model="eventsPage"
:per-page="EVENTS_PAGE_LIMIT"
@@ -81,6 +100,7 @@ import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import GroupMixin from "@/mixins/group";
import { IMember } from "@/types/actor/member.model";
import { FETCH_GROUP_EVENTS } from "@/graphql/event";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { displayName, usernameWithDomain } from "../../types/actor";
const EVENTS_PAGE_LIMIT = 10;
@@ -114,6 +134,7 @@ const EVENTS_PAGE_LIMIT = 10;
},
},
components: {
+ EmptyContent,
Subtitle,
GroupedMultiEventMinimalistCard,
},
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index 2ed8013ac..b8e693efe 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -579,29 +579,47 @@
</div>
<empty-content v-else-if="group" icon="calendar" :inline="true">
{{ $t("No public upcoming events") }}
- <template #desc v-if="isCurrentActorFollowing">
- <i18n
- class="has-text-grey-dark"
- path="You will receive notifications about this group's public activity depending on %{notification_settings}."
- >
- <router-link
- :to="{ name: RouteName.NOTIFICATIONS }"
- slot="notification_settings"
- >{{ $t("your notification settings") }}</router-link
+ <template #desc>
+ <template v-if="isCurrentActorFollowing">
+ <i18n
+ class="has-text-grey-dark"
+ path="You will receive notifications about this group's public activity depending on %{notification_settings}."
>
- </i18n>
+ <router-link
+ :to="{ name: RouteName.NOTIFICATIONS }"
+ slot="notification_settings"
+ >{{ $t("your notification settings") }}</router-link
+ >
+ </i18n>
+ </template>
+ <b-button
+ tag="router-link"
+ class="my-2"
+ type="is-text"
+ :to="{
+ name: RouteName.GROUP_EVENTS,
+ params: { preferredUsername: usernameWithDomain(group) },
+ query: { future: false },
+ }"
+ >{{ $t("View past events") }}</b-button
+ >
</template>
</empty-content>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
- <router-link
- v-if="organizedEvents.total > 0"
- :to="{
- name: RouteName.GROUP_EVENTS,
- params: { preferredUsername: usernameWithDomain(group) },
- query: { future: organizedEvents.elements.length > 0 },
- }"
- >{{ $t("View all events") }}</router-link
- >
+ <div class="flex justify-center">
+ <b-button
+ tag="router-link"
+ class="my-4"
+ type="is-text"
+ v-if="organizedEvents.total > 0"
+ :to="{
+ name: RouteName.GROUP_EVENTS,
+ params: { preferredUsername: usernameWithDomain(group) },
+ query: { future: organizedEvents.elements.length > 0 },
+ }"
+ >{{ $t("View all events") }}</b-button
+ >
+ </div>
</section>
<section>
<subtitle>{{ $t("Latest posts") }}</subtitle>