Merge branch 'fixes' into 'main'

Various improvements

See merge request framasoft/mobilizon!1394

js/src/assets/oruga-tailwindcss.css

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

js/src/components/Event/SkeletonDateCalendarIcon.vue

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

js/src/graphql/group.ts

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

js/src/views/Admin/AdminGroupProfile.vue

@@ -114,6 +114,13 @@
         >
           <article class="flex gap-1">
             <div class="flex-none">
+              <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"
@@ -124,16 +131,35 @@
                   />
                 </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>

js/src/views/Admin/AdminProfile.vue

@@ -199,6 +199,13 @@
           v-slot="props"
         >
           <article class="flex gap-2">
+            <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"
@@ -209,13 +216,26 @@
                 />
               </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>

js/src/views/Admin/GroupProfiles.vue

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

js/src/views/Admin/ProfilesView.vue

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

js/src/views/Event/EventView.vue

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