Rename event address to inline address

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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>

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 {

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 {

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: {

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 {

js/src/graphql/search.ts

@@ -69,6 +69,9 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
         followers(approved: true) {
           total
         }
+        physicalAddress {
+          ...AdressFragment
+        }
       }
     }
   }