forked from potsda.mn/mobilizon
Merge branch 'fixes' into 'main'
Various improvements See merge request framasoft/mobilizon!1394
This commit is contained in:
commit
87208369b2
|
@ -193,7 +193,7 @@ body {
|
|||
|
||||
/* Select */
|
||||
.select {
|
||||
@apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none border rounded;
|
||||
@apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-8 border-2 border-transparent h-10 shadow-none border rounded;
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
|
|
18
js/src/components/Event/SkeletonDateCalendarIcon.vue
Normal file
18
js/src/components/Event/SkeletonDateCalendarIcon.vue
Normal file
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div
|
||||
class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
|
||||
>
|
||||
<div class="datetime-container-content">
|
||||
<div class="ml-2 h-8 bg-slate-200 w-16"></div>
|
||||
<div class="ml-2 mt-2 h-4 bg-slate-200 w-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.datetime-container {
|
||||
width: calc(80px);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
|
||||
height: calc(80px);
|
||||
}
|
||||
</style>
|
|
@ -1,5 +1,4 @@
|
|||
import gql from "graphql-tag";
|
||||
import { DISCUSSION_BASIC_FIELDS_FRAGMENT } from "./discussion";
|
||||
import { RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT } from "./resources";
|
||||
import { POST_BASIC_FIELDS } from "./post";
|
||||
import { ACTOR_FRAGMENT } from "./actor";
|
||||
|
@ -246,7 +245,6 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
|
|||
}
|
||||
}
|
||||
${GROUP_BASIC_FIELDS_FRAGMENTS}
|
||||
${DISCUSSION_BASIC_FIELDS_FRAGMENT}
|
||||
${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
|
||||
`;
|
||||
|
||||
|
@ -278,8 +276,6 @@ export const GET_GROUP = gql`
|
|||
$postsLimit: Int
|
||||
$membersPage: Int
|
||||
$membersLimit: Int
|
||||
$discussionsPage: Int
|
||||
$discussionsLimit: Int
|
||||
) {
|
||||
getGroup(id: $id) {
|
||||
mediaSize
|
||||
|
@ -287,9 +283,6 @@ export const GET_GROUP = gql`
|
|||
}
|
||||
}
|
||||
${GROUP_FIELDS_FRAGMENTS}
|
||||
${DISCUSSION_BASIC_FIELDS_FRAGMENT}
|
||||
${POST_BASIC_FIELDS}
|
||||
${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
|
||||
`;
|
||||
|
||||
export const CREATE_GROUP = gql`
|
||||
|
|
|
@ -114,26 +114,52 @@
|
|||
>
|
||||
<article class="flex gap-1">
|
||||
<div class="flex-none">
|
||||
<figure v-if="props.row.actor.avatar">
|
||||
<img
|
||||
class="rounded"
|
||||
:src="props.row.actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle :size="48" v-else />
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: props.row.actor.id },
|
||||
}"
|
||||
>
|
||||
<figure v-if="props.row.actor.avatar">
|
||||
<img
|
||||
class="rounded"
|
||||
:src="props.row.actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle :size="48" v-else />
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<div class="prose dark:prose-invert">
|
||||
<span v-if="props.row.actor.name">{{
|
||||
props.row.actor.name
|
||||
}}</span
|
||||
><span v-else>@{{ usernameWithDomain(props.row.actor) }}</span
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: props.row.actor.id },
|
||||
}"
|
||||
v-if="props.row.actor.name"
|
||||
>{{ props.row.actor.name }}</router-link
|
||||
><router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: props.row.actor.id },
|
||||
}"
|
||||
v-else
|
||||
>@{{ usernameWithDomain(props.row.actor) }}</router-link
|
||||
><br />
|
||||
<span v-if="props.row.actor.name"
|
||||
>@{{ usernameWithDomain(props.row.actor) }}</span
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_PROFILE,
|
||||
params: { id: props.row.actor.id },
|
||||
}"
|
||||
v-if="props.row.actor.name"
|
||||
>@{{ usernameWithDomain(props.row.actor) }}</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -199,23 +199,43 @@
|
|||
v-slot="props"
|
||||
>
|
||||
<article class="flex gap-2">
|
||||
<figure class="" v-if="props.row.parent.avatar">
|
||||
<img
|
||||
class="rounded-full"
|
||||
:src="props.row.parent.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
params: { id: props.row.parent.id },
|
||||
}"
|
||||
>
|
||||
<figure class="" v-if="props.row.parent.avatar">
|
||||
<img
|
||||
class="rounded-full"
|
||||
:src="props.row.parent.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<AccountCircle v-else :size="48" />
|
||||
</router-link>
|
||||
<div class="">
|
||||
<div class="prose dark:prose-invert">
|
||||
<span v-if="props.row.parent.name">{{
|
||||
props.row.parent.name
|
||||
}}</span
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
params: { id: props.row.parent.id },
|
||||
}"
|
||||
v-if="props.row.parent.name"
|
||||
>{{ props.row.parent.name }}</router-link
|
||||
><br />
|
||||
<span>@{{ usernameWithDomain(props.row.parent) }}</span>
|
||||
<router-link
|
||||
class="no-underline"
|
||||
:to="{
|
||||
name: RouteName.ADMIN_GROUP_PROFILE,
|
||||
params: { id: props.row.parent.id },
|
||||
}"
|
||||
>@{{ usernameWithDomain(props.row.parent) }}</router-link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
@ -133,7 +133,7 @@ const preferredUsername = ref("");
|
|||
const name = ref("");
|
||||
const domain = ref("");
|
||||
|
||||
const local = useRouteQuery("local", false, booleanTransformer);
|
||||
const local = useRouteQuery("local", true, booleanTransformer);
|
||||
const suspended = useRouteQuery("suspended", false, booleanTransformer);
|
||||
const page = useRouteQuery("page", 1, integerTransformer);
|
||||
|
||||
|
|
|
@ -119,7 +119,7 @@ const preferredUsername = ref("");
|
|||
const name = ref("");
|
||||
const domain = ref("");
|
||||
|
||||
const local = useRouteQuery("local", false, booleanTransformer);
|
||||
const local = useRouteQuery("local", true, booleanTransformer);
|
||||
const suspended = useRouteQuery("suspended", false, booleanTransformer);
|
||||
const page = useRouteQuery("page", 1, integerTransformer);
|
||||
|
||||
|
|
|
@ -7,7 +7,12 @@
|
|||
class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
|
||||
>
|
||||
<div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
|
||||
<skeleton-date-calendar-icon
|
||||
v-if="eventLoading"
|
||||
class="absolute left-3 -top-16"
|
||||
/>
|
||||
<date-calendar-icon
|
||||
v-else
|
||||
:date="event.beginsOn.toString()"
|
||||
class="absolute left-3 -top-16"
|
||||
/>
|
||||
|
@ -16,7 +21,12 @@
|
|||
<section class="intro px-2 pt-4" dir="auto">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex-1 min-w-[300px]">
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-12 bg-slate-200 w-3/4"
|
||||
/>
|
||||
<h1
|
||||
v-else
|
||||
class="text-4xl font-bold m-0"
|
||||
dir="auto"
|
||||
:lang="event?.language"
|
||||
|
@ -24,7 +34,11 @@
|
|||
{{ event?.title }}
|
||||
</h1>
|
||||
<div class="organizer">
|
||||
<div v-if="event?.organizerActor && !event?.attributedTo">
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
|
||||
/>
|
||||
<div v-else-if="event?.organizerActor && !event?.attributedTo">
|
||||
<popover-actor-card
|
||||
:actor="event.organizerActor"
|
||||
:inline="true"
|
||||
|
@ -71,7 +85,11 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2 gap-y-4 mt-2 my-3">
|
||||
<p v-if="event?.status !== EventStatus.CONFIRMED">
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
|
||||
/>
|
||||
<p v-else-if="event?.status !== EventStatus.CONFIRMED">
|
||||
<tag
|
||||
variant="warning"
|
||||
v-if="event?.status === EventStatus.TENTATIVE"
|
||||
|
@ -83,7 +101,7 @@
|
|||
>{{ t("Event cancelled") }}</tag
|
||||
>
|
||||
</p>
|
||||
<template v-if="!event?.draft">
|
||||
<template v-if="!eventLoading && !event?.draft">
|
||||
<p
|
||||
v-if="event?.visibility === EventVisibility.PUBLIC"
|
||||
class="inline-flex gap-1"
|
||||
|
@ -104,11 +122,16 @@
|
|||
<tag variant="info">{{ organizerDomain }}</tag>
|
||||
</a>
|
||||
</template>
|
||||
<p class="flex flex-wrap gap-1 items-center" dir="auto">
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-64"
|
||||
/>
|
||||
<p v-else class="flex flex-wrap gap-1 items-center" dir="auto">
|
||||
<tag v-if="eventCategory" class="category" capitalize>{{
|
||||
eventCategory
|
||||
}}</tag>
|
||||
<router-link
|
||||
class="rounded-md truncate text-sm text-violet-title py-1 bg-purple-3 dark:text-violet-3 category"
|
||||
v-for="tag in event?.tags ?? []"
|
||||
:key="tag.title"
|
||||
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
|
||||
|
@ -122,8 +145,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventLoading">
|
||||
<div class="animate-pulse mb-2 h-6 bg-slate-200 w-64" />
|
||||
<div class="animate-pulse mb-2 h-6 bg-slate-200 w-64" />
|
||||
</div>
|
||||
<EventActionSection
|
||||
v-if="event"
|
||||
v-else-if="event"
|
||||
:event="event"
|
||||
:currentActor="currentActor"
|
||||
:participations="participations"
|
||||
|
@ -140,8 +167,23 @@
|
|||
class="rounded bg-white dark:bg-zinc-700 shadow-md h-min max-w-screen-sm"
|
||||
>
|
||||
<div class="sticky p-4">
|
||||
<aside
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse rounded bg-white dark:bg-zinc-700 h-min max-w-screen-sm"
|
||||
>
|
||||
<div class="mb-6 p-2" v-for="i in 3" :key="i">
|
||||
<div class="mb-2 h-6 bg-slate-200 w-64" />
|
||||
<div class="flex space-x-4 flex-row">
|
||||
<div class="rounded-full bg-slate-200 h-10 w-10"></div>
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<div class="h-3 bg-slate-200"></div>
|
||||
<div class="h-3 bg-slate-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<event-metadata-sidebar
|
||||
v-if="event"
|
||||
v-else-if="event"
|
||||
:event="event"
|
||||
:user="loggedUser"
|
||||
@showMapModal="showMap = true"
|
||||
|
@ -153,7 +195,19 @@
|
|||
class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4"
|
||||
>
|
||||
<h2 class="text-2xl">{{ t("About this event") }}</h2>
|
||||
<p v-if="!event?.description">
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-3/4"
|
||||
/>
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-3/4"
|
||||
/>
|
||||
<div
|
||||
v-if="eventLoading"
|
||||
class="animate-pulse mb-2 h-6 space-y-6 bg-slate-200 w-1/4"
|
||||
/>
|
||||
<p v-else-if="!event?.description">
|
||||
{{ t("The event organizer didn't add any description.") }}
|
||||
</p>
|
||||
<div v-else>
|
||||
|
@ -235,6 +289,7 @@ import {
|
|||
usernameWithDomain,
|
||||
} from "@/types/actor";
|
||||
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
|
||||
import SkeletonDateCalendarIcon from "@/components/Event/SkeletonDateCalendarIcon.vue";
|
||||
import Earth from "vue-material-design-icons/Earth.vue";
|
||||
import Link from "vue-material-design-icons/Link.vue";
|
||||
import MultiCard from "@/components/Event/MultiCard.vue";
|
||||
|
|
Loading…
Reference in a new issue