mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-18 12:31:27 +00:00
135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<div class="group-info-card">
|
|
<div class="card card-body mt-3 shadow-none border rounded-lg">
|
|
<p class="title">About</p>
|
|
|
|
<p v-if="group.description && group.description.length > 1" class="description" v-html="group.description"></p>
|
|
<p v-else class="description">This group does not have a description.</p>
|
|
|
|
</div>
|
|
<div class="card card-body mt-3 shadow-none border rounded-lg">
|
|
<div v-if="group.membership == 'all'" class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-globe fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title">Public</p>
|
|
<p class="fact-subtitle">Anyone can see who's in the group and what they post.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="group.membership == 'private'" class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-lock fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title">Private</p>
|
|
<p class="fact-subtitle">Only members can see who's in the group and what they post.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="group.config.discoverable == true" class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-eye fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title">Visible</p>
|
|
<p class="fact-subtitle">Anyone can find this group.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="group.config.discoverable == false" class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-eye-slash fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title">Hidden</p>
|
|
<p class="fact-subtitle">Only members can find this group.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-map-marker-alt fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title">Fediverse</p>
|
|
<p class="fact-subtitle">This group has not specified a location.</p>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="fact">
|
|
<div class="fact-icon">
|
|
<i class="fal fa-users fa-lg"></i>
|
|
</div>
|
|
<div class="fact-body">
|
|
<p class="fact-title"">{{ group.category.name }}</p>
|
|
<p class="fact-subtitle">Category</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mb-0 font-weight-light text-lighter">Created: {{ timestampFormat(group.created_at) }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
export default {
|
|
props: {
|
|
group: {
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
timestampFormat(date, showTime = false) {
|
|
let ts = new Date(date);
|
|
return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.group-info-card {
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.description {
|
|
font-size: 15px;
|
|
font-weight:400;
|
|
color: #6c757d;
|
|
margin-bottom: 0;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
.fact {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
|
|
&-body {
|
|
flex: 1;
|
|
}
|
|
|
|
&-icon {
|
|
width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-subtitle {
|
|
font-size: 14px;
|
|
margin-bottom: 0;
|
|
color: #6c757d;
|
|
}
|
|
}
|
|
}
|
|
</style>
|