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 + } } } }