From 910cae8562aee7b182e6de322f516a533c6aa818 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Thu, 10 Jun 2021 10:31:05 +0200
Subject: [PATCH] Hide <hr> on home if no elements above
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/views/Home.vue | 28 +++++++++++++++++++++-------
1 file changed, 21 insertions(+), 7 deletions(-)
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index f9581114c..fa743a7e9 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -189,10 +189,7 @@
}}</b-message>
</section>
<!-- Your upcoming events -->
- <section
- v-if="currentActor.id && goingToEvents.size > 0"
- class="container"
- >
+ <section v-if="canShowMyUpcomingEvents" class="container">
<h3 class="title">{{ $t("Your upcoming events") }}</h3>
<b-loading :active.sync="$apollo.loading" />
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
@@ -236,7 +233,7 @@
</span>
</section>
<!-- Last week events -->
- <section v-if="currentActor && lastWeekEvents.length > 0">
+ <section v-if="canShowLastWeekEvents">
<h3 class="title">{{ $t("Last week") }}</h3>
<b-loading :active.sync="$apollo.loading" />
<div>
@@ -250,7 +247,7 @@
</div>
</section>
<!-- Events close to you -->
- <section class="events-close" v-if="closeEvents.total > 0">
+ <section class="events-close" v-if="canShowCloseEvents">
<h2 class="is-size-2 has-text-weight-bold">
{{ $t("Events nearby") }}
</h2>
@@ -285,7 +282,12 @@
</div>
</div>
</section>
- <hr class="home-separator" />
+ <hr
+ class="home-separator"
+ v-if="
+ canShowMyUpcomingEvents || canShowLastWeekEvents || canShowCloseEvents
+ "
+ />
<section class="events-recent">
<h2 class="is-size-2 has-text-weight-bold">
{{ $t("Last published events") }}
@@ -586,6 +588,18 @@ export default class Home extends Vue {
});
}
}
+
+ get canShowMyUpcomingEvents(): boolean {
+ return this.currentActor.id != undefined && this.goingToEvents.size > 0;
+ }
+
+ get canShowLastWeekEvents(): boolean {
+ return this.currentActor && this.lastWeekEvents.length > 0;
+ }
+
+ get canShowCloseEvents(): boolean {
+ return this.closeEvents.total > 0;
+ }
}
</script>