potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Merge branch 'fixes' into 'main'

Browse source 
Various improvements

See merge request framasoft/mobilizon!1394
This commit is contained in:
Thomas Citharel 2023-05-24 14:45:57 +00:00
parent 60185e80e3 dc3b93ffb5
commit 87208369b2
8 changed files with 159 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/src/assets/oruga-tailwindcss.css
View file

@ -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
View 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>

7
js/src/graphql/group.ts
View file

@ -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`

58
js/src/views/Admin/AdminGroupProfile.vue
View file

@ -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>

48
js/src/views/Admin/AdminProfile.vue
View file

@ -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>

2
js/src/views/Admin/GroupProfiles.vue
View file

@ -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);

2
js/src/views/Admin/ProfilesView.vue
View file

@ -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);

69
js/src/views/Event/EventView.vue
View file

@ -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";