2019-01-21 15:08:22 +01:00
< template >
2020-02-18 08:57:00 +01:00
< div class = "container is-widescreen" >
2020-07-09 17:24:28 +02:00
< div class = "header" >
2022-01-10 15:19:16 +01:00
< breadcrumbs -nav
v - if = "group"
: links = " [
{ name : RouteName . MY _GROUPS , text : $t ( 'My groups' ) } ,
{
name : RouteName . GROUP ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
text : displayName ( group ) ,
} ,
] "
/ >
2021-08-04 11:23:37 +02:00
< b -loading :active.sync ="$apollo.loading" > < / b - l o a d i n g >
2021-06-16 11:25:53 +02:00
< header class = "block-container presentation" v-if ="group" >
2021-06-15 17:25:33 +02:00
< div class = "banner-container" >
2021-06-16 11:25:53 +02:00
< lazy -image -wrapper :picture ="group.banner" / >
2021-06-15 17:25:33 +02:00
< / div >
< div class = "header" >
< div class = "avatar-container" >
2020-09-29 09:53:48 +02:00
< figure class = "image is-128x128" v-if ="group.avatar" >
< img class = "is-rounded" :src ="group.avatar.url" alt = "" / >
2020-02-18 08:57:00 +01:00
< / figure >
2020-07-09 17:24:28 +02:00
< b -icon v -else size = "is-large" icon = "account-group" / >
2020-02-18 08:57:00 +01:00
< / div >
2021-06-15 17:25:33 +02:00
< div class = "title-container" >
2020-07-09 17:24:28 +02:00
< h1 v-if ="group.name" > {{ group.name }} < / h1 >
< b -skeleton v -else :animated ="true" / >
2021-11-07 21:02:06 +01:00
< small
dir = "ltr"
class = "has-text-grey-dark"
v - if = "group.preferredUsername"
2020-07-09 17:24:28 +02:00
> @ { { usernameWithDomain ( group ) } } < / s m a l l
>
< b -skeleton v -else :animated ="true" / >
< br / >
2021-06-15 17:25:33 +02:00
< / div >
< div class = "group-metadata" >
2021-06-16 11:25:53 +02:00
< div
class = "block-column members"
v - if = "isCurrentActorAGroupMember && !previewPublic"
>
2021-06-15 17:25:33 +02:00
< div >
< figure
class = "image is-32x32"
: title = "
$t ( ` @{username} ({role}) ` , {
username : usernameWithDomain ( member . actor ) ,
role : member . role ,
} )
"
v - for = "member in members"
: key = "member.actor.id"
>
< img
class = "is-rounded"
: src = "member.actor.avatar.url"
v - if = "member.actor.avatar"
alt
/ >
< b -icon v -else size = "is-medium" icon = "account-circle" / >
< / figure >
< / div >
< p >
2021-06-16 11:25:53 +02:00
{ {
$tc ( "{count} members" , group . members . total , {
count : group . members . total ,
} )
} }
2021-06-15 17:25:33 +02:00
< router -link
v - if = "isCurrentActorAGroupAdmin"
: to = " {
name : RouteName . GROUP _MEMBERS _SETTINGS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
> { { $t ( "Add / Remove…" ) } } < / r o u t e r - l i n k
>
< / p >
< / div >
2020-08-14 11:32:23 +02:00
< div class = "buttons" >
2021-02-24 19:06:48 +01:00
< b -button
outlined
icon - left = "timeline-text"
2021-06-16 11:25:53 +02:00
v - if = "isCurrentActorAGroupMember && !previewPublic"
2021-02-24 19:06:48 +01:00
tag = "router-link"
: to = " {
name : RouteName . TIMELINE ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
> { { $t ( "Activity" ) } } < / b - b u t t o n
>
< b -button
outlined
icon - left = "cog"
2021-06-16 11:25:53 +02:00
v - if = "isCurrentActorAGroupAdmin && !previewPublic"
2021-02-24 19:06:48 +01:00
tag = "router-link"
2020-08-14 11:32:23 +02:00
: to = " {
name : RouteName . GROUP _PUBLIC _SETTINGS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
2021-02-24 19:06:48 +01:00
> { { $t ( "Group settings" ) } } < / b - b u t t o n
2020-08-14 11:32:23 +02:00
>
2021-06-16 11:25:53 +02:00
< b -tooltip
v - if = "
( ! isCurrentActorAGroupMember || previewPublic ) &&
2021-11-12 15:42:52 +01:00
group . openness === Openness . INVITE _ONLY
2021-06-16 11:25:53 +02:00
"
: label = "$t('This group is invite-only')"
position = "is-bottom"
>
< b -button disabled type = "is-primary" > { {
$t ( "Join group" )
} } < / b - b u t t o n > < / b - t o o l t i p
>
< b -button
v - else - if = "
2021-11-12 15:42:52 +01:00
( ( ! isCurrentActorAGroupMember &&
! isCurrentActorAPendingGroupMember ) ||
previewPublic ) &&
2021-06-16 11:25:53 +02:00
currentActor . id
"
@ click = "joinGroup"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "joinGroup"
2021-06-16 11:25:53 +02:00
type = "is-primary"
: disabled = "previewPublic"
> { { $t ( "Join group" ) } } < / b - b u t t o n
>
2021-11-12 15:42:52 +01:00
< b -button
outlined
v - else - if = "isCurrentActorAPendingGroupMember"
@ click = "leaveGroup"
@ keyup . enter = "leaveGroup"
type = "is-primary"
> { { $t ( "Cancel membership request" ) } } < / b - b u t t o n
>
2021-06-16 11:25:53 +02:00
< b -button
tag = "router-link"
: to = " {
name : RouteName . GROUP _JOIN ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
v - else - if = "!isCurrentActorAGroupMember || previewPublic"
: disabled = "previewPublic"
type = "is-primary"
> { { $t ( "Join group" ) } } < / b - b u t t o n
>
2021-10-25 13:18:13 +02:00
< b -button
2021-10-25 16:53:46 +02:00
v - if = "
( ( ! isCurrentActorFollowing && ! isCurrentActorAGroupMember ) ||
previewPublic ) &&
! isCurrentActorPendingFollow &&
currentActor . id
2021-10-25 13:18:13 +02:00
"
@ click = "followGroup"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "followGroup"
2021-10-25 13:18:13 +02:00
type = "is-primary"
2021-10-25 16:53:46 +02:00
: disabled = "isCurrentActorPendingFollow"
> { { $t ( "Follow" ) } } < / b - b u t t o n
2021-10-25 13:18:13 +02:00
>
< b -button
tag = "router-link"
: to = " {
name : RouteName . GROUP _FOLLOW ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
2021-10-25 16:53:46 +02:00
v - else - if = "
! isCurrentActorPendingFollow &&
! isCurrentActorFollowing &&
previewPublic
"
2021-10-25 13:18:13 +02:00
: disabled = "previewPublic"
type = "is-primary"
2021-10-25 16:53:46 +02:00
> { { $t ( "Follow" ) } } < / b - b u t t o n
>
< b -button
outlined
v - if = "isCurrentActorPendingFollow && currentActor.id"
@ click = "unFollowGroup"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "unFollowGroup"
2021-10-25 16:53:46 +02:00
type = "is-primary"
> { { $t ( "Cancel follow request" ) } } < / b - b u t t o n
2021-10-25 13:18:13 +02:00
> < b -button
v - if = "
isCurrentActorFollowing && ! previewPublic && currentActor . id
"
type = "is-primary"
@ click = "unFollowGroup"
> { { $t ( "Unfollow" ) } } < / b - b u t t o n
>
< b -button
v - if = "isCurrentActorFollowing"
@ click = "toggleFollowNotify"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "toggleFollowNotify"
2021-10-25 13:18:13 +02:00
: icon - left = "
isCurrentActorFollowingNotify
? 'bell-outline'
: 'bell-off-outline'
"
> < / b - b u t t o n >
2021-06-15 17:25:33 +02:00
< b -button
outlined
icon - left = "share"
@ click = "triggerShare()"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "triggerShare()"
2021-06-16 11:25:53 +02:00
v - if = "!isCurrentActorAGroupMember || previewPublic"
2021-06-15 17:25:33 +02:00
>
{ { $t ( "Share" ) } }
< / b - b u t t o n >
2021-03-29 18:08:02 +02:00
< b -dropdown
class = "menu-dropdown"
position = "is-bottom-left"
2021-06-15 17:25:33 +02:00
aria - role = "menu"
2021-03-29 18:08:02 +02:00
>
< b -button
slot = "trigger"
outlined
role = "button"
2021-06-15 17:25:33 +02:00
icon - left = "dots-horizontal"
2021-07-21 10:47:40 +02:00
: aria - label = "$t('Other actions')"
2021-06-15 17:25:33 +02:00
/ >
2021-07-21 10:45:42 +02:00
< b -dropdown -item
aria - role = "menuitem"
v - if = "isCurrentActorAGroupMember || previewPublic"
>
2021-06-16 11:25:53 +02:00
< b -switch v-model ="previewPublic" > {{
$t ( "Public preview" )
} } < / b - s w i t c h >
< / b - d r o p d o w n - i t e m >
< b -dropdown -item
2021-07-21 10:45:42 +02:00
v - if = "!previewPublic && isCurrentActorAGroupMember"
2021-06-16 11:25:53 +02:00
aria - role = "menuitem"
@ click = "triggerShare()"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "triggerShare()"
2021-06-16 11:25:53 +02:00
>
2021-05-25 18:36:11 +02:00
< span >
2021-06-15 17:25:33 +02:00
< b -icon icon = "share" / >
{ { $t ( "Share" ) } }
2021-03-29 18:08:02 +02:00
< / span >
< / b - d r o p d o w n - i t e m >
2021-06-16 11:25:53 +02:00
< hr
2021-10-10 16:24:12 +02:00
role = "presentation"
2021-06-16 11:25:53 +02:00
class = "dropdown-divider"
v - if = "isCurrentActorAGroupMember"
/ >
2021-06-15 17:25:33 +02:00
< b -dropdown -item has -link aria -role = " menuitem " >
2021-03-29 18:08:02 +02:00
< a
: href = "`@${preferredUsername}/feed/atom`"
: title = "$t('Atom feed for events and posts')"
>
< b -icon icon = "rss" / >
2021-05-25 18:36:11 +02:00
{ { $t ( "RSS/Atom Feed" ) } }
2021-03-29 18:08:02 +02:00
< / a >
< / b - d r o p d o w n - i t e m >
2021-06-15 17:25:33 +02:00
< b -dropdown -item has -link aria -role = " menuitem " >
2021-03-29 18:08:02 +02:00
< a
: href = "`@${preferredUsername}/feed/ics`"
: title = "$t('ICS feed for events')"
>
< b -icon icon = "calendar-sync" / >
2021-05-25 18:36:11 +02:00
{ { $t ( "ICS/WebCal Feed" ) } }
2021-03-29 18:08:02 +02:00
< / a >
< / b - d r o p d o w n - i t e m >
2021-10-10 16:24:12 +02:00
< hr role = "presentation" class = "dropdown-divider" / >
2021-06-15 17:25:33 +02:00
< b -dropdown -item
v - if = "ableToReport"
2021-06-16 11:25:53 +02:00
aria - role = "menuitem"
2021-06-15 17:25:33 +02:00
@ click = "isReportModalActive = true"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "isReportModalActive = true"
2021-06-15 17:25:33 +02:00
>
< span >
< b -icon icon = "flag" / >
{ { $t ( "Report" ) } }
< / span >
< / b - d r o p d o w n - i t e m >
< b -dropdown -item
aria - role = "menuitem"
2021-06-16 11:25:53 +02:00
v - if = "isCurrentActorAGroupMember && !previewPublic"
2021-11-02 19:47:54 +01:00
@ click = "openLeaveGroupModal"
@ keyup . enter = "openLeaveGroupModal"
2021-06-15 17:25:33 +02:00
>
< span >
< b -icon icon = "exit-to-app" / >
{ { $t ( "Leave" ) } }
< / span >
< / b - d r o p d o w n - i t e m >
2021-03-29 18:08:02 +02:00
< / b - d r o p d o w n >
2020-08-14 11:32:23 +02:00
< / div >
2020-07-09 17:24:28 +02:00
< / div >
2021-11-12 15:42:52 +01:00
< invitations
v - if = "isCurrentActorAnInvitedGroupMember"
: invitations = "[groupMember]"
/ >
< b -message v-if ="isCurrentActorARejectedGroupMember" type="is-danger" >
{ { $t ( "You have been removed from this group's members." ) } }
< / b - m e s s a g e >
< b -message
v - if = "
isCurrentActorAGroupMember &&
isCurrentActorARecentMember &&
isCurrentActorOnADifferentDomainThanGroup
"
type = "is-info"
>
{ {
$t (
"Since you are a new member, private content can take a few minutes to appear."
)
} }
< / b - m e s s a g e >
< b -message
v - if = "
! isCurrentActorAGroupMember &&
! isCurrentActorAPendingGroupMember &&
! isCurrentActorPendingFollow &&
! isCurrentActorFollowing
"
type = "is-info"
has - icon
class = "m-3"
>
< i18n
path = "Following the group will allow you to be informed of the {group_upcoming_public_events}, whereas joining the group means you will {access_to_group_private_content_as_well}, including group discussions, group resources and members-only posts."
>
< b slot = "group_upcoming_public_events" > { {
$t ( "group's upcoming public events" )
} } < / b >
< b slot = "access_to_group_private_content_as_well" > { {
$t ( "access to the group's private content as well" )
} } < / b >
< / i18n >
< / b - m e s s a g e >
2020-07-09 17:24:28 +02:00
< / div >
< / header >
< / div >
2021-06-16 11:25:53 +02:00
< div
v - if = "isCurrentActorAGroupMember && !previewPublic"
class = "block-container"
>
2020-08-11 14:46:58 +02:00
<!-- Private things -- >
2020-07-09 17:24:28 +02:00
< div class = "block-column" >
2020-08-11 14:46:58 +02:00
<!-- Group discussions -- >
2020-08-31 12:40:30 +02:00
< group -section
: title = "$t('Discussions')"
icon = "chat"
: route = " {
name : RouteName . DISCUSSION _LIST ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
>
< template v -slot : default >
< div v-if ="group.discussions.total > 0" >
< discussion -list -item
v - for = "discussion in group.discussions.elements"
: key = "discussion.id"
: discussion = "discussion"
2020-08-11 11:45:21 +02:00
/ >
< / div >
2021-06-16 11:25:53 +02:00
< empty -content v -else icon = "chat" :inline ="true" >
{ { $t ( "No discussions yet" ) } }
< / e m p t y - c o n t e n t >
2020-08-31 12:40:30 +02:00
< / template >
< template v -slot : create >
< router -link
: to = " {
name : RouteName . CREATE _DISCUSSION ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
class = "button is-primary"
> { { $t ( "+ Start a discussion" ) } } < / r o u t e r - l i n k
>
< / template >
2020-08-11 14:46:58 +02:00
< / g r o u p - s e c t i o n >
<!-- Resources -- >
2020-08-31 12:40:30 +02:00
< group -section
: title = "$t('Resources')"
icon = "link"
: route = " {
name : RouteName . RESOURCE _FOLDER _ROOT ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
>
< template v -slot : default >
< div v-if ="group.resources.elements.length > 0" >
2020-11-30 10:24:11 +01:00
< div
v - for = "resource in group.resources.elements"
: key = "resource.id"
>
2020-08-31 12:40:30 +02:00
< resource -item
: resource = "resource"
v - if = "resource.type !== 'folder'"
: inline = "true"
/ >
2020-11-30 10:24:11 +01:00
< folder -item
: resource = "resource"
: group = "group"
v - else
: inline = "true"
/ >
2020-08-31 12:40:30 +02:00
< / div >
2020-08-11 14:46:58 +02:00
< / div >
2021-06-16 11:25:53 +02:00
< empty -content v -else icon = "link" :inline ="true" >
{ { $t ( "No resources yet" ) } }
< / e m p t y - c o n t e n t >
2020-08-31 12:40:30 +02:00
< / template >
< template v -slot : create >
< router -link
: to = " {
name : RouteName . RESOURCE _FOLDER _ROOT ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
class = "button is-primary"
> { { $t ( "+ Add a resource" ) } } < / r o u t e r - l i n k
>
< / template >
< / g r o u p - s e c t i o n >
2020-08-11 14:46:58 +02:00
< / div >
<!-- Public things -- >
< div class = "block-column" >
<!-- Events -- >
2020-08-31 12:40:30 +02:00
< group -section
2021-06-15 17:25:33 +02:00
: title = "$t('Events')"
2020-08-31 12:40:30 +02:00
icon = "calendar"
: privateSection = "false"
: route = " {
name : RouteName . GROUP _EVENTS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
>
< template v -slot : default >
2020-11-30 10:24:11 +01:00
< div
class = "organized-events-wrapper"
v - if = "group && group.organizedEvents.total > 0"
>
2021-11-02 19:47:54 +01:00
< event -minimalist -card
v - for = "event in group.organizedEvents.elements.slice(0, 3)"
2020-08-31 12:40:30 +02:00
: event = "event"
: key = "event.uuid"
class = "organized-event"
/ >
< / div >
2021-06-16 11:25:53 +02:00
< empty -content v -else -if = " group " icon = "calendar" :inline ="true" >
{ { $t ( "No public upcoming events" ) } }
< / e m p t y - c o n t e n t >
2020-08-31 12:40:30 +02:00
< b -skeleton animated v-else > < / b -skeleton >
< / template >
< template v -slot : create >
< router -link
2020-10-22 10:48:49 +02:00
v - if = "isCurrentActorAGroupModerator"
2020-08-31 12:40:30 +02:00
: to = " {
name : RouteName . CREATE _EVENT ,
2021-03-29 10:33:19 +02:00
query : { actorId : group . id } ,
2020-08-31 12:40:30 +02:00
} "
class = "button is-primary"
> { { $t ( "+ Create an event" ) } } < / r o u t e r - l i n k
>
< / template >
2020-08-11 14:46:58 +02:00
< / g r o u p - s e c t i o n >
<!-- Posts -- >
2020-08-31 12:40:30 +02:00
< group -section
: title = "$t('Public page')"
icon = "bullhorn"
: privateSection = "false"
: route = " {
name : RouteName . POSTS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
>
< template v -slot : default >
2021-11-02 19:47:54 +01:00
< multi -post -list -item
v - if = "group.posts.total > 0"
: posts = "group.posts.elements.slice(0, 3)"
: isCurrentActorMember = "isCurrentActorAGroupMember"
/ >
2021-06-16 11:25:53 +02:00
< empty -content v -else -if = " group " icon = "bullhorn" :inline ="true" >
{ { $t ( "No posts yet" ) } }
< / e m p t y - c o n t e n t >
2020-08-31 12:40:30 +02:00
< / template >
< template v -slot : create >
< router -link
2020-10-22 10:48:49 +02:00
v - if = "isCurrentActorAGroupModerator"
2020-08-31 12:40:30 +02:00
: to = " {
name : RouteName . POST _CREATE ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
class = "button is-primary"
2021-08-05 11:01:40 +02:00
> { { $t ( "+ Create a post" ) } } < / r o u t e r - l i n k
2020-08-31 12:40:30 +02:00
>
< / template >
2020-08-11 14:46:58 +02:00
< / g r o u p - s e c t i o n >
2020-02-18 08:57:00 +01:00
< / div >
< / div >
2020-07-09 17:24:28 +02:00
< b -message v -else -if = " ! group & & $ apollo.loading = = = false " type = "is-danger" >
{ { $t ( "No group found" ) } }
< / b - m e s s a g e >
2021-06-16 11:25:53 +02:00
< div v -else -if = " group " class = "public-container" >
2021-06-15 17:25:33 +02:00
< aside class = "group-metadata" >
< div class = "sticky" >
2021-11-06 10:45:06 +01:00
< b -message v-if ="group.domain && !isCurrentActorAGroupMember" >
{ {
$t (
"This profile is from another instance, the informations shown here may be incomplete."
)
} }
< a :href ="group.url" rel = "noopener noreferrer external" > { {
$t ( "View full profile" )
} } < / a >
< / b - m e s s a g e >
2021-06-16 11:25:53 +02:00
< event -metadata -block :title ="$t('Members')" icon = "account-group" >
{ {
$tc ( "{count} members" , group . members . total , {
count : group . members . total ,
} )
} }
< / e v e n t - m e t a d a t a - b l o c k >
2021-06-15 17:25:33 +02:00
< event -metadata -block
2021-10-29 10:54:35 +02:00
v - if = "physicalAddress && physicalAddress.url"
2021-06-15 17:25:33 +02:00
: title = "$t('Location')"
: icon = "
physicalAddress ? physicalAddress . poiInfos . poiIcon . icon : 'earth'
"
>
< div class = "address-wrapper" >
< span v-if ="!physicalAddress" > {{
$t ( "No address defined" )
} } < / span >
< div class = "address" v-if ="physicalAddress" >
< div >
2021-11-07 21:02:06 +01:00
< address dir = "auto" >
2021-06-15 17:25:33 +02:00
< p
class = "addressDescription"
: title = "physicalAddress.poiInfos.name"
>
{ { physicalAddress . poiInfos . name } }
< / p >
< p class = "has-text-grey-dark" >
{ { physicalAddress . poiInfos . alternativeName } }
< / p >
< / address >
< / div >
2021-11-06 10:41:31 +01:00
< b -button
2021-06-15 17:25:33 +02:00
class = "map-show-button"
2021-11-06 10:41:31 +01:00
type = "is-text"
2021-06-15 17:25:33 +02:00
@ click = "showMap = !showMap"
2021-11-02 19:47:54 +01:00
@ keyup . enter = "showMap = !showMap"
2021-06-15 17:25:33 +02:00
v - if = "physicalAddress.geom"
>
2021-11-06 10:41:31 +01:00
{ { $t ( "Show map" ) } }
< / b - b u t t o n >
2021-06-15 17:25:33 +02:00
< / div >
< / div >
< / e v e n t - m e t a d a t a - b l o c k >
2020-10-26 09:48:25 +01:00
< / div >
2021-06-15 17:25:33 +02:00
< / aside >
< div class = "main-content" >
< section >
< subtitle > { { $t ( "About" ) } } < / subtitle >
< div
2021-11-07 21:02:06 +01:00
dir = "auto"
2021-06-15 17:25:33 +02:00
v - html = "group.summary"
v - if = "group.summary && group.summary !== '<p></p>'"
2020-11-30 10:24:11 +01:00
/ >
2021-06-16 11:25:53 +02:00
< empty -content v -else -if = " group " icon = "image-text" :inline ="true" >
{ { $t ( "This group doesn't have a description yet." ) } }
< / e m p t y - c o n t e n t >
2021-06-15 17:25:33 +02:00
< / section >
< section >
< subtitle > { { $t ( "Upcoming events" ) } } < / subtitle >
< div
class = "organized-events-wrapper"
2021-07-21 12:02:14 +02:00
v - if = "group && organizedEvents.elements.length > 0"
2021-06-15 17:25:33 +02:00
>
2021-11-02 19:47:54 +01:00
< event -minimalist -card
v - for = "event in organizedEvents.elements.slice(0, 3)"
2021-06-15 17:25:33 +02:00
: event = "event"
: key = "event.uuid"
class = "organized-event"
/ >
< / div >
2021-06-16 11:25:53 +02:00
< empty -content v -else -if = " group " icon = "calendar" :inline ="true" >
{ { $t ( "No public upcoming events" ) } }
2021-10-25 16:53:46 +02:00
< template # desc v-if ="isCurrentActorFollowing" >
< i18n
class = "has-text-grey-dark"
path = "You will receive notifications about this group's public activity depending on %{notification_settings}."
>
< router -link
: to = "{ name: RouteName.NOTIFICATIONS }"
slot = "notification_settings"
> { { $t ( "your notification settings" ) } } < / r o u t e r - l i n k
>
< / i18n >
< / template >
2021-06-16 11:25:53 +02:00
< / e m p t y - c o n t e n t >
2021-06-15 17:25:33 +02:00
< b -skeleton animated v -else -if = " $ apollo.loading " > < / b - s k e l e t o n >
< router -link
2021-07-21 12:02:14 +02:00
v - if = "organizedEvents.total > 0"
2021-06-15 17:25:33 +02:00
: to = " {
name : RouteName . GROUP _EVENTS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
2021-07-21 12:02:14 +02:00
query : { future : organizedEvents . elements . length > 0 } ,
2021-06-15 17:25:33 +02:00
} "
> { { $t ( "View all events" ) } } < / r o u t e r - l i n k
>
< / section >
< section >
< subtitle > { { $t ( "Latest posts" ) } } < / subtitle >
2021-11-02 19:47:54 +01:00
< multi -post -list -item
v - if = "
posts . elements . filter (
( post ) =>
! post . draft && post . visibility === PostVisibility . PUBLIC
) . length > 0
"
: posts = "
posts . elements . filter (
( post ) =>
! post . draft && post . visibility === PostVisibility . PUBLIC
)
"
/ >
2021-06-16 11:25:53 +02:00
< empty -content v -else -if = " group " icon = "bullhorn" :inline ="true" >
{ { $t ( "No posts yet" ) } }
< / e m p t y - c o n t e n t >
2021-06-15 17:25:33 +02:00
< b -skeleton animated v -else -if = " $ apollo.loading " > < / b - s k e l e t o n >
< router -link
2021-07-21 12:02:14 +02:00
v - if = "posts.total > 0"
2021-06-15 17:25:33 +02:00
: to = " {
name : RouteName . POSTS ,
params : { preferredUsername : usernameWithDomain ( group ) } ,
} "
> { { $t ( "View all posts" ) } } < / r o u t e r - l i n k
>
< / section >
< / div >
2020-11-30 10:24:11 +01:00
< b -modal
v - if = "physicalAddress && physicalAddress.geom"
: active . sync = "showMap"
2021-11-13 12:33:14 +01:00
: close - button - aria - label = "$t('Close')"
2020-11-30 10:24:11 +01:00
>
2020-08-11 11:45:21 +02:00
< div class = "map" >
< map -leaflet
: coords = "physicalAddress.geom"
: marker = " {
text : physicalAddress . fullName ,
icon : physicalAddress . poiInfos . poiIcon . icon ,
} "
/ >
< / div >
< / b - m o d a l >
2019-01-21 15:08:22 +01:00
< / div >
2021-03-29 18:08:02 +02:00
< b -modal
2021-11-13 12:33:14 +01:00
: close - button - aria - label = "$t('Close')"
2021-03-29 18:08:02 +02:00
: active . sync = "isReportModalActive"
has - modal - card
ref = "reportModal"
2021-06-16 11:25:53 +02:00
v - if = "group"
2021-03-29 18:08:02 +02:00
>
< report -modal
: on - confirm = "reportGroup"
: title = "$t('Report this group')"
: outside - domain = "group.domain"
@ close = "$refs.reportModal.close()"
/ >
< / b - m o d a l >
2021-06-16 11:25:53 +02:00
< b -modal
2021-11-13 12:33:14 +01:00
: close - button - aria - label = "$t('Close')"
2021-06-16 11:25:53 +02:00
v - if = "group"
: active . sync = "isShareModalActive"
has - modal - card
ref = "shareModal"
>
2021-06-15 17:25:33 +02:00
< share -group -modal :group ="group" / >
< / b - m o d a l >
2020-02-18 08:57:00 +01:00
< / div >
2019-01-21 15:08:22 +01:00
< / template >
< script lang = "ts" >
2020-10-09 15:26:37 +02:00
import { Component , Prop , Watch } from "vue-property-decorator" ;
2020-02-18 08:57:00 +01:00
import EventCard from "@/components/Event/EventCard.vue" ;
2021-06-15 17:25:33 +02:00
import { displayName , IActor , usernameWithDomain } from "@/types/actor" ;
2020-02-18 08:57:00 +01:00
import Subtitle from "@/components/Utils/Subtitle.vue" ;
import CompactTodo from "@/components/Todo/CompactTodo.vue" ;
import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue" ;
2020-07-09 17:24:28 +02:00
import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue" ;
2021-11-02 19:47:54 +01:00
import MultiPostListItem from "@/components/Post/MultiPostListItem.vue" ;
2020-02-18 08:57:00 +01:00
import ResourceItem from "@/components/Resource/ResourceItem.vue" ;
import FolderItem from "@/components/Resource/FolderItem.vue" ;
2020-08-11 11:45:21 +02:00
import { Address } from "@/types/address.model" ;
2020-08-14 11:32:23 +02:00
import Invitations from "@/components/Group/Invitations.vue" ;
import addMinutes from "date-fns/addMinutes" ;
2020-09-30 15:25:30 +02:00
import { CONFIG } from "@/graphql/config" ;
import { CREATE _REPORT } from "@/graphql/report" ;
import { IReport } from "@/types/report.model" ;
import { IConfig } from "@/types/config.model" ;
2020-10-09 15:26:37 +02:00
import GroupMixin from "@/mixins/group" ;
import { mixins } from "vue-class-component" ;
2020-11-06 11:34:32 +01:00
import { JOIN _GROUP } from "@/graphql/member" ;
2021-07-21 12:02:14 +02:00
import { MemberRole , Openness , PostVisibility } from "@/types/enums" ;
2020-11-27 19:27:44 +01:00
import { IMember } from "@/types/actor/member.model" ;
2020-08-31 12:40:30 +02:00
import RouteName from "../../router/name" ;
2020-09-30 15:25:30 +02:00
import GroupSection from "../../components/Group/GroupSection.vue" ;
import ReportModal from "../../components/Report/ReportModal.vue" ;
2021-10-25 13:18:13 +02:00
import { PERSON _STATUS _GROUP } from "@/graphql/actor" ;
2021-05-25 18:36:11 +02:00
import { LEAVE _GROUP } from "@/graphql/group" ;
2021-06-15 17:25:33 +02:00
import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue" ;
import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue" ;
2021-06-16 11:25:53 +02:00
import EmptyContent from "../../components/Utils/EmptyContent.vue" ;
2021-07-21 12:02:14 +02:00
import { Paginate } from "@/types/paginate" ;
import { IEvent } from "@/types/event.model" ;
import { IPost } from "@/types/post.model" ;
2021-10-25 13:18:13 +02:00
import {
FOLLOW _GROUP ,
UNFOLLOW _GROUP ,
UPDATE _GROUP _FOLLOW ,
} from "@/graphql/followers" ;
2019-01-21 15:08:22 +01:00
@ Component ( {
apollo : {
2020-09-30 15:25:30 +02:00
config : CONFIG ,
2019-01-21 15:08:22 +01:00
} ,
components : {
2020-07-09 17:24:28 +02:00
DiscussionListItem ,
2021-11-02 19:47:54 +01:00
MultiPostListItem ,
2020-02-18 08:57:00 +01:00
EventMinimalistCard ,
CompactTodo ,
2020-02-18 08:47:41 +01:00
Subtitle ,
2019-03-22 10:57:14 +01:00
EventCard ,
2020-02-18 08:57:00 +01:00
FolderItem ,
ResourceItem ,
2020-08-11 14:46:58 +02:00
GroupSection ,
2020-08-14 11:32:23 +02:00
Invitations ,
2020-09-30 15:25:30 +02:00
ReportModal ,
2021-06-15 17:25:33 +02:00
LazyImageWrapper ,
EventMetadataBlock ,
2021-06-16 11:25:53 +02:00
EmptyContent ,
2020-11-30 10:24:11 +01:00
"map-leaflet" : ( ) =>
import ( /* webpackChunkName: "map" */ "../../components/Map.vue" ) ,
2021-06-15 17:25:33 +02:00
ShareGroupModal : ( ) =>
import (
/* webpackChunkName: "shareGroupModal" */ "../../components/Group/ShareGroupModal.vue"
) ,
2020-02-18 08:57:00 +01:00
} ,
metaInfo ( ) {
return {
2020-09-02 17:42:17 +02:00
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
2020-02-18 08:57:00 +01:00
// @ts-ignore
title : this . groupTitle ,
meta : [
2020-09-02 17:42:17 +02:00
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
2020-02-18 08:57:00 +01:00
// @ts-ignore
{ name : "description" , content : this . groupSummary } ,
] ,
} ;
2019-03-22 10:57:14 +01:00
} ,
2019-01-21 15:08:22 +01:00
} )
2020-10-09 15:26:37 +02:00
export default class Group extends mixins ( GroupMixin ) {
2019-04-03 17:29:03 +02:00
@ Prop ( { type : String , required : true } ) preferredUsername ! : string ;
2019-01-21 15:08:22 +01:00
2020-09-30 15:25:30 +02:00
config ! : IConfig ;
2019-01-21 15:08:22 +01:00
loading = true ;
2020-02-18 08:57:00 +01:00
RouteName = RouteName ;
usernameWithDomain = usernameWithDomain ;
2022-01-10 15:19:16 +01:00
displayName = displayName ;
2021-11-02 19:47:54 +01:00
PostVisibility = PostVisibility ;
2020-11-06 11:34:32 +01:00
Openness = Openness ;
2020-08-11 11:45:21 +02:00
showMap = false ;
2020-09-30 15:25:30 +02:00
isReportModalActive = false ;
2021-06-15 17:25:33 +02:00
isShareModalActive = false ;
2021-06-16 11:25:53 +02:00
previewPublic = false ;
2020-02-18 08:57:00 +01:00
@ Watch ( "currentActor" )
2020-09-02 17:42:17 +02:00
watchCurrentActor ( currentActor : IActor , oldActor : IActor ) : void {
2020-02-18 08:57:00 +01:00
if ( currentActor . id && oldActor && currentActor . id !== oldActor . id ) {
this . $apollo . queries . group . refetch ( ) ;
}
}
2020-11-06 11:34:32 +01:00
async joinGroup ( ) : Promise < void > {
2021-05-18 17:12:45 +02:00
const [ group , currentActorId ] = [
usernameWithDomain ( this . group ) ,
this . currentActor . id ,
] ;
2020-11-06 11:34:32 +01:00
this . $apollo . mutate ( {
mutation : JOIN _GROUP ,
variables : {
groupId : this . group . id ,
} ,
2021-05-18 17:12:45 +02:00
refetchQueries : [
{
2021-10-25 13:18:13 +02:00
query : PERSON _STATUS _GROUP ,
2021-05-18 17:12:45 +02:00
variables : {
id : currentActorId ,
group ,
} ,
} ,
] ,
2020-11-06 11:34:32 +01:00
} ) ;
}
2021-11-02 19:47:54 +01:00
protected async openLeaveGroupModal ( ) : Promise < void > {
this . $buefy . dialog . confirm ( {
type : "is-danger" ,
title : this . $t ( "Leave group" ) as string ,
message : this . $t (
"Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone." ,
{ groupName : ` <b> ${ displayName ( this . group ) } </b> ` }
) as string ,
onConfirm : ( ) => this . leaveGroup ( ) ,
confirmText : this . $t ( "Leave group" ) as string ,
cancelText : this . $t ( "Cancel" ) as string ,
} ) ;
}
2021-05-25 18:36:11 +02:00
async leaveGroup ( ) : Promise < void > {
try {
const [ group , currentActorId ] = [
usernameWithDomain ( this . group ) ,
this . currentActor . id ,
] ;
await this . $apollo . mutate ( {
mutation : LEAVE _GROUP ,
variables : {
groupId : this . group . id ,
} ,
refetchQueries : [
{
2021-10-25 13:18:13 +02:00
query : PERSON _STATUS _GROUP ,
variables : {
id : currentActorId ,
group ,
} ,
} ,
] ,
} ) ;
} catch ( error : any ) {
if ( error . graphQLErrors && error . graphQLErrors . length > 0 ) {
this . $notifier . error ( error . graphQLErrors [ 0 ] . message ) ;
}
}
}
async followGroup ( ) : Promise < void > {
try {
const [ group , currentActorId ] = [
usernameWithDomain ( this . group ) ,
this . currentActor . id ,
] ;
await this . $apollo . mutate ( {
mutation : FOLLOW _GROUP ,
variables : {
groupId : this . group . id ,
} ,
refetchQueries : [
{
query : PERSON _STATUS _GROUP ,
variables : {
id : currentActorId ,
group ,
} ,
} ,
] ,
} ) ;
} catch ( error : any ) {
if ( error . graphQLErrors && error . graphQLErrors . length > 0 ) {
this . $notifier . error ( error . graphQLErrors [ 0 ] . message ) ;
}
}
}
async unFollowGroup ( ) : Promise < void > {
console . debug ( "unfollow group" ) ;
try {
const [ group , currentActorId ] = [
usernameWithDomain ( this . group ) ,
this . currentActor . id ,
] ;
await this . $apollo . mutate ( {
mutation : UNFOLLOW _GROUP ,
variables : {
groupId : this . group . id ,
} ,
refetchQueries : [
{
query : PERSON _STATUS _GROUP ,
2021-05-25 18:36:11 +02:00
variables : {
id : currentActorId ,
group ,
} ,
} ,
] ,
} ) ;
2021-09-29 18:20:33 +02:00
} catch ( error : any ) {
2021-05-25 18:36:11 +02:00
if ( error . graphQLErrors && error . graphQLErrors . length > 0 ) {
this . $notifier . error ( error . graphQLErrors [ 0 ] . message ) ;
}
}
}
2021-10-25 13:18:13 +02:00
async toggleFollowNotify ( ) : Promise < void > {
await this . $apollo . mutate ( {
mutation : UPDATE _GROUP _FOLLOW ,
variables : {
followId : this . currentActorFollow ? . id ,
notify : ! this . isCurrentActorFollowingNotify ,
} ,
} ) ;
}
2020-09-30 15:25:30 +02:00
async reportGroup ( content : string , forward : boolean ) : Promise < void > {
this . isReportModalActive = false ;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this . $refs . reportModal . close ( ) ;
const groupTitle = this . group . name || usernameWithDomain ( this . group ) ;
try {
await this . $apollo . mutate < IReport > ( {
mutation : CREATE _REPORT ,
variables : {
reportedId : this . group . id ,
content ,
forward ,
} ,
} ) ;
2020-11-30 10:24:11 +01:00
this . $notifier . success (
this . $t ( "Group {groupTitle} reported" , { groupTitle } ) as string
) ;
2021-09-29 18:20:33 +02:00
} catch ( error : any ) {
2020-09-30 15:25:30 +02:00
console . error ( error ) ;
this . $notifier . error (
2020-11-30 10:24:11 +01:00
this . $t ( "Error while reporting group {groupTitle}" , {
groupTitle ,
} ) as string
2020-09-30 15:25:30 +02:00
) ;
}
}
2021-06-15 17:25:33 +02:00
triggerShare ( ) : void {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-start
if ( navigator . share ) {
navigator
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
. share ( {
title : displayName ( this . group ) ,
url : this . group . url ,
} )
. then ( ( ) => console . log ( "Successful share" ) )
. catch ( ( error : any ) => console . log ( "Error sharing" , error ) ) ;
} else {
this . isShareModalActive = true ;
// send popup
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-end
}
2020-09-02 17:42:17 +02:00
get groupTitle ( ) : undefined | string {
2021-06-16 11:25:53 +02:00
return this . group ? . name || this . group ? . preferredUsername ;
2019-01-21 15:08:22 +01:00
}
2020-09-02 17:42:17 +02:00
get groupSummary ( ) : undefined | string {
2021-06-16 11:25:53 +02:00
return this . group ? . summary ;
2019-01-21 15:08:22 +01:00
}
2020-08-14 11:32:23 +02:00
get groupMember ( ) : IMember | undefined {
2021-03-05 11:23:17 +01:00
if ( this . person ? . memberships ? . total > 0 ) {
return this . person ? . memberships ? . elements [ 0 ] ;
}
return undefined ;
2020-08-14 11:32:23 +02:00
}
2020-11-06 11:34:32 +01:00
@ Watch ( "isCurrentActorAGroupMember" )
refetchGroupData ( ) : void {
this . $apollo . queries . group . refetch ( ) ;
}
2020-08-14 11:32:23 +02:00
get isCurrentActorARejectedGroupMember ( ) : boolean {
return (
this . person &&
this . person . memberships . elements
. filter ( ( membership ) => membership . role === MemberRole . REJECTED )
. map ( ( { parent : { id } } ) => id )
. includes ( this . group . id )
) ;
}
get isCurrentActorAnInvitedGroupMember ( ) : boolean {
return (
this . person &&
this . person . memberships . elements
. filter ( ( membership ) => membership . role === MemberRole . INVITED )
. map ( ( { parent : { id } } ) => id )
. includes ( this . group . id )
) ;
}
/ * *
2020-09-02 17:42:17 +02:00
* New members , if on a different server ,
* can take a while to refresh the group and fetch all private data
2020-08-14 11:32:23 +02:00
* /
get isCurrentActorARecentMember ( ) : boolean {
return (
this . groupMember !== undefined &&
this . groupMember . role === MemberRole . MEMBER &&
addMinutes ( new Date ( ` ${ this . groupMember . updatedAt } Z ` ) , 10 ) > new Date ( )
) ;
}
2021-04-30 08:03:30 +02:00
get isCurrentActorOnADifferentDomainThanGroup ( ) : boolean {
return this . group . domain !== null ;
}
2020-08-14 11:32:23 +02:00
get members ( ) : IMember [ ] {
return this . group . members . elements . filter (
( member ) =>
2020-11-30 10:24:11 +01:00
! [
MemberRole . INVITED ,
MemberRole . REJECTED ,
MemberRole . NOT _APPROVED ,
] . includes ( member . role )
2020-08-14 11:32:23 +02:00
) ;
}
2020-08-11 11:45:21 +02:00
get physicalAddress ( ) : Address | null {
if ( ! this . group . physicalAddress ) return null ;
return new Address ( this . group . physicalAddress ) ;
}
2020-09-30 15:25:30 +02:00
get ableToReport ( ) : boolean {
return (
2020-11-30 10:24:11 +01:00
this . config &&
( this . currentActor . id !== undefined ||
this . config . anonymous . reports . allowed )
2020-09-30 15:25:30 +02:00
) ;
}
2021-07-21 12:02:14 +02:00
get organizedEvents ( ) : Paginate < IEvent > {
return {
total : this . group . organizedEvents . total ,
elements : this . group . organizedEvents . elements . filter ( ( event : IEvent ) => {
if ( this . previewPublic ) {
return ! event . draft ; // TODO when events get visibility access add visibility constraint like below for posts
}
return true ;
} ) ,
} ;
}
get posts ( ) : Paginate < IPost > {
return {
total : this . group . posts . total ,
elements : this . group . posts . elements . filter ( ( post : IPost ) => {
2021-11-02 19:47:54 +01:00
if ( this . previewPublic || ! this . isCurrentActorAGroupMember ) {
return ! post . draft && post . visibility == PostVisibility . PUBLIC ;
2021-07-21 12:02:14 +02:00
}
return true ;
} ) ,
} ;
}
2019-01-21 15:08:22 +01:00
}
< / script >
2019-09-20 18:22:03 +02:00
< style lang = "scss" scoped >
2021-11-04 18:14:36 +01:00
@ use "@/styles/_mixins" as * ;
2021-06-16 11:25:53 +02:00
@ import "~bulma/sass/utilities/mixins.sass" ;
2020-02-18 08:57:00 +01:00
div . container {
margin - bottom : 3 rem ;
2020-07-09 17:24:28 +02:00
. header ,
. public - container {
display : flex ;
flex - direction : column ;
}
2021-06-15 17:25:33 +02:00
. header {
background : $white ;
padding - top : 1 rem ;
}
. header . breadcrumb {
margin - bottom : 0.5 rem ;
2021-11-04 18:14:36 +01:00
@ include margin - left ( 0.5 rem ) ;
2021-06-15 17:25:33 +02:00
}
2020-02-18 08:57:00 +01:00
. block - container {
display : flex ;
flex - wrap : wrap ;
2020-08-31 12:40:30 +02:00
margin - top : 15 px ;
2020-02-18 08:57:00 +01:00
2020-07-09 17:24:28 +02:00
& . presentation {
border : 2 px solid $purple - 2 ;
2021-06-15 17:25:33 +02:00
padding : 0 0 10 px ;
2020-09-29 09:53:48 +02:00
position : relative ;
2021-06-15 17:25:33 +02:00
flex - direction : column ;
2020-07-09 17:24:28 +02:00
h1 {
color : $purple - 1 ;
font - size : 2 rem ;
font - weight : 500 ;
}
. button . is - outlined {
border - color : $purple - 2 ;
}
2020-09-29 09:53:48 +02:00
& > * : not ( img ) {
position : relative ;
z - index : 2 ;
}
2021-06-15 17:25:33 +02:00
& > . banner - container {
2020-08-11 11:45:21 +02:00
display : flex ;
2021-06-15 17:25:33 +02:00
justify - content : center ;
height : 30 vh ;
: : v - deep img {
width : 100 % ;
height : 100 % ;
object - fit : cover ;
object - position : 50 % 50 % ;
}
2020-07-09 17:24:28 +02:00
}
}
2020-08-11 11:45:21 +02:00
div . address {
flex : 1 ;
text - align : right ;
2020-10-15 14:23:55 +02:00
justify - content : flex - end ;
display : flex ;
2020-08-11 11:45:21 +02:00
. map - show - button {
cursor : pointer ;
}
2020-09-30 15:25:30 +02:00
p . buttons {
margin - top : 1 rem ;
justify - content : end ;
align - content : space - between ;
& > span {
2021-11-04 18:14:36 +01:00
@ include margin - right ( 0.5 rem ) ;
2020-09-30 15:25:30 +02:00
}
}
2020-08-11 11:45:21 +02:00
address {
font - style : normal ;
span . addressDescription {
text - overflow : ellipsis ;
white - space : nowrap ;
flex : 1 0 auto ;
min - width : 100 % ;
max - width : 4 rem ;
overflow : hidden ;
}
: not ( . addressDescription ) {
color : rgba ( 46 , 62 , 72 , 0.6 ) ;
flex : 1 ;
min - width : 100 % ;
}
}
}
2020-02-18 08:57:00 +01:00
. block - column {
flex : 1 ;
2021-06-16 11:25:53 +02:00
margin : 0 ;
2021-06-15 17:25:33 +02:00
max - width : 576 px ;
2021-06-16 11:25:53 +02:00
@ include desktop {
margin : 0 0.5 rem ;
& : first - child {
2021-11-04 18:14:36 +01:00
@ include margin - left ( 0 ) ;
2021-06-16 11:25:53 +02:00
}
& : last - child {
2021-11-04 18:14:36 +01:00
@ include margin - right ( 0 ) ;
2021-06-16 11:25:53 +02:00
}
2021-06-15 17:25:33 +02:00
}
2020-02-18 08:57:00 +01:00
section {
2021-06-15 17:25:33 +02:00
background : $white ;
2020-02-18 08:57:00 +01:00
& . presentation {
. media - left {
span . icon . is - large {
height : 5 rem ;
width : 5 rem ;
2020-11-16 10:04:47 +01:00
: : v - deep i . mdi . mdi - account - group . mdi - 48 px : before {
2020-02-18 08:57:00 +01:00
font - size : 100 px ;
}
}
}
. media - content {
h2 {
color : # 3 c376e ;
2020-11-30 10:24:11 +01:00
font - family : "Liberation Sans" , "Helvetica Neue" , Roboto ,
Helvetica , Arial , serif ;
2020-02-18 08:57:00 +01:00
font - size : 1.5 rem ;
font - weight : 700 ;
}
}
}
}
}
2021-06-15 17:25:33 +02:00
. header {
display : flex ;
flex - wrap : wrap ;
justify - content : center ;
flex - direction : column ;
flex : 1 ;
margin : 0 ;
align - items : center ;
. avatar - container {
display : flex ;
align - self : center ;
height : 0 ;
margin - top : 16 px ;
align - items : flex - end ;
2021-06-16 11:25:53 +02:00
: : v - deep . icon {
border - radius : 290486 px ;
border : 1 px solid # cdcaea ;
background : white ;
height : 5 rem ;
width : 5 rem ;
i : : before {
font - size : 60 px ;
}
}
2021-06-15 17:25:33 +02:00
figure {
position : relative ;
img {
position : absolute ;
background : # fff ;
}
}
}
. title - container {
flex : 1 ;
display : flex ;
flex - direction : column ;
text - align : center ;
h1 {
font - size : 32 px ;
line - height : 38 px ;
}
}
. group - metadata {
display : flex ;
flex - direction : row ;
flex - wrap : wrap ;
justify - content : center ;
& > . buttons {
justify - content : center ;
2021-06-16 11:25:53 +02:00
: : v - deep . b - tooltip {
2021-11-04 18:14:36 +01:00
@ include padding - right ( 0.5 em ) ;
2021-06-16 11:25:53 +02:00
}
2021-06-15 17:25:33 +02:00
}
. members {
display : flex ;
flex - direction : column ;
min - width : 300 px ;
align - items : center ;
div {
display : flex ;
}
figure : not ( : first - child ) {
2021-11-04 18:14:36 +01:00
@ include margin - left ( - 10 px ) ;
2021-06-15 17:25:33 +02:00
}
}
}
}
2019-04-03 17:29:03 +02:00
}
2020-09-02 17:42:17 +02:00
. public - container {
2021-06-16 11:25:53 +02:00
display : flex ;
flex - wrap : wrap ;
flex - direction : row - reverse ;
padding : 0 ;
margin - top : 1 rem ;
2021-06-15 17:25:33 +02:00
. group - metadata {
min - width : 20 rem ;
flex : 1 ;
2021-11-04 18:14:36 +01:00
@ include padding - left ( 1 rem ) ;
2021-06-16 11:25:53 +02:00
@ include mobile {
2021-11-04 18:14:36 +01:00
@ include padding - left ( 0 ) ;
2021-06-16 11:25:53 +02:00
}
2021-06-15 17:25:33 +02:00
. sticky {
position : sticky ;
background : white ;
top : 50 px ;
padding : 1 rem ;
}
}
. main - content {
min - width : 20 rem ;
flex : 2 ;
background : white ;
2021-10-25 16:53:46 +02:00
padding : 0 5 px ;
2021-06-16 11:25:53 +02:00
@ include desktop {
padding : 10 px ;
}
@ include mobile {
margin - top : 1 rem ;
}
h2 {
margin : 0 auto 10 px ;
}
2021-06-15 17:25:33 +02:00
}
2020-09-02 17:42:17 +02:00
section {
2021-06-16 11:25:53 +02:00
margin - top : 0 ;
2020-09-02 17:42:17 +02:00
}
}
2021-01-19 11:24:21 +01:00
. menu - dropdown {
: : v - deep . dropdown - item ,
: : v - deep . has - link a {
2021-11-04 18:14:36 +01:00
@ include padding - right ( 1 rem ) ;
2021-01-19 11:24:21 +01:00
}
}
2021-11-02 19:47:54 +01:00
. organized - events - wrapper ,
. posts - wrapper {
display : grid ;
grid - gap : 20 px ;
grid - template : 1 fr ;
}
2020-02-18 08:57:00 +01:00
}
2021-11-13 16:53:03 +01:00
. map {
height : 60 vh ;
width : 100 % ;
}
2019-04-03 17:29:03 +02:00
< / style >