mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
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 && !isOwner" 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)/)
|
|
},
|
|
},
|
|
isOwner: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
},
|
|
}
|
|
</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>
|