mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
c1a05bc73b
* Add distance to group profile if location is defined * Fix snapshot tests in 'webapp/pages/groups/_id/_slug.spec.js' * Fix prop Vue warning in test 'webapp/pages/groups/_id/_slug.spec.js' * reuse locationFragement for groups * use better order on locationFragement parameters * moved LocationInfo Component to correct place as its used in Group & User related context * use size prop * reduce changeset * update snapshots * remove computed property & simplify component * more tests & updated snapshots --------- Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
59 lines
1022 B
Vue
59 lines
1022 B
Vue
<template>
|
|
<div :class="`location-info size-${size}`">
|
|
<div class="location">
|
|
<base-icon name="map-marker" />
|
|
{{ locationData.name }}
|
|
</div>
|
|
<div v-if="locationData.distanceToMe !== null" class="distance">
|
|
{{ $t('location.distance', { distance: locationData.distanceToMe }) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'LocationInfo',
|
|
props: {
|
|
locationData: { type: Object, default: null },
|
|
size: {
|
|
type: String,
|
|
default: 'base',
|
|
validator: (value) => {
|
|
return value.match(/(small|base)/)
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.location-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.location {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.size-base {
|
|
> .distance {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.size-small {
|
|
font-size: 0.8rem;
|
|
color: #70677e;
|
|
margin-bottom: 12px;
|
|
|
|
> .distance {
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
</style>
|