From a2017a354611eecfce043f59dc337868a6e2d21b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sat, 6 Nov 2021 11:15:16 +0100
Subject: [PATCH] Rename event address to inline address

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../EventAddress.vue => Address/InlineAddress.vue}    | 11 ++++++++++-
 js/src/components/Event/EventCard.vue                 |  6 +++---
 js/src/components/Event/EventMinimalistCard.vue       |  6 +++---
 js/src/components/Event/EventParticipationCard.vue    |  6 +++---
 js/src/components/Group/GroupCard.vue                 | 11 +++++++++--
 js/src/graphql/search.ts                              |  3 +++
 6 files changed, 31 insertions(+), 12 deletions(-)
 rename js/src/components/{Event/EventAddress.vue => Address/InlineAddress.vue} (81%)

diff --git a/js/src/components/Event/EventAddress.vue b/js/src/components/Address/InlineAddress.vue
similarity index 81%
rename from js/src/components/Event/EventAddress.vue
rename to js/src/components/Address/InlineAddress.vue
index 8b6c1b171..48efc4ea6 100644
--- a/js/src/components/Event/EventAddress.vue
+++ b/js/src/components/Address/InlineAddress.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    class="ellipsis"
     :title="
       isDescriptionDifferentFromLocality
         ? `${physicalAddress.description}, ${physicalAddress.locality}`
@@ -22,7 +23,7 @@ import { PropType } from "vue";
 import { Prop, Vue, Component } from "vue-property-decorator";
 
 @Component
-export default class EventAddress extends Vue {
+export default class InlineAddress extends Vue {
   @Prop({ required: true, type: Object as PropType<IAddress> })
   physicalAddress!: IAddress;
 
@@ -34,3 +35,11 @@ export default class EventAddress extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+.ellipsis {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 269e41b13..a2f9f12c9 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -56,7 +56,7 @@
               {{ organizerDisplayName(event) }}
             </span>
           </div>
-          <event-address
+          <inline-address
             v-if="event.physicalAddress"
             class="event-subtitle"
             :physical-address="event.physicalAddress"
@@ -87,13 +87,13 @@ import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { Actor, Person } from "@/types/actor";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
-import EventAddress from "@/components/Event/EventAddress.vue";
+import InlineAddress from "@/components/Address/InlineAddress.vue";
 
 @Component({
   components: {
     DateCalendarIcon,
     LazyImageWrapper,
-    EventAddress,
+    InlineAddress,
   },
 })
 export default class EventCard extends Vue {
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index 09443f91f..0e6a5715a 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -26,7 +26,7 @@
         >
         {{ event.title }}
       </h3>
-      <event-address
+      <inline-address
         v-if="event.physicalAddress"
         class="event-subtitle"
         :physical-address="event.physicalAddress"
@@ -107,13 +107,13 @@ import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import EventAddress from "@/components/Event/EventAddress.vue";
+import InlineAddress from "@/components/Address/InlineAddress.vue";
 
 @Component({
   components: {
     DateCalendarIcon,
     LazyImageWrapper,
-    EventAddress,
+    InlineAddress,
   },
 })
 export default class EventMinimalistCard extends Vue {
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 5843d01f2..660b38b63 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -54,7 +54,7 @@
               <h3 class="title">{{ participation.event.title }}</h3>
             </router-link>
           </div>
-          <event-address
+          <inline-address
             v-if="participation.event.physicalAddress"
             class="event-subtitle"
             :physical-address="participation.event.physicalAddress"
@@ -270,7 +270,7 @@ import RouteName from "../../router/name";
 import { changeIdentity } from "../../utils/auth";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import EventAddress from "@/components/Event/EventAddress.vue";
+import InlineAddress from "@/components/Address/InlineAddress.vue";
 import { PropType } from "vue";
 
 const defaultOptions: IEventCardOptions = {
@@ -286,7 +286,7 @@ const defaultOptions: IEventCardOptions = {
     DateCalendarIcon,
     PopoverActorCard,
     LazyImageWrapper,
-    EventAddress,
+    InlineAddress,
   },
   apollo: {
     currentActor: {
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index a436df397..3300a00d7 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -31,7 +31,12 @@
       </div>
       <div class="content" v-html="group.summary" />
       <div class="card-custom-footer">
-        <span class="has-text-grey-dark">
+        <inline-address
+          class="has-text-grey-dark"
+          v-if="group.physicalAddress"
+          :physicalAddress="group.physicalAddress"
+        />
+        <p class="has-text-grey-dark">
           {{
             $tc(
               "{count} members or followers",
@@ -41,7 +46,7 @@
               }
             )
           }}
-        </span>
+        </p>
       </div>
     </div>
   </router-link>
@@ -52,10 +57,12 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
+import InlineAddress from "@/components/Address/InlineAddress.vue";
 
 @Component({
   components: {
     LazyImageWrapper,
+    InlineAddress,
   },
 })
 export default class GroupCard extends Vue {
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index abb85fc21..a79d318a2 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -69,6 +69,9 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
         followers(approved: true) {
           total
         }
+        physicalAddress {
+          ...AdressFragment
+        }
       }
     }
   }