Issue #1546 Change block order
This commit is contained in:
Massedil
parent
ae02e28129
commit
02687e68bb
|
|
@ -373,18 +373,155 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
|
||||||
|
<!-- Public thing: Members -->
|
||||||
|
<group-section :title="t('Members')" icon="account-group">
|
||||||
|
<template #default>
|
||||||
|
<div class="flex flex-col justify-center h-full">
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-center"
|
||||||
|
v-if="isCurrentActorAGroupMember && !previewPublic && members"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<figure
|
||||||
|
:title="
|
||||||
|
t(`{'@'}{username} ({role})`, {
|
||||||
|
username: usernameWithDomain(member.actor),
|
||||||
|
role: member.role,
|
||||||
|
})
|
||||||
|
"
|
||||||
|
v-for="member in members.elements"
|
||||||
|
:key="member.actor.id"
|
||||||
|
class="-mr-3"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="rounded-full h-8"
|
||||||
|
:src="member.actor.avatar.url"
|
||||||
|
v-if="member.actor.avatar"
|
||||||
|
alt=""
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
/>
|
||||||
|
<AccountCircle v-else :size="32" />
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<h2 class="text-center">
|
||||||
|
{{
|
||||||
|
t(
|
||||||
|
"{count} members",
|
||||||
|
{
|
||||||
|
count: group.members?.total,
|
||||||
|
},
|
||||||
|
group.members?.total
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div></template
|
||||||
|
>
|
||||||
|
<template #create>
|
||||||
|
<o-button
|
||||||
|
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
||||||
|
tag="router-link"
|
||||||
|
:to="{
|
||||||
|
name: RouteName.GROUP_MEMBERS_SETTINGS,
|
||||||
|
params: { preferredUsername: usernameWithDomain(group) },
|
||||||
|
}"
|
||||||
|
class="button is-primary"
|
||||||
|
>{{ t("Add / Remove…") }}</o-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</group-section>
|
||||||
|
<!-- Public thing: About -->
|
||||||
|
<group-section :title="t('About')" icon="information">
|
||||||
|
<template #default>
|
||||||
|
<div
|
||||||
|
v-if="group.summary"
|
||||||
|
dir="auto"
|
||||||
|
class="prose lg:prose-xl dark:prose-invert p-2"
|
||||||
|
v-html="group.summary"
|
||||||
|
></div>
|
||||||
|
<empty-content v-else icon="information" :inline="true">
|
||||||
|
{{ t("No about content yet") }}
|
||||||
|
</empty-content>
|
||||||
|
</template>
|
||||||
|
<template #create>
|
||||||
|
<o-button
|
||||||
|
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
||||||
|
tag="router-link"
|
||||||
|
:to="{
|
||||||
|
name: RouteName.GROUP_PUBLIC_SETTINGS,
|
||||||
|
params: { preferredUsername: usernameWithDomain(group) },
|
||||||
|
}"
|
||||||
|
class="button is-primary"
|
||||||
|
>{{ t("Edit") }}</o-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</group-section>
|
||||||
|
<!-- Public thing: Location -->
|
||||||
|
<group-section :title="t('Location')" icon="earth">
|
||||||
|
<template #default
|
||||||
|
><div
|
||||||
|
class="flex flex-col justify-center h-full"
|
||||||
|
v-if="physicalAddress && physicalAddress.url"
|
||||||
|
>
|
||||||
|
<o-icon
|
||||||
|
v-if="physicalAddress.poiInfos.poiIcon.icon"
|
||||||
|
:icon="physicalAddress.poiInfos.poiIcon.icon"
|
||||||
|
customSize="48"
|
||||||
|
/>
|
||||||
|
<Earth v-else :size="48" />
|
||||||
|
<div class="address-wrapper">
|
||||||
|
<div class="address">
|
||||||
|
<div class="text-center">
|
||||||
|
<span v-if="!addressFullName(physicalAddress)">{{
|
||||||
|
t("No address defined")
|
||||||
|
}}</span>
|
||||||
|
<address dir="auto">
|
||||||
|
<p
|
||||||
|
class="addressDescription"
|
||||||
|
:title="physicalAddress.poiInfos.name"
|
||||||
|
>
|
||||||
|
{{ physicalAddress.poiInfos.name }}
|
||||||
|
</p>
|
||||||
|
<p class="has-text-grey-dark">
|
||||||
|
{{ physicalAddress.poiInfos.alternativeName }}
|
||||||
|
</p>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<empty-content v-else icon="earth" :inline="true">
|
||||||
|
{{ t("No location yet") }}
|
||||||
|
</empty-content></template
|
||||||
|
>
|
||||||
|
<template #create>
|
||||||
|
<o-button
|
||||||
|
v-if="physicalAddress && physicalAddress.geom"
|
||||||
|
variant="text"
|
||||||
|
@click="showMap = !showMap"
|
||||||
|
@keyup.enter="showMap = !showMap"
|
||||||
|
>
|
||||||
|
{{ t("Show map") }}
|
||||||
|
</o-button>
|
||||||
|
<o-button
|
||||||
|
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
||||||
|
tag="router-link"
|
||||||
|
:to="{
|
||||||
|
name: RouteName.GROUP_PUBLIC_SETTINGS,
|
||||||
|
params: { preferredUsername: usernameWithDomain(group) },
|
||||||
|
}"
|
||||||
|
class="button is-primary"
|
||||||
|
>{{ t("Edit") }}</o-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</group-section>
|
||||||
|
</div>
|
||||||
<div v-if="group">
|
<div v-if="group">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
|
||||||
<!-- Private thing: Group discussions -->
|
|
||||||
<Discussions
|
|
||||||
v-if="isCurrentActorAGroupMember && !previewPublic"
|
|
||||||
:group="discussionGroup ?? group"
|
|
||||||
/>
|
|
||||||
<!-- Private thing: Resources -->
|
|
||||||
<Resources
|
|
||||||
v-if="isCurrentActorAGroupMember && !previewPublic"
|
|
||||||
:group="resourcesGroup ?? group"
|
|
||||||
/>
|
|
||||||
<!-- Public thing: Events -->
|
<!-- Public thing: Events -->
|
||||||
<Events
|
<Events
|
||||||
:group="group"
|
:group="group"
|
||||||
|
|
@ -396,153 +533,16 @@
|
||||||
:isModerator="isCurrentActorAGroupModerator && !previewPublic"
|
:isModerator="isCurrentActorAGroupModerator && !previewPublic"
|
||||||
:isMember="isCurrentActorAGroupMember && !previewPublic"
|
:isMember="isCurrentActorAGroupMember && !previewPublic"
|
||||||
/>
|
/>
|
||||||
</div>
|
<!-- Private thing: Group discussions -->
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
|
<Discussions
|
||||||
<!-- Public thing: Members -->
|
v-if="isCurrentActorAGroupMember && !previewPublic"
|
||||||
<group-section :title="t('Members')" icon="account-group">
|
:group="discussionGroup ?? group"
|
||||||
<template #default>
|
/>
|
||||||
<div class="flex flex-col justify-center h-full">
|
<!-- Private thing: Resources -->
|
||||||
<div
|
<Resources
|
||||||
class="flex flex-col items-center"
|
v-if="isCurrentActorAGroupMember && !previewPublic"
|
||||||
v-if="isCurrentActorAGroupMember && !previewPublic && members"
|
:group="resourcesGroup ?? group"
|
||||||
>
|
/>
|
||||||
<div class="flex">
|
|
||||||
<figure
|
|
||||||
:title="
|
|
||||||
t(`{'@'}{username} ({role})`, {
|
|
||||||
username: usernameWithDomain(member.actor),
|
|
||||||
role: member.role,
|
|
||||||
})
|
|
||||||
"
|
|
||||||
v-for="member in members.elements"
|
|
||||||
:key="member.actor.id"
|
|
||||||
class="-mr-3"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="rounded-full h-8"
|
|
||||||
:src="member.actor.avatar.url"
|
|
||||||
v-if="member.actor.avatar"
|
|
||||||
alt=""
|
|
||||||
width="32"
|
|
||||||
height="32"
|
|
||||||
/>
|
|
||||||
<AccountCircle v-else :size="32" />
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<h2 class="text-center">
|
|
||||||
{{
|
|
||||||
t(
|
|
||||||
"{count} members",
|
|
||||||
{
|
|
||||||
count: group.members?.total,
|
|
||||||
},
|
|
||||||
group.members?.total
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div></template
|
|
||||||
>
|
|
||||||
<template #create>
|
|
||||||
<o-button
|
|
||||||
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
|
||||||
tag="router-link"
|
|
||||||
:to="{
|
|
||||||
name: RouteName.GROUP_MEMBERS_SETTINGS,
|
|
||||||
params: { preferredUsername: usernameWithDomain(group) },
|
|
||||||
}"
|
|
||||||
class="button is-primary"
|
|
||||||
>{{ t("Add / Remove…") }}</o-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</group-section>
|
|
||||||
<!-- Public thing: About -->
|
|
||||||
<group-section :title="t('About')" icon="information">
|
|
||||||
<template #default>
|
|
||||||
<div
|
|
||||||
v-if="group.summary"
|
|
||||||
dir="auto"
|
|
||||||
class="prose lg:prose-xl dark:prose-invert p-2"
|
|
||||||
v-html="group.summary"
|
|
||||||
></div>
|
|
||||||
<empty-content v-else icon="information" :inline="true">
|
|
||||||
{{ t("No about content yet") }}
|
|
||||||
</empty-content>
|
|
||||||
</template>
|
|
||||||
<template #create>
|
|
||||||
<o-button
|
|
||||||
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
|
||||||
tag="router-link"
|
|
||||||
:to="{
|
|
||||||
name: RouteName.GROUP_PUBLIC_SETTINGS,
|
|
||||||
params: { preferredUsername: usernameWithDomain(group) },
|
|
||||||
}"
|
|
||||||
class="button is-primary"
|
|
||||||
>{{ t("Edit") }}</o-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</group-section>
|
|
||||||
<!-- Public thing: Location -->
|
|
||||||
<group-section :title="t('Location')" icon="earth">
|
|
||||||
<template #default
|
|
||||||
><div
|
|
||||||
class="flex flex-col justify-center h-full"
|
|
||||||
v-if="physicalAddress && physicalAddress.url"
|
|
||||||
>
|
|
||||||
<o-icon
|
|
||||||
v-if="physicalAddress.poiInfos.poiIcon.icon"
|
|
||||||
:icon="physicalAddress.poiInfos.poiIcon.icon"
|
|
||||||
customSize="48"
|
|
||||||
/>
|
|
||||||
<Earth v-else :size="48" />
|
|
||||||
<div class="address-wrapper">
|
|
||||||
<div class="address">
|
|
||||||
<div class="text-center">
|
|
||||||
<span v-if="!addressFullName(physicalAddress)">{{
|
|
||||||
t("No address defined")
|
|
||||||
}}</span>
|
|
||||||
<address dir="auto">
|
|
||||||
<p
|
|
||||||
class="addressDescription"
|
|
||||||
:title="physicalAddress.poiInfos.name"
|
|
||||||
>
|
|
||||||
{{ physicalAddress.poiInfos.name }}
|
|
||||||
</p>
|
|
||||||
<p class="has-text-grey-dark">
|
|
||||||
{{ physicalAddress.poiInfos.alternativeName }}
|
|
||||||
</p>
|
|
||||||
</address>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<empty-content v-else icon="earth" :inline="true">
|
|
||||||
{{ t("No location yet") }}
|
|
||||||
</empty-content></template
|
|
||||||
>
|
|
||||||
<template #create>
|
|
||||||
<o-button
|
|
||||||
v-if="physicalAddress && physicalAddress.geom"
|
|
||||||
variant="text"
|
|
||||||
@click="showMap = !showMap"
|
|
||||||
@keyup.enter="showMap = !showMap"
|
|
||||||
>
|
|
||||||
{{ t("Show map") }}
|
|
||||||
</o-button>
|
|
||||||
<o-button
|
|
||||||
v-if="isCurrentActorAGroupAdmin && !previewPublic"
|
|
||||||
tag="router-link"
|
|
||||||
:to="{
|
|
||||||
name: RouteName.GROUP_PUBLIC_SETTINGS,
|
|
||||||
params: { preferredUsername: usernameWithDomain(group) },
|
|
||||||
}"
|
|
||||||
class="button is-primary"
|
|
||||||
>{{ t("Edit") }}</o-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</group-section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-2">
|
<div class="my-2">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue