diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 0db363aeb..c4a686b25 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -810,5 +810,15 @@
"Unable to load event for participation. The error details are provided below:": "Unable to load event for participation. The error details are provided below:",
"Unable to save your participation in this browser.": "Unable to save your participation in this browser.",
"return to the event's page": "return to the event's page",
- "View all events": "View all events"
+ "View all events": "View all events",
+ "You will find here all the events you have created or of which you are a participant.": "You will find here all the events you have created or of which you are a participant.",
+ "Create event": "Create event",
+ "You didn't create or join any event yet": "You didn't create or join any event yet",
+ "create an event": "create an event",
+ "explore the events": "explore the events",
+ "Do you wish to {create_event} or {explore_events}?": "Do you wish to {create_event} or {explore_events}?",
+ "You are not part of any group": "You are not part of any group",
+ "create a group": "create a group",
+ "explore the groups": "explore the groups",
+ "Do you wish to {create_group} or {explore_groups}?": "Do you wish to {create_group} or {explore_groups}?"
}
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index f84e45794..8d4b9a144 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -904,5 +904,15 @@
"Unable to save your participation in this browser.": "Échec de la sauvegarde de votre participation dans ce navigateur.",
"return to the event's page": "retourner sur la page de l'événement",
"You may now close this window, or {return_to_event}.": "Vous pouvez maintenant fermer cette fenêtre, ou bien {return_to_event}.",
- "View all events": "Voir tous les événements"
+ "View all events": "Voir tous les événements",
+ "You will find here all the events you have created or of which you are a participant.": "Vous trouverez ici tous les événements que vous avez créé ou dont vous êtes un·e participant·e.",
+ "Create event": "Créer un événement",
+ "You didn't create or join any event yet.": "Vous n'avez pas encore créé ou rejoint d'événement.",
+ "create an event": "créer un événement",
+ "explore the events": "explorer les événements",
+ "Do you wish to {create_event} or {explore_events}?": "Voulez-vous {create_event} ou {explore_events} ?",
+ "You are not part of any group.": "Vous ne faites partie d'aucun groupe.",
+ "create a group": "créer un groupe",
+ "explore the groups": "explorer les groupes",
+ "Do you wish to {create_group} or {explore_groups}?": "Voulez-vous {create_group} ou {explore_groups} ?"
}
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 678b0b9f8..32083c01b 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -1,8 +1,22 @@
<template>
- <section class="section container">
+ <div class="section container">
<h1 class="title">
{{ $t("My events") }}
</h1>
+ <p>
+ {{
+ $t(
+ "You will find here all the events you have created or of which you are a participant."
+ )
+ }}
+ </p>
+ <div class="buttons">
+ <router-link
+ class="button is-primary"
+ :to="{ name: RouteName.CREATE_EVENT }"
+ >{{ $t("Create event") }}</router-link
+ >
+ </div>
<b-loading :active.sync="$apollo.loading"></b-loading>
<section v-if="futureParticipations.length > 0">
<subtitle>
@@ -77,32 +91,44 @@
>
</div>
</section>
- <b-message
+ <section
+ class="has-text-centered not-found"
v-if="
futureParticipations.length === 0 &&
pastParticipations.length === 0 &&
- $apollo.loading === false
+ !$apollo.loading
"
- type="is-danger"
>
- {{ $t("No events found") }}
-
- <div class="suggest-create-event">
- <b-button
- tag="router-link"
- :to="{ name: RouteName.CREATE_EVENT }"
- type="is-primary"
- >
- {{ $t("Create") }}
- </b-button>
+ <div class="columns is-vertical is-centered">
+ <div class="column is-three-quarters">
+ <div class="img-container" />
+ <div class="content has-text-centered">
+ <p>
+ {{ $t("You didn't create or join any event yet.") }}
+ <i18n path="Do you wish to {create_event} or {explore_events}?">
+ <router-link
+ :to="{ name: RouteName.CREATE_EVENT }"
+ slot="create_event"
+ >{{ $t("create an event") }}</router-link
+ >
+ <router-link
+ :to="{ name: RouteName.SEARCH }"
+ slot="explore_events"
+ >{{ $t("explore the events") }}</router-link
+ >
+ </i18n>
+ </p>
+ </div>
+ </div>
</div>
- </b-message>
- </section>
+ </section>
+ </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ParticipantRole } from "@/types/enums";
+import RouteName from "@/router/name";
import { IParticipant, Participant } from "../../types/participant.model";
import {
LOGGED_USER_PARTICIPATIONS,
@@ -183,6 +209,8 @@ export default class MyEvents extends Vue {
drafts: IEvent[] = [];
+ RouteName = RouteName;
+
static monthlyParticipations(
participations: IParticipant[],
revertSort = false
@@ -309,6 +337,10 @@ export default class MyEvents extends Vue {
<style lang="scss" scoped>
main > .container {
background: $white;
+
+ & > h1 {
+ margin: 10px auto 5px;
+ }
}
.participation {
@@ -320,4 +352,16 @@ section {
text-transform: capitalize;
}
}
+
+.not-found {
+ .img-container {
+ background-image: url("/img/pics/2020-10-06-mobilizon-illustration-B_creation-evenement.jpg");
+ max-width: 450px;
+ height: 300px;
+ box-shadow: 0 0 8px 8px white inset;
+ background-size: cover;
+ border-radius: 10px;
+ margin: auto auto 1rem;
+ }
+}
</style>
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index 1d80acb27..43473ddaa 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -40,12 +40,33 @@
>
</b-pagination>
</section>
- <b-message
- v-if="$apollo.loading === false && memberships.length === 0"
- type="is-danger"
+ <section
+ class="has-text-centered not-found"
+ v-if="memberships.length === 0 && !$apollo.loading"
>
- {{ $t("No groups found") }}
- </b-message>
+ <div class="columns is-vertical is-centered">
+ <div class="column is-three-quarters">
+ <div class="img-container" />
+ <div class="content has-text-centered">
+ <p>
+ {{ $t("You are not part of any group.") }}
+ <i18n path="Do you wish to {create_group} or {explore_groups}?">
+ <router-link
+ :to="{ name: RouteName.CREATE_GROUP }"
+ slot="create_group"
+ >{{ $t("create a group") }}</router-link
+ >
+ <router-link
+ :to="{ name: RouteName.SEARCH }"
+ slot="explore_groups"
+ >{{ $t("explore the groups") }}</router-link
+ >
+ </i18n>
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
</section>
</template>
@@ -156,6 +177,10 @@ export default class MyGroups extends Vue {
<style lang="scss" scoped>
main > .container {
background: $white;
+
+ & > h1 {
+ margin: 10px auto 5px;
+ }
}
.participation {
@@ -171,4 +196,16 @@ section {
.group-member-card {
margin-bottom: 1rem;
}
+
+.not-found {
+ .img-container {
+ background-image: url("/img/pics/2020-10-06-mobilizon-illustration-C_groupe.jpg");
+ max-width: 450px;
+ height: 300px;
+ box-shadow: 0 0 8px 8px white inset;
+ background-size: cover;
+ border-radius: 10px;
+ margin: auto auto 1rem;
+ }
+}
</style>