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>